电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

jQuery源碼分析

 quasiceo 2012-11-23
準(zhǔn)備將jQuery、Ext等框架源碼仔細(xì)分析一遍，并將結(jié)果發(fā)出來供大家學(xué)習(xí)、討論。
這是我的處女貼，請(qǐng)大家多多關(guān)照！

Js代碼  收藏代碼
  1. /*! 
  2.  * jQuery源碼分析-extend函數(shù) 
  3.  * jQuery版本:1.4.2 
  4.  *  
  5.  * ---------------------------------------------------------- 
  6.  * 函數(shù)介紹 
  7.  * jQuery.extend與jQuery.fn.extend指向同一個(gè)函數(shù)對(duì)象 
  8.  * jQuery.extend是jQuery的屬性函數(shù)(靜態(tài)方法) 
  9.  * jQuery.fn.extend是jQuery函數(shù)所構(gòu)造對(duì)象的屬性函數(shù)(對(duì)象方法) 
  10.  * 
  11.  * ---------------------------------------------------------- 
  12.  * 使用說明 
  13.  * extend函數(shù)根據(jù)參數(shù)和調(diào)用者實(shí)現(xiàn)功能如下： 
  14.  * 1.對(duì)象合并: 
  15.  * 對(duì)象合并不區(qū)分調(diào)用者,jQuery.extend與jQuery.fn.extend完全一致 
  16.  * 也就是說對(duì)jQuery對(duì)象本身及jQuery所構(gòu)造的對(duì)象沒有影響 
  17.  * 對(duì)象合并根據(jù)參數(shù)區(qū)分,參數(shù)中必須包括兩個(gè)或兩個(gè)以上對(duì)象 
  18.  * 如:$.extend({Object}, {Object}) 或 $.extend({Boolean},{Object}, {Object}) 
  19.  * 對(duì)象合并返回最終合并后的對(duì)象,支持深度拷貝 
  20.  *  
  21.  * 2.為jQuery對(duì)象本身增加方法: 
  22.  * 這種方式從調(diào)用者和參數(shù)進(jìn)行區(qū)分 
  23.  * 形式為 $.extend({Object}) 
  24.  * 這種方式等同于 jQuery.{Fnction Name} 
  25.  *  
  26.  * 3.原型繼承: 
  27.  * 原型繼承方式可以為jQuery所構(gòu)造的對(duì)象增加方法 
  28.  * 這種方式也通過調(diào)用者和參數(shù)進(jìn)行區(qū)分 
  29.  * 形式為 $.fn.extend({Object}) 
  30.  * 這種方式實(shí)際上是將{Object}追加到j(luò)Query.prototype,實(shí)現(xiàn)原型繼承 
  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.     //目標(biāo)對(duì)象  
  41.     var target = arguments[0] || {},      
  42.       
  43.     //循環(huán)變量,它會(huì)在循環(huán)時(shí)指向需要復(fù)制的第一個(gè)對(duì)象的位置,默認(rèn)為1  
  44.     //如果需要進(jìn)行深度復(fù)制,則它指向的位置為2  
  45.     i = 1,      
  46.       
  47.     //實(shí)參長(zhǎng)度  
  48.     length = arguments.length,      
  49.       
  50.     //是否進(jìn)行深度拷貝  
  51.     //深度拷貝情況下,會(huì)對(duì)對(duì)象更深層次的屬性對(duì)象進(jìn)行合并和覆蓋  
  52.     deep = false,      
  53.       
  54.     //用于在復(fù)制時(shí)記錄參數(shù)對(duì)象  
  55.     options,      
  56.       
  57.     //用于在復(fù)制時(shí)記錄對(duì)象屬性名  
  58.     name,      
  59.       
  60.     //用于在復(fù)制時(shí)記錄目標(biāo)對(duì)象的屬性值  
  61.     src,      
  62.       
  63.     //用于在復(fù)制時(shí)記錄參數(shù)對(duì)象的屬性值  
  64.     copy;  
  65.       
  66.     //只有當(dāng)?shù)谝粋€(gè)實(shí)參為true時(shí),即需要進(jìn)行深度拷貝時(shí),執(zhí)行以下分支  
  67.     if (typeof target === "boolean") {  
  68.         //deep = true,進(jìn)行深度拷貝  
  69.         deep = target;  
  70.           
  71.         //進(jìn)行深度拷貝時(shí)目標(biāo)對(duì)象為第二個(gè)實(shí)參,如果沒有則默認(rèn)為空對(duì)象  
  72.         target = arguments[1] || {};  
  73.           
  74.         //因?yàn)橛辛薲eep深度復(fù)制參數(shù),因此i指向的位置為第二個(gè)參數(shù)  
  75.         i = 2;  
  76.     }  
  77.       
  78.     //當(dāng)目標(biāo)對(duì)象不是一個(gè)Object且不是一個(gè)Function時(shí)(函數(shù)也是對(duì)象,因此使用jQuery.isFunction進(jìn)行檢查)  
  79.     if (typeof target !== "object" && !jQuery.isFunction(target)) {  
  80.           
  81.         //設(shè)置目標(biāo)為空對(duì)象  
  82.         target = {};  
  83.     }  
  84.       
  85.     //如果當(dāng)前參數(shù)中只包含一個(gè){Object}  
  86.     //如 $.extend({Object}) 或 $.extend({Boolean}, {Object})  
  87.     //則將該對(duì)象中的屬性拷貝到當(dāng)前jQuery對(duì)象或?qū)嵗?/span>  
  88.     //此情況下deep深度復(fù)制仍然有效  
  89.     if (length === i) {  
  90.           
  91.         //target = this;這句代碼是整個(gè)extend函數(shù)的核心  
  92.         //在這里目標(biāo)對(duì)象被更改,這里的this指向調(diào)用者  
  93.         //在 $.extend()方式中表示jQuery對(duì)象本身  
  94.         //在 $.fn.extend()方式中表示jQuery函數(shù)所構(gòu)造的對(duì)象(即jQuery類的實(shí)例)  
  95.         target = this;  
  96.           
  97.         //自減1,便于在后面的拷貝循環(huán)中,可以指向需要復(fù)制的對(duì)象  
  98.         --i;  
  99.     }  
  100.       
  101.     //循環(huán)實(shí)參,循環(huán)從第1個(gè)參數(shù)開始,如果是深度復(fù)制,則從第2個(gè)參數(shù)開始  
  102.     for (; i < length; i++) {  
  103.           
  104.         //當(dāng)前參數(shù)不為null,undefined,0,false,空字符串時(shí)  
  105.         //options表示當(dāng)前參數(shù)對(duì)象  
  106.         if ((options = arguments[i]) != null) {  
  107.               
  108.             //遍歷當(dāng)前參數(shù)對(duì)象的屬性,屬性名記錄到name  
  109.             for (name in options) {  
  110.                   
  111.                 //src用于記錄目標(biāo)對(duì)象中的當(dāng)前屬性值  
  112.                 src = target[name];  
  113.                   
  114.                 //copy用于記錄參數(shù)對(duì)象中的當(dāng)前屬性值  
  115.                 copy = options[name];  
  116.                   
  117.                 //存在目標(biāo)對(duì)象本身的引用,構(gòu)成死循環(huán),結(jié)束此次遍歷  
  118.                 if (target === copy) {  
  119.                     continue;  
  120.                 }  
  121.                   
  122.                 //如果需要進(jìn)行深度拷貝,且copy類型為對(duì)象或數(shù)組  
  123.                 if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {  
  124.                   
  125.                     //如果src類型為對(duì)象或數(shù)組,則clone記錄src  
  126.                     //否則colne記錄與copy類型一致的空值(空數(shù)組或空對(duì)象)  
  127.                     var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src : jQuery.isArray(copy) ? [] : {};  
  128.                       
  129.                     //對(duì)copy迭代深度復(fù)制  
  130.                     target[name] = jQuery.extend(deep, clone, copy);  
  131.                       
  132.                     //如果不需要進(jìn)行深度拷貝  
  133.                 } else if (copy !== undefined) {  
  134.                       
  135.                     //直接將copy復(fù)制給目標(biāo)對(duì)象  
  136.                     target[name] = copy;  
  137.                 }  
  138.             }  
  139.         }  
  140.     }  
  141.       
  142.     //返回處理后的目標(biāo)對(duì)象  
  143.     return target;  
  144. };  
  145.   
  146.   
  147. /** 
  148.  * jQuery框架本身對(duì)extend函數(shù)的使用非常頻繁 
  149.  * 典型示例為jQuery.ajax 
  150.  *  
  151.  */  
  152.   
  153. //使用extend對(duì)jQuery對(duì)象本身進(jìn)行擴(kuò)展,只給了一個(gè)參數(shù)對(duì)象  
  154. //該對(duì)象中的屬性將被追加到j(luò)Query對(duì)象中  
  155. jQuery.extend({  
  156.    
  157.     //jQuery.ajax  
  158.     //$.ajax  
  159.    
  160.     //這里的origSettings參數(shù)是自定義的ajax配置  
  161.     //jQuery對(duì)象本身有一個(gè)ajaxSettings屬性,是默認(rèn)的ajax配置  
  162.     ajax: function(origSettings){   
  163.    
  164.         //這里使用extend對(duì)ajax配置項(xiàng)進(jìn)行合并  
  165.         //第一個(gè)參數(shù)表示進(jìn)行深度拷貝  
  166.         //首先將第3個(gè)參數(shù)jQuery.ajaxSettings(即jQuery默認(rèn)ajax配置)復(fù)制到第2個(gè)參數(shù)(一個(gè)空對(duì)象)  
  167.         //然后將第4個(gè)參數(shù)(自定義配置)復(fù)制到配置對(duì)象(覆蓋默認(rèn)配置)  
  168.         //這里的s就得到了最終的ajax配置項(xiàng)  
  169.         var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);  
  170.     
  171.         //其它相關(guān)代碼...(省略)  
  172.     }  
  173. });   

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多