區(qū)別和詳解:jQuery extend()和jQuery.fn.extend()

1、認(rèn)識(shí)jQuery?extend()和jQuery.fn.extend()

jQuery的API手冊(cè)中琳彩,extend方法掛載在jQuery和jQuery.fn兩個(gè)不同對(duì)象上方法活鹰,但在jQuery內(nèi)部代碼實(shí)現(xiàn)的是相同的无畔,只是功能卻不太一樣辽装;

且看官方給出解釋:

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

jQuery.fn.extend():Merge the contents of an object onto the?jQuery?prototype to provide new?jQuery?instance methods.(把對(duì)象掛載到j(luò)Query的prototype屬性代兵,來(lái)擴(kuò)展一個(gè)新的jQuery實(shí)例方法)

2、理解jQuery.extend()?

我們先把jQuery看成了一個(gè)類爷狈,這樣好理解一些植影。jQuery.extend(),是擴(kuò)展的jQuery這個(gè)類涎永。

假設(shè)我們把jQuery這個(gè)類看成是人類思币,能吃飯能喝水能跑能跳,現(xiàn)在我們用jQuery.extend這個(gè)方法給這個(gè)類拓展一個(gè)能說話speak()的技能羡微。這樣的話谷饿,不論是男人,女人妈倔,xx人.....等能繼承這個(gè)技能(方法)了博投。

可以如下圖這樣寫著:

JQuery.extend({

? ? speak:function(){

? ? ? ? alert("how are you!");

? ? }

});

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

<!DOCTYPE html>

<html>

<head>

? ? <title>jQuery.extend()與jQuery.fn.extend()區(qū)別</title>

? ? <meta charset="utf-8">

? ? <script type="text/javascript" src="jquery-1.7.1.js"></script>

? ? <script type="text/javascript">

