jQuery.extend 函數(shù)的詳細用法

更新時間：2012年06月27日 16:00:10 作者：

jQuery.extend 函數(shù)的詳細用法，學(xué)習(xí)jquery的朋友可以參考下

Jquery的擴展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起去了解了解。

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ù)值。

也許你對該函數(shù)已經(jīng)有一定的了解。我們再看一個jquery官方的例子(http://api.jquery.com/jQuery.extend/)
代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<divid="log"></div> 
<script> 
var defaults ={validate:false,limit:5,name:"foo"}; 
var options ={validate:true,name:"bar"}; 
/* merge defaults and options, without modifying defaults */ 
var settings =$.extend({},defaults,options); // 在插件開發(fā)中經(jīng)常會用到 
varprintObj =typeofJSON !="undefined"?JSON.stringify :function(obj){ 
vararr =[]; 
$.each(obj,function(key,val){ 
varnext =key +": "; 
next +=$.isPlainObject(val)?printObj(val):val; 
arr.push(next ); 
}); 
return"{ "+ arr.join(", ")+" }"; 
}; 

$("#log").append("<div><b>defaults -- </b>"+printObj(defaults)+"</div>"); 
$("#log").append("<div><b>options -- </b>"+printObj(options)+"</div>"); 
$("#log").append("<div><b>settings -- </b>"+printObj(settings)+"</div>"); 
</script> 
</body> 
</html> 

輸出結(jié)果為：
defaults -- {"validate":false,"limit":5,"name":"foo"} //這里是原樣輸出defaults
options -- {"validate":true,"name":"bar"} //這里是原樣輸出options
settings -- {"validate":true,"limit":5,"name":"bar"} //合并defaults和options ，后面的參數(shù)如果和前面的參數(shù)存在相同的名稱，那么后面的會覆蓋前面的參數(shù)值。

您可能感興趣的文章: