jQuery1.6c新增的适配器

开发 前端
由于JS用对象做为表进行查找是比if条句与switch语句快很多,加之,适配器这种模式对于扩展新功能非常有利,因为jQuery1.6便把它发扬光大了。

其实在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的功能。

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

  1. // jQuery.style 方法   
  2.       if ( value !== undefined ) {     
  3.         //=================略==============   
  4.         // If a hook was provided, use that value, otherwise just set the specified value     
  5.         if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {    
  6.            // Wrapped to prevent IE from throwing errors when 'invalid' values are provided    
  7.            // Fixes bug #5509    
  8.           try {    
  9.              style[ name ] = value;    
  10.            } catch(e) {}    
  11.          }    
  12.     
  13.       } else {    
  14.          // If a hook was provided get the non-computed value from there    
  15.          if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {    
  16.            return ret;    
  17.          }  
  18.         // Otherwise just get the value from the style object    
  19.         return style[ name ];    
  20.       }   
  1. // jQuery.fn.val 方法    
  2.       if ( !arguments.length ) {    
  3.         if ( elem ) {    
  4.           hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];    
  5.           if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {    
  6.             return ret;    
  7.          }    
  8.            return (elem.value || "").replace(rreturn, "");    
  9.         }    
  10.         return undefined;    
  11.      }    
  12.      //===============略============     
  13.       hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];    
  14.       // If set returns undefined, fall back to normal setting    
  15.       if ( !hooks || ("set" in hooks && hooks.set( this, val, "value" ) === undefined) ) {    
  16.         this.value = val;    
  17.       }   
  18.  
  1. // jQuery.attr 方法    
  2.      hooks = jQuery.attrHooks[ name ] || ( jQuery.nodeName( elem, "form" ) && formHook );    
  3.       if ( value !== undefined ) {    
  4.         if ( value === null || (value === false && !rspecial.test( name )) ) {    
  5.           jQuery.removeAttr( elem, name );    
  6.           return undefined;    
  7.         } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {    
  8.           return ret;    
  9.         } else {    
  10.           // Set boolean attributes to the same name    
  11.          if ( value === true && !rspecial.test( name ) ) {    
  12.             value = name;    
  13.           }    
  14.          elem.setAttribute( name, "" + value );    
  15.           return value;    
  16.         }    
  17.       } else {    
  18.         if ( hooks && "get" in hooks && notxml ) {    
  19.           return hooks.get( elem, name );    
  20.         } else {    
  21.           ret = elem.getAttribute( name );    
  22.           // Non-existent attributes return null, we normalize to undefined    
  23.           return ret === null ? undefined : ret;    
  24.         }    
  25.       }   
  26.  
  1. // jQuery.prop 方法    
  2.            hooks = jQuery.propHooks[ name ];    
  3.         if ( value !== undefined ) {    
  4.             if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {    
  5.                 return ret;    
  6.             } else {    
  7.                 return (elem[ name ] = value);    
  8.            }    
  9.         } else {    
  10.             if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== undefined ) {    
  11.                 return ret;    
  12.             } else {    
  13.                 return elem[ name ];    
  14.             }    
  15.         }  
  1. //jQuery.event.add    
  2.       if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {    
  3.      // Bind the global event handler to the element    
  4.         if ( elem.addEventListener ) {    
  5.           elem.addEventListener( type, eventHandle, false );   
  6.         } else if ( elem.attachEvent ) {    
  7.           elem.attachEvent( "on" + type, eventHandle );    
  8.         }    
  9.       }    
  10. //jQuery.event.remove    
  11.       if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {    
  12.        jQuery.removeEvent( elem, type, elemData.handle );    
  13.    }   

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

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

可以发现还是很有章法的。这些适配器就是用来处理一些特殊的属性,样式或事件。而这些属性,样式或事件,我们可以通过浏览器的特征嗅探,把相应的解决方法添加到适配器中。有了这些适配器,jQuery就可以省去许多if else 判定.
 

责任编辑:陈贻新 来源: Ruby's Louvre
相关推荐

2013-02-26 10:55:47

C#适配器设计模式

2012-09-19 15:29:26

Worklight适配器

2018-10-11 10:38:31

前端JavaScript编程语言

2022-02-18 17:21:29

适配器模式客户端

2015-08-07 10:05:37

recyclervie超省写法

2020-10-25 08:56:21

适配器模式

2022-02-13 23:33:24

设计模式Java

2021-08-06 06:51:16

适配器配置Spring

2021-02-16 08:16:09

适配器模式MybatisJava

2009-12-21 10:26:09

Oracle适配器

2009-11-18 18:08:20

PHP适配器模式

2012-05-16 17:22:11

Java设计模式

2021-02-18 08:39:28

设计模式场景

2013-11-26 16:39:21

Android设计模式

2010-07-09 12:53:30

HART协议

2012-08-02 10:46:34

JavaAdapter模式

2014-12-17 09:57:01

AndroidAdapteViewHolder

2014-07-17 10:55:10

Win8.1应用开发适配器模式

2010-09-02 17:04:52

DHCP服务器

2012-12-10 10:53:04

IBMdW
点赞
收藏

51CTO技术栈公众号