Jquery中的extend擴展

一、看下常見的extend擴展：

1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( window.$ === jQuery ) { 4: window.$ = _$; 5: } 6: if ( deep && window.jQuery === jQuery ) { 7: window.jQuery = _jQuery; 8: } 10: return jQuery; 11: }, 12: //此處省略若干函數 13: });

或者

1: jQuery.fn.extend({ 2: data: function( key, value ) { 3: //此處省略 4: }, 5: removeData: function( key ) { 6: return this.each(function() { 7: jQuery.removeData( this, key ); 8: }); 9: } 10: }); 這是對jQuery的擴展，先解釋下jQuery.extend({...}) 和 jQuery.fn.extend({...})他們兩個的功能和不同，2個函數第一個是擴展jQuery的靜態方法，而第二個是用戶自己擴展對象的方法。

1、 靜態方法：比如$.Ajax(...);

2、 對象方法：比如$("#id").data("xxx");

什么是靜態方法和對象方法咧？

靜態方法調用就是不用生成對象，而是類級函數，$就好像命名空間一樣。比如：

1: var ns = {}; 2: ns.Ajax = function(){...};

對象方法就是說定義在原型中，需要new一個對象才能調用。

也就是說用jQuery.extend({})方法定義的函數可以直接用jquery對象調用，用jQuery.fn.extend({...})定義的函數需要先用jquery new出新對象才能調用。

二、看下源碼中怎么定義jQuery.extend({...})和jQuery.fn.extend({...})的：

1: jQuery.extend = jQuery.fn.extend = function() { 2: var src, copyIsArray, copy, name, options, clone, 3: target = arguments[0] || {}, 4: i = 1, 5: length = arguments.length, 6: deep = false; 7: // Handle a deep copy situation 8: if ( typeof target === "boolean" ) { 9: deep = target; 10: target = arguments[1] || {}; 11: // skip the boolean and the target 12: i = 2; 13: } 14: // Handle case when target is a string or something (possible in deep copy) 15: if ( typeof target !== "object" && !jQuery.isFunction(target) ) { 16: target = {}; 17: } 18: // extend jQuery itself if only one argument is passed 19: if ( length === i ) { 20: target = this; 21: --i; 22: } 23: for ( ; i < length; i++ ) { 24: // Only deal with non-null/undefined values 25: if ( (options = arguments[ i ]) != null ) { 26: // Extend the base object 27: for ( name in options ) { 28: src = target[ name ]; 29: copy = options[ name ]; 30: // Prevent never-ending loop 31: if ( target === copy ) { 32: continue; 33: } 34: // Recurse if we're merging plain objects or arrays 35: if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { 36: if ( copyIsArray ) { 37: copyIsArray = false; 38: clone = src && jQuery.isArray(src) ? src : []; 39: } else { 40: clone = src && jQuery.isPlainObject(src) ? src : {}; 41: } 42: // Never move original objects, clone them 43: target[ name ] = jQuery.extend( deep, clone, copy ); 44: // Don't bring in undefined values 45: } else if ( copy !== undefined ) { 46: target[ name ] = copy; 47: } 48: } 49: } 50: } 51: // Return the modified object 52: return target; 53: };

1、這段函數大意是實現這樣的功能效果:

1: extend(dest,src1,src2,src3...);

將src1,src2,src3...合并到dest中，返回值為合并后的dest，結果是修改了dest的結構的；如果不想修改dest的結構，可以如下使用：

1: var newDest=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。

這樣就可以將src1,src2,src3...進行合并，然后將合并結果返回給newDest了。如下例：

1: var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的結果

1: result={name:"Jerry",age:21,sex:"Boy"}

也就是說后面的參數如果和前面的參數存在相同的名稱，那么后面的會覆蓋前面的參數值。

2、如果只有一個參數，即省略了dest參數，表示將src合并到調用extend方法的對象中去，例如：

1: $.extend({ 2: hello:function(){alert('hello');} 3: });

即將hello方法合并到jQuery對象中去。

3、extend的重載原型

1: extend(boolean,dest,src1,src2,src3...)

第一個參數boolean代表是否進行深度拷貝，其余參數和前面介紹的一致，什么叫深層拷貝，我們看一個例子：

1: var result=$.extend(true, {}, 2: { name: "John", location: {city:"Boston",county:"USA"} }, 3: { last: "Resig", location: {state:"MA",county:"China"} } );

我們可以看出src1中嵌套子對象location:{city:"Boston"},src2中也嵌套子對象location:{state:"MA"},第一個深度拷貝參數為true，那么合并后的結果就是：

1: result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

也就是說它會將src中的嵌套子對象也進行合并，而如果第一個參數boolean為false，我們看看合并的結果是什么，如下：

1: var result=$.extend(false, {}, 2: { name: "John", location:{city:"Boston",county:"USA"} }, 3: { last: "Resig", location: {state:"MA",county:"China"} } 4: );

那么合并后的結果就是:

1: result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

4、通過extend就可以很方便的對jQuery對象進行擴展了。但是我們看代碼jQuery.extend = jQuery.fn.extend = function(){...}; 這個是連等，也就是2個指向同一個函數，怎么會實現不同的功能呢？這就是this 的功能了。

jQuery.extend 調用的時候，this是指向jQuery對象的(jQuery是函數，也是對象！)，所以這里擴展在jQuery上。 而jQuery.fn.extend 調用的時候，this指向fn對象，而上圖中科院看到，jQuery.fn 和jQuery.prototype指向同一對象，擴展fn就是擴展jQuery.prototype原型對象。這里增加的是原型方法，也就是對象方法了。所以jQuery的api中提供了以上2中擴展函數。

轉載于:https://www.cnblogs.com/fredshare/archive/2013/04/27/3047015.html

總結

以上是生活随笔為你收集整理的jQuery源码学习第二天--jQuery的extend扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。