jQuery extend()和jQuery.fn.extend()的區(qū)別

1民轴、認識jQueryextend()和jQuery.fn.extend()

jQuery的API手冊中雾家,extend方法掛載在jQuery和jQuery.fn兩個不同對象上方法,但在jQuery內(nèi)部代碼實現(xiàn)的是相同的挎扰,只是功能卻不太一樣;

且看官方給出解釋:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個或者更多的對象合并到第一個當中);

jQuery.fn.extend():Merge the contents of an object onto the?jQuery?prototype to provide new?jQuery?instance methods.(把對象掛載到j(luò)Query的prototype屬性家凯,來擴展一個新的jQuery實例方法)


2、理解jQuery.extend()

我們先把jQuery看成了一個類如失,這樣好理解一些绊诲。jQuery.extend(),是擴展的jQuery這個類褪贵。

假設(shè)我們把jQuery這個類看成是人類掂之,能吃飯能喝水能跑能跳,現(xiàn)在我們用jQuery.extend這個方法給這個類拓展一個能說話speak()的技能脆丁。這樣的話世舰,不論是男人,女人偎快,xx人.....等能繼承這個技能(方法)了冯乘。

可以如下圖這樣寫著:

JQuery.extend({

speak:function(){

alert("how are you!");

}

});

調(diào)用方法如下:

jQuery.extend()與jQuery.fn.extend()區(qū)別

(function($){

$.extend({

speak:function(){

alert("how are you!");

}

});

})(jQuery);

$(document).ready(function(){

$.speak();

})

這說明$.speak)變成了jQuery這個類本身的方法(object),他現(xiàn)在能"說話"了。

但是吧晒夹,這個能力啊裆馒,只有代表全人類的 jQuery 這個類本身,才能用啊丐怯。你個人想用喷好,你張三李四王五麻六,你個小草民能代表全人類嘛读跷?

所以啊梗搅,這個擴展也就是所謂的靜態(tài)方法,只跟這個 類 本身有關(guān)。跟你具體的實例化對象是沒關(guān)系的。


3无切、理解jQuery.fn.extend()

從字面理解嘛荡短,這個拓展的是jQuery.fn的方法。jQuery.fn是啥玩意呢哆键?

jQuery.fn = jQuery.prototype = {

init:funtion(selector,context){

//.....

}

}

所以jQuery.fn.extend拓展的是jQuery對象(原型的)的方法熬蛲小!

對象是啥籍嘹?就是類的實例化嘛闪盔,例如$("#abc") ,$(div)

那就是說辱士,jQuery.fn.extend拓展的方法泪掀,你得用在jQuery對象上面才行八痰狻异赫!他得是張三李四王五痳六這些實例化的對象才能用啊。

說白了就是得這么用(假設(shè)xyz()是拓展的方法):

$('selector').xyz();

調(diào)用方法如下:

jQuery.extend()與jQuery.fn.extend()區(qū)別

(function($){

$.fn.extend({

speak:function(){

alert("how are you!");

}

});

})(jQuery);

$(document).ready(function(){

$("div").speak();

})


4头岔、兩者區(qū)別總結(jié):

4.1祝辣、兩者調(diào)用方式不同:

jQuery.extend(),一般由傳入的全局函數(shù)來調(diào)用,主要是用來拓展個全局函數(shù)切油,如$.init(),$.ajax();

jQuery.fn.extend(),一般由具體的實例對象來調(diào)用名惩,可以用來拓展個選擇器澎胡,例如$.fn.each();

4.2、兩者的主要功能作用不同:

jQuery.extend(object);?為擴展jQuery類本身娩鹉,為自身添加新的方法攻谁。

jQuery.fn.extend(object);給jQuery對象添加方法

4.3、大部分插件都是用jQuery.fn.extend()


5弯予、JQuery的extend擴展方法:

5.1戚宦、Jquery的擴展方法原型是:

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

它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并后,是修改了dest的結(jié)構(gòu)的锈嫩。

