zoukankan      html  css  js  c++  java
  • 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 判定,当正式版发布时,又可以高兴地宣布这几个方法快了多少百分比了!

  • 相关阅读:
    转:python时间日期处理小结
    vi 的一些常用操作-君子善假于物也
    没有了老师,该如何学习?
    git常用命令
    python 读配置文件
    Python中unittest用法实例
    python 单元测试unnitest-摘录自http://www.cnblogs.com/hackerain/p/3682019.html#undefined
    纯CSS实现立方体旋转
    CSS 3动画
    CSS 2D转换
  • 原文地址:https://www.cnblogs.com/hanmos/p/2030990.html
Copyright © 2011-2022 走看看