Jquery中的extend擴(kuò)展

一、看下常見的extend擴(kuò)展：

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: //此處省略若干函數(shù) 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: }); 這是對(duì)jQuery的擴(kuò)展，先解釋下jQuery.extend({...}) 和 jQuery.fn.extend({...})他們兩個(gè)的功能和不同，2個(gè)函數(shù)第一個(gè)是擴(kuò)展jQuery的靜態(tài)方法，而第二個(gè)是用戶自己擴(kuò)展對(duì)象的方法。

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

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

什么是靜態(tài)方法和對(duì)象方法咧？

靜態(tài)方法調(diào)用就是不用生成對(duì)象，而是類級(jí)函數(shù)，$就好像命名空間一樣。比如：

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

對(duì)象方法就是說定義在原型中，需要new一個(gè)對(duì)象才能調(diào)用。

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

二、看下源碼中怎么定義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、這段函數(shù)大意是實(shí)現(xiàn)這樣的功能效果:

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

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

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

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

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

那么合并后的結(jié)果

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

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

2、如果只有一個(gè)參數(shù)，即省略了dest參數(shù)，表示將src合并到調(diào)用extend方法的對(duì)象中去，例如：

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

即將hello方法合并到j(luò)Query對(duì)象中去。

3、extend的重載原型

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

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

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

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

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

也就是說它會(huì)將src中的嵌套子對(duì)象也進(jìn)行合并，而如果第一個(gè)參數(shù)boolean為false，我們看看合并的結(jié)果是什么，如下：

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

那么合并后的結(jié)果就是:

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/fredshare/archive/2013/04/27/3047015.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。