分享

JQuery小刨

 quasiceo 2012-11-23
再来看一下jQuery的扩展方法吧,这可是jQuery的核心。
其实这个方法并不复杂,它的功能有以下几个
1.对object jQuery的扩展,也就是做成所谓的Utilities方法集,方便大家使用jQuery.functionName()的方式调用。
2.对jQuery.fn(也就是jQuery.fn.init.prototype,也就是jQuery.fn.init的实例,也就是调用$()方法返回的对象)的扩展,扩充jQuery实例的功能。
3.对object进行属性或者方法的复制(包括深度复制)。

对jQuery以及jQuery.fn进行扩充,从source里可以看出,因为参数只有一个,走的是个很简单的路径,如果把source抽出来,就如同下面所示:
Js代码  收藏代码
  1. jQuery.extend = jQuery.fn.extend = function() {  
  2.     // copy reference to target object  
  3.     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;  
  4.   
  5.     // extend jQuery itself if only one argument is passed  
  6.     if ( length === i ) {  
  7.         target = this;  
  8.         --i;  
  9.     }  
  10.   
  11.     for ( ; i < length; i++ ) {  
  12.         // Only deal with non-null/undefined values  
  13.         if ( (options = arguments[ i ]) != null ) {  
  14.             // Extend the base object  
  15.             for ( name in options ) {  
  16.                 src = target[ name ];  
  17.                 copy = options[ name ];  
  18.   
  19.                 // Prevent never-ending loop  
  20.                 if ( target === copy ) {  
  21.                     continue;  
  22.                 }  
  23.                 // Don't bring in undefined values  
  24.                 if ( copy !== undefined ) {  
  25.                     target[ name ] = copy;  
  26.                 }  
  27.             }  
  28.         }  
  29.     }  
  30.   
  31.     // Return the modified object  
  32.     return target;  
  33. };  


除去杂乱的变量声明,赋值以及判断。其实就是简单的对对象的属性方法扩充。

如果不是深度复制,那基本上就是对对象方法的clone了,从jQuery的source来看,就是把对象object的方法属性赋值一份。如:5557行(以版本1.4.2的普通版为准)
Js代码  收藏代码
  1. var opt = jQuery.extend({}, optall)  

就是把object optall里的属性方法clone给一个空的object。
剥离出的代码如下:

Js代码  收藏代码
  1. jQuery.extend = jQuery.fn.extend = function() {  
  2.     // copy reference to target object  
  3.     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;  
  4.   
  5.     // Handle case when target is a string or something (possible in deep copy)  
  6.     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  
  7.         target = {};  
  8.     }  
  9.   
  10.     for ( ; i < length; i++ ) {  
  11.         // Only deal with non-null/undefined values  
  12.         if ( (options = arguments[ i ]) != null ) {  
  13.             // Extend the base object  
  14.             for ( name in options ) {  
  15.                 src = target[ name ];  
  16.                 copy = options[ name ];  
  17.   
  18.                 // Prevent never-ending loop  
  19.                 if ( target === copy ) {  
  20.                     continue;  
  21.                 }  
  22.   
  23.                 // Don't bring in undefined values  
  24.                 if ( copy !== undefined ) {  
  25.                     target[ name ] = copy;  
  26.                 }  
  27.             }  
  28.         }  
  29.     }  
  30.   
  31.     // Return the modified object  
  32.     return target;  
  33. };  

从source的4931行,还可以看出,这个方法除了clone外,还可以覆盖掉原有object的默认设置。
Js代码  收藏代码
  1. jQuery.extend( jQuery.ajaxSettings, settings );  


深度复制其实就是如果复制对象的属性里有object或者数组的话,使用递归的方式把它们都复制过来。
举个例子来讲
Js代码  收藏代码
  1. var src = {name:"wqf"};  
  2. var copy = {info:{company:"macrohard",position:"CEO"}};  
  3. var ret =jQuery.extend(true,src,copy);  


得到的结果就是
Js代码  收藏代码
  1. ret ={name:"wqf",info:{company:"macrohard",position:"CEO"}}  

当然,如果出现重复的属性或者方法的话,也会覆盖掉。

这个方法并不复杂,可是却是jQuery里比较重要的一个方法,弄清楚它的几个作用,有助于快速理清一些方法的实现。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多