jQuery.extend源碼深層分析

標籤：style   blog   color   io   os   使用   ar   for   sp   

　　在網站的開發中，經常會自己寫一些jQuery外掛程式來方便使用，其中自然少不了一個關鍵的方法->jQuery.extend()，使用這個方法來擴充jQuery對象。

那麼今天就來講講這個函數的實現原理。

 

　　這個方法不僅僅可以實現外掛程式，當然也有它本來的功能，擴充項物件。like this: 

var person = {name:‘李四‘};var person2 = $.extend(person,{age:20},{sex:‘male‘});//person.name=‘李四‘;//person.age=20;//person.sex=‘male‘;
person2與person擴充後是同一個對象

這個函數的第一個函數指的是要被擴充的對象(target)，第二、第三個函數則是附加對象。通俗點將，jQuery將檢查target中沒有的屬性，而在後面兩個對象中卻存在，那麼這些屬性將被添加到target中。

那麼我們寫外掛程式又是怎麼回事呢，我們只用了一個參數啊，像這樣：

$.extend({    myExtendMethod:function(){        alert(‘這是我的方法‘);    }});

像上面這個例子裡，我們的$.extend方法中只有一個Object類型的參數，即：{myExtendMethod}，那麼這個時候怎麼擴充，去擴充誰？target又是什嗎？當然要擴充的就是我們愛不釋手的jQuery了！上一下源碼：

 

 1 jQuery.extend = jQuery.fn.extend = function() { 2     var options, name, src, copy, copyIsArray, clone, 3         target = arguments[0] || {}, 4         i = 1, 5         length = arguments.length, 6         deep = false; 7  8     // 不會滿足，因為我們傳進來的是Object 9     if ( typeof target === "boolean" ) {10         deep = target;11         target = arguments[1] || {};12         // skip the boolean and the target13         i = 2;14     }15 16     // 同樣不會滿足17     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {18         target = {};19     }20 21     // length為1，i也為1，所以會走這個條件22     if ( length === i ) {23         target = this;24         --i;25     }26 27     for ( ; i < length; i++ ) {28         // Only deal with non-null/undefined values29         if ( (options = arguments[ i ]) != null ) {30             // Extend the base object31             for ( name in options ) {32                 src = target[ name ];33                 copy = options[ name ];34 35                 // Prevent never-ending loop36                 if ( target === copy ) {37                     continue;38                 }39 40                 // Recurse if we‘re merging plain objects or arrays41                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {42                     if ( copyIsArray ) {43                         copyIsArray = false;44                         clone = src && jQuery.isArray(src) ? src : [];45 46                     } else {47                         clone = src && jQuery.isPlainObject(src) ? src : {};48                     }49 50                     // Never move original objects, clone them51                     target[ name ] = jQuery.extend( deep, clone, copy );52 53                 // Don‘t bring in undefined values54                 } else if ( copy !== undefined ) {55                     target[ name ] = copy;56                 }57             }58         }59     }60 61     // Return the modified object62     return target;63 };

 

通過這段代碼可以看到第一行的定義，$.extend和$.fn.extend的定義方法為同一個匿名函數，也就是他們是一個方法實現的，只是擴充的對象前者是jQuery，

後者是jQuery.fn =jQuery.prototype也就是 jQuery執行個體（  $(‘div‘)  ）。$.fn.extend()就是為jQuery添加執行個體方法。

ps：如果不瞭解js原型概念可以看我上一篇文章js建立對象，或者看其他園子的文章。

源碼：jQuery.fn= jQuery.prototype

 

下面就來看看$.extend函數只有一個參數時怎麼執行的。

看3行代碼的target變數，指定了arguments[0]為它的值，按照剛剛我們定義的外掛程式，就是{myExtendMethod:function(){...}}這個object;

繼續往下看，看我21行的注釋，this指的是jQuery對象，然後把jQuery賦給了target變數，並且把 i 變成了0 ；

然後進入for迴圈，在第55行代碼的時候，會把我們的參數Object賦給jQuery對象，這樣，就把myExtendMethod這個方法添加到jQuery對象上了。

 1 $.extend({ 2     testMethod: function () { 3          alert(111); 4     } 5 }); 6 $.fn.extend({ 7     testMethod2: function () { 8          alert(222); 9     }10  });11 //調用擴充方法12 $.testMethod();//彈出11113 $("#List1").testMethod2();//彈出222

 

jQuery.extend源碼深層分析