jQuery1.6c新增的适配器

其实在jQuery1.5中已有这东西，cssHooks，或者更早之前的jQuery.event.special, 或者 Sizzle.selectors里面更多的对象。它们共同的特点是包含了许多相关的函数，cssHooks是专门处理css属性的获取与设置，如IE的opacity,event.special用于装载与卸载submit, change, focus ,mouseenter等特别事件与自定义事件， Sizzle.selectors里面的过滤器与候选集获取器就更不用说了。由于JS用对象做为表进行查找是比if条句与switch语句快很多，加之，适配器这种模式对于扩展新功能非常有利，因为jQuery1.6便把它发扬光大了。

在jQuery的attributes模块（github是这样分割的，但耦合这么高很难说是模块），共增加了三个这样对象，valHooks，attrHooks, propHooks，分别对应val，attr与prop这个三个方法。prop是新增的，表示jQuery决定区分属性与特性的决心，但IE6/7还是无法区分它们，因此attr基本上涵盖了prop的功能。

我们看一下它们各自的运用吧！

// jQuery.style 方法
      if ( value !== undefined ) {
        //=================略==============
        // If a hook was provided, use that value, otherwise just set the specified value
        if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
          // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
          // Fixes bug #5509
          try {
            style[ name ] = value;
          } catch(e) {}
        }
 
      } else {
        // If a hook was provided get the non-computed value from there
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
          return ret;
        }
 
        // Otherwise just get the value from the style object
        return style[ name ];
      }

// jQuery.fn.val 方法
      if ( !arguments.length ) {
        if ( elem ) {
          hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];

          if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
            return ret;
          }

          return (elem.value || "").replace(rreturn, "");
        }

        return undefined;
      }
     //===============略============	
      hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
      // If set returns undefined, fall back to normal setting
      if ( !hooks || ("set" in hooks && hooks.set( this, val, "value" ) === undefined) ) {
        this.value = val;
      }

// jQuery.attr 方法
     hooks = jQuery.attrHooks[ name ] || ( jQuery.nodeName( elem, "form" ) && formHook );

      if ( value !== undefined ) {

        if ( value === null || (value === false && !rspecial.test( name )) ) {
          jQuery.removeAttr( elem, name );
          return undefined;

        } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
          return ret;

        } else {

          // Set boolean attributes to the same name
          if ( value === true && !rspecial.test( name ) ) {
            value = name;
          }

          elem.setAttribute( name, "" + value );
          return value;
        }

      } else {

        if ( hooks && "get" in hooks && notxml ) {
          return hooks.get( elem, name );

        } else {

          ret = elem.getAttribute( name );

          // Non-existent attributes return null, we normalize to undefined
          return ret === null ? undefined : ret;
        }
      }

// jQuery.prop 方法
           hooks = jQuery.propHooks[ name ];

		if ( value !== undefined ) {
			if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;

			} else {
				return (elem[ name ] = value);
			}

		} else {
			if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== undefined ) {
				return ret;

			} else {
				return elem[ name ];
			}
		}

//jQuery.event.add
      if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
        // Bind the global event handler to the element
        if ( elem.addEventListener ) {
          elem.addEventListener( type, eventHandle, false );

        } else if ( elem.attachEvent ) {
          elem.attachEvent( "on" + type, eventHandle );
        }
      }
//jQuery.event.remove
      if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {
        jQuery.removeEvent( elem, type, elemData.handle );
      }

可以发现还是很有章法的。这些适配器就是用来处理一些特殊的属性，样式或事件。而这些属性，样式或事件，我们可以通过浏览器的特征嗅探，把相应的解决方法添加到适配器中。有了这些适配器，jQuery就可以省去许多if else 判定，当正式版发布时，又可以高兴地宣布这几个方法快了多少百分比了！

attr = function( el, name, value ) { // 标识是否使用写方法 var set = value !== undefined; if(el.nodeType == 1){ var notxml = !dom.isXML(el); //对于HTML，我们需要对一些属性名进行映射 name = notxml && dom.props[ name ] || name; //safari 我们必须访问上一级元素时,才能获取这个值 if ( name === "selected" && !dom.support.optSelected ) { var parent = el.parentNode,i = -2 while(i++ ){ parent.selectedIndex; parent = parent.parentNode; } } if (name === "style" && notxml && !dom.support.attrStyle) { if ( set ) { el.style.cssText = "" + value; } return el.style.cssText; } if (el[ name ] !== undefined && notxml ) { if ( set ) { try{ if ( value === null ) { el.removeAttribute( name ); } else { el[ name ] = value; } }catch(e){}; } //注意formElement[name] 相等于formElement.elements[name]，会返回其辖下的表单元素 if (el.tagName === "FORM" && el.getAttributeNode(name) ) { return el.getAttributeNode( name ).nodeValue; } //只有能获得焦点的元素才具有tabIndex属性，如表单元素与指定了href的链接元素 if ( name === "tabIndex" ) { var attributeNode = el.getAttributeNode( "tabIndex" ); return attributeNode && attributeNode.specified ? attributeNode.value : (dom.isFormElement( el ) || el.href )? 0 : undefined; } if(el[name] !== el.getAttribute( name, 2 )){ return el.getAttribute( name, 2 ) } return el[ name ]; } if ( set ) { el.setAttribute( name, "" + value ); } var attr = el.getAttribute( name ); return attr === null ? undefined : attr; }else if(el.nodeType === 9 || el.setTimeout){ if ( set ) { el[ name ] = value; } return el[ name ]; }else{ return undefined; } }

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年