分享

jQuery源码分析

 quasiceo 2012-11-23
准备将jQuery、Ext等框架源码仔细分析一遍,并将结果发出来供大家学习、讨论。
这是我的处女贴,请大家多多关照!

Js代码  收藏代码
  1. /*! 
  2.  * jQuery源码分析-extend函数 
  3.  * jQuery版本:1.4.2 
  4.  *  
  5.  * ---------------------------------------------------------- 
  6.  * 函数介绍 
  7.  * jQuery.extend与jQuery.fn.extend指向同一个函数对象 
  8.  * jQuery.extend是jQuery的属性函数(静态方法) 
  9.  * jQuery.fn.extend是jQuery函数所构造对象的属性函数(对象方法) 
  10.  * 
  11.  * ---------------------------------------------------------- 
  12.  * 使用说明 
  13.  * extend函数根据参数和调用者实现功能如下: 
  14.  * 1.对象合并: 
  15.  * 对象合并不区分调用者,jQuery.extend与jQuery.fn.extend完全一致 
  16.  * 也就是说对jQuery对象本身及jQuery所构造的对象没有影响 
  17.  * 对象合并根据参数区分,参数中必须包括两个或两个以上对象 
  18.  * 如:$.extend({Object}, {Object}) 或 $.extend({Boolean},{Object}, {Object}) 
  19.  * 对象合并返回最终合并后的对象,支持深度拷贝 
  20.  *  
  21.  * 2.为jQuery对象本身增加方法: 
  22.  * 这种方式从调用者和参数进行区分 
  23.  * 形式为 $.extend({Object}) 
  24.  * 这种方式等同于 jQuery.{Fnction Name} 
  25.  *  
  26.  * 3.原型继承: 
  27.  * 原型继承方式可以为jQuery所构造的对象增加方法 
  28.  * 这种方式也通过调用者和参数进行区分 
  29.  * 形式为 $.fn.extend({Object}) 
  30.  * 这种方式实际上是将{Object}追加到jQuery.prototype,实现原型继承 
  31.  *  
  32.  * ---------------------------------------------------------- 
  33.  *  
  34.  */  
  35.    
  36. // jQuery.fn = jQuery.prototype  
  37. // jQuery.fn.extend = jQuery.prototype.extend  
  38. jQuery.extend = jQuery.fn.extend = function(){  
  39.   
  40.     //目标对象  
  41.     var target = arguments[0] || {},      
  42.       
  43.     //循环变量,它会在循环时指向需要复制的第一个对象的位置,默认为1  
  44.     //如果需要进行深度复制,则它指向的位置为2  
  45.     i = 1,      
  46.       
  47.     //实参长度  
  48.     length = arguments.length,      
  49.       
  50.     //是否进行深度拷贝  
  51.     //深度拷贝情况下,会对对象更深层次的属性对象进行合并和覆盖  
  52.     deep = false,      
  53.       
  54.     //用于在复制时记录参数对象  
  55.     options,      
  56.       
  57.     //用于在复制时记录对象属性名  
  58.     name,      
  59.       
  60.     //用于在复制时记录目标对象的属性值  
  61.     src,      
  62.       
  63.     //用于在复制时记录参数对象的属性值  
  64.     copy;  
  65.       
  66.     //只有当第一个实参为true时,即需要进行深度拷贝时,执行以下分支  
  67.     if (typeof target === "boolean") {  
  68.         //deep = true,进行深度拷贝  
  69.         deep = target;  
  70.           
  71.         //进行深度拷贝时目标对象为第二个实参,如果没有则默认为空对象  
  72.         target = arguments[1] || {};  
  73.           
  74.         //因为有了deep深度复制参数,因此i指向的位置为第二个参数  
  75.         i = 2;  
  76.     }  
  77.       
  78.     //当目标对象不是一个Object且不是一个Function时(函数也是对象,因此使用jQuery.isFunction进行检查)  
  79.     if (typeof target !== "object" && !jQuery.isFunction(target)) {  
  80.           
  81.         //设置目标为空对象  
  82.         target = {};  
  83.     }  
  84.       
  85.     //如果当前参数中只包含一个{Object}  
  86.     //如 $.extend({Object}) 或 $.extend({Boolean}, {Object})  
  87.     //则将该对象中的属性拷贝到当前jQuery对象或实例中  
  88.     //此情况下deep深度复制仍然有效  
  89.     if (length === i) {  
  90.           
  91.         //target = this;这句代码是整个extend函数的核心  
  92.         //在这里目标对象被更改,这里的this指向调用者  
  93.         //在 $.extend()方式中表示jQuery对象本身  
  94.         //在 $.fn.extend()方式中表示jQuery函数所构造的对象(即jQuery类的实例)  
  95.         target = this;  
  96.           
  97.         //自减1,便于在后面的拷贝循环中,可以指向需要复制的对象  
  98.         --i;  
  99.     }  
  100.       
  101.     //循环实参,循环从第1个参数开始,如果是深度复制,则从第2个参数开始  
  102.     for (; i < length; i++) {  
  103.           
  104.         //当前参数不为null,undefined,0,false,空字符串时  
  105.         //options表示当前参数对象  
  106.         if ((options = arguments[i]) != null) {  
  107.               
  108.             //遍历当前参数对象的属性,属性名记录到name  
  109.             for (name in options) {  
  110.                   
  111.                 //src用于记录目标对象中的当前属性值  
  112.                 src = target[name];  
  113.                   
  114.                 //copy用于记录参数对象中的当前属性值  
  115.                 copy = options[name];  
  116.                   
  117.                 //存在目标对象本身的引用,构成死循环,结束此次遍历  
  118.                 if (target === copy) {  
  119.                     continue;  
  120.                 }  
  121.                   
  122.                 //如果需要进行深度拷贝,且copy类型为对象或数组  
  123.                 if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {  
  124.                   
  125.                     //如果src类型为对象或数组,则clone记录src  
  126.                     //否则colne记录与copy类型一致的空值(空数组或空对象)  
  127.                     var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src : jQuery.isArray(copy) ? [] : {};  
  128.                       
  129.                     //对copy迭代深度复制  
  130.                     target[name] = jQuery.extend(deep, clone, copy);  
  131.                       
  132.                     //如果不需要进行深度拷贝  
  133.                 } else if (copy !== undefined) {  
  134.                       
  135.                     //直接将copy复制给目标对象  
  136.                     target[name] = copy;  
  137.                 }  
  138.             }  
  139.         }  
  140.     }  
  141.       
  142.     //返回处理后的目标对象  
  143.     return target;  
  144. };  
  145.   
  146.   
  147. /** 
  148.  * jQuery框架本身对extend函数的使用非常频繁 
  149.  * 典型示例为jQuery.ajax 
  150.  *  
  151.  */  
  152.   
  153. //使用extend对jQuery对象本身进行扩展,只给了一个参数对象  
  154. //该对象中的属性将被追加到jQuery对象中  
  155. jQuery.extend({  
  156.    
  157.     //jQuery.ajax  
  158.     //$.ajax  
  159.    
  160.     //这里的origSettings参数是自定义的ajax配置  
  161.     //jQuery对象本身有一个ajaxSettings属性,是默认的ajax配置  
  162.     ajax: function(origSettings){   
  163.    
  164.         //这里使用extend对ajax配置项进行合并  
  165.         //第一个参数表示进行深度拷贝  
  166.         //首先将第3个参数jQuery.ajaxSettings(即jQuery默认ajax配置)复制到第2个参数(一个空对象)  
  167.         //然后将第4个参数(自定义配置)复制到配置对象(覆盖默认配置)  
  168.         //这里的s就得到了最终的ajax配置项  
  169.         var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);  
  170.     
  171.         //其它相关代码...(省略)  
  172.     }  
  173. });   

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

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多