如果想要得到合并的結(jié)果卻又不想修改dest的結(jié)構(gòu)受楼,可以如下使用:

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

這樣就可以將src1,src2,src3...進行合并呼寸,然后將合并結(jié)果返回給newSrc了艳汽。如下例:

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

那么合并后的結(jié)果:? result={name:"Jerry",age:21,sex:"Boy"}

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

5.2河狐、省略dest參數(shù)

上述的extend方法原型中的dest參數(shù)是可以省略的,如果省略了,則該方法就只能有一個src參數(shù)馋艺,而且是將該src合并到調(diào)用extend方法的對象中去栅干,如:

5.2.1、$.extend(src)

該方法就是將src合并到j(luò)query的全局對象中去捐祠,如:

$.extend({

hello:function(){alert('hello');}

});

就是將hello方法合并到j(luò)query的全局對象中碱鳞。

5.2.2、$.fn.extend(src)

該方法將src合并到j(luò)query的實例對象中去雏赦,如:

$.fn.extend({

hello:function(){alert('hello');}

});

就是將hello方法合并到j(luò)query的實例對象中劫笙。

下面例舉幾個常用的擴展實例:

$.extend({net:{}});

這是在jquery全局對象中擴展一個net命名空間。

$.extend($.net,{

hello:function(){alert('hello');}

})

這是將hello方法擴展到之前擴展的Jquery的net命名空間中去星岗。

5.2.3填大、Jquery的extend方法還有一個重載原型:

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

第一個參數(shù)boolean代表是否進行深度拷貝,其余參數(shù)和前面介紹的一致俏橘,什么叫深層拷貝允华,我們看一個例子:

var result=$.extend( true, {},

{ name: "John", location: {city: "Boston",county:"USA"} },

{ last: "Resig", location: {state: "MA",county:"China"} }

);

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

var result={

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

}

也就是說它會將src中的嵌套子對象也進行合并寥掐,而如果第一個參數(shù)boolean為false靴寂,我們看看合并的結(jié)果是什么,如下

var?result=$.extend(?false, {},

{ name: "John", location:{city: "Boston",county:"USA"} },? ? ? ? { last: "Resig", location: {state: "MA",county:"China"}

});

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

var result={

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

}

以上就是$.extend()在項目中經(jīng)常會使用到的一些細節(jié)召耘。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末百炬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子污它,更是在濱河造成了極大的恐慌剖踊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件衫贬,死亡現(xiàn)場離奇詭異德澈,居然都是意外死亡,警方通過查閱死者的電腦和手機固惯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門梆造,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人葬毫,你說我怎么就攤上這事镇辉。” “怎么了贴捡?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵摊聋,是天一觀的道長。 經(jīng)常有香客問我栈暇,道長麻裁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮煎源,結(jié)果婚禮上色迂,老公的妹妹穿的比我還像新娘。我一直安慰自己手销,他們只是感情好歇僧,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锋拖,像睡著了一般诈悍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兽埃,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天侥钳,我揣著相機與錄音,去河邊找鬼柄错。 笑死舷夺,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的售貌。 我是一名探鬼主播给猾,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼颂跨!你這毒婦竟也來了敢伸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤恒削,失蹤者是張志新(化名)和其女友劉穎详拙,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔓同,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年蹲诀,在試婚紗的時候發(fā)現(xiàn)自己被綠了斑粱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡脯爪,死狀恐怖则北,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情痕慢,我是刑警寧澤尚揣,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站掖举,受9級特大地震影響快骗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一方篮、第九天 我趴在偏房一處隱蔽的房頂上張望名秀。 院中可真熱鬧,春花似錦藕溅、人聲如沸匕得。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽汁掠。三九已至,卻和暖如春集币,著一層夾襖步出監(jiān)牢的瞬間考阱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工惠猿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人偶妖。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像趾访,于是被迫代替她去往敵國和親态秧。 傳聞我的和親對象是個殘疾皇子扼鞋,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容