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é)。