? ? ? ? (function($){

? ? ? ? ? ? ? $.extend({

? ? ? ? ? ? ? ? ? speak:function(){

? ? ? ? ? ? ? ? ? ? ? alert("how are you!");

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? })(jQuery);

? ? </script>

? ? <script type="text/javascript">

? ? ? ? $(document).ready(function(){

? ? ? ? ? ? $.speak();

? ? ? ? })

? ? </script>

</head>

<body>

</body>

</html>

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

但是吧启涯,這個(gè)能力啊贬堵,只有代表全人類的 jQuery 這個(gè)類本身,才能用啊结洼。你個(gè)人想用黎做,你張三李四王五麻六,你個(gè)小草民能代表全人類嘛松忍?

所以啊蒸殿,這個(gè)擴(kuò)展也就是所謂的靜態(tài)方法,只跟這個(gè) 類 本身有關(guān)。跟你具體的實(shí)例化對(duì)象是沒關(guān)系的鸣峭。

3宏所、理解jQuery.fn.extend()

從字面理解嘛,這個(gè)拓展的是jQuery.fn的方法摊溶。jQuery.fn是啥玩意呢爬骤?

jQuery.fn = jQuery.prototype = {

? ? ? init:funtion(selector,context){

? ? ? ? ? ? //.....

? ? }

}

?所以jQuery.fn.extend拓展的是jQuery對(duì)象(原型的)的方法啊莫换!

對(duì)象是啥霞玄?就是類的實(shí)例化嘛,例如$("#abc") 拉岁,$(div)

那就是說坷剧,jQuery.fn.extend拓展的方法,你得用在jQuery對(duì)象上面才行昂芭惫企!他得是張三李四王五痳六這些實(shí)例化的對(duì)象才能用啊。

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

$('selector').xyz();

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

<!DOCTYPE html>

<html>

<head>

? ? <title>jQuery.extend()與jQuery.fn.extend()區(qū)別</title>

? ? <meta charset="utf-8">

? ? <script type="text/javascript" src="jquery-1.7.1.js"></script>

? ? <script type="text/javascript">

? ? ? ? (function($){

? ? ? ? ? ? ? $.fn.extend({

? ? ? ? ? ? ? ? ? speak:function(){

? ? ? ? ? ? ? ? ? ? ? alert("how are you!");

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? })(jQuery);

? ? </script>

? ? <script type="text/javascript">

? ? ? ? $(document).ready(function(){

? ? ? ? ? ? $("div").speak();

? ? ? ? })

? ? </script>

</head>

<body>

</body>

</html>

4陵叽、兩者區(qū)別總結(jié):

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

? ? ???jQuery.extend(),一般由傳入的全局函數(shù)來(lái)調(diào)用,主要是用來(lái)拓展個(gè)全局函數(shù)咨跌,如$.init()沪么,$.ajax();

? ? ? ?jQuery.fn.extend(),一般由具體的實(shí)例對(duì)象來(lái)調(diào)用,可以用來(lái)拓展個(gè)選擇器锌半,例如$.fn.each();

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

jQuery.extend(object);?為擴(kuò)展jQuery類本身,為自身添加新的方法刊殉。

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

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

?5、JQuery的extend擴(kuò)展方法:

? ???5.1记焊、Jquery的擴(kuò)展方法原型是:

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...進(jìn)行合并瓤湘,然后將合并結(jié)果返回給newSrc了。如下例:

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

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

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

5.2、省略dest參數(shù)

上述的extend方法原型中的dest參數(shù)是可以省略的翰意,如果省略了木人,則該方法就只能有一個(gè)src參數(shù),而且是將該src合并到調(diào)用extend方法的對(duì)象中去冀偶,如:

5.2.1醒第、$.extend(src)

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

? $.extend({

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

? });

? ? ? ?就是將hello方法合并到j(luò)query的全局對(duì)象中进鸠。

5.2.2稠曼、$.fn.extend(src)

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

? $.fn.extend({

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

? });

? ? ? ?就是將hello方法合并到j(luò)query的實(shí)例對(duì)象中客年。

?  下面例舉幾個(gè)常用的擴(kuò)展實(shí)例:

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

? ? ? ? ?這是在jquery全局對(duì)象中擴(kuò)展一個(gè)net命名空間蒲列。

$.extend($.net,{

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

})

? ? ? ? 這是將hello方法擴(kuò)展到之前擴(kuò)展的Jquery的net命名空間中去。

?  5.2.3搀罢、Jquery的extend方法還有一個(gè)重載原型:

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

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

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

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

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

);

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

var result={

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

}

? ? ? ?也就是說它會(huì)將src中的嵌套子對(duì)象也進(jìn)行合并,而如果第一個(gè)參數(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()在項(xiàng)目中經(jīng)常會(huì)使用到的一些細(xì)節(jié)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末枫弟,一起剝皮案震驚了整個(gè)濱河市邢享,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌淡诗,老刑警劉巖骇塘,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異韩容,居然都是意外死亡款违,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門群凶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)插爹,“玉大人,你說我怎么就攤上這事≡玻” “怎么了力穗?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)气嫁。 經(jīng)常有香客問我睛廊,道長(zhǎng),這世上最難降的妖魔是什么杉编? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮咆霜,結(jié)果婚禮上邓馒,老公的妹妹穿的比我還像新娘。我一直安慰自己蛾坯,他們只是感情好光酣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著脉课,像睡著了一般救军。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上倘零,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天唱遭,我揣著相機(jī)與錄音,去河邊找鬼呈驶。 笑死拷泽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的袖瞻。 我是一名探鬼主播司致,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼聋迎!你這毒婦竟也來(lái)了脂矫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤霉晕,失蹤者是張志新(化名)和其女友劉穎庭再,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牺堰,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡佩微,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了萌焰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哺眯。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖扒俯,靈堂內(nèi)的尸體忽然破棺而出奶卓,到底是詐尸還是另有隱情一疯,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布夺姑,位于F島的核電站墩邀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏盏浙。R本人自食惡果不足惜眉睹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望废膘。 院中可真熱鬧竹海,春花似錦、人聲如沸丐黄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)灌闺。三九已至艰争,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桂对,已是汗流浹背甩卓。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蕉斜,地道東北人猛频。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蛛勉,于是被迫代替她去往敵國(guó)和親鹿寻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

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