Jquery的擴展方法extend是我們在寫插件的過程中常用的方法,該方法有一些重載原型,在此,我們一起去了解了解。
Jquery的擴展方法原型是:
extend(dest,src1,src2,src3...);
它的含義是將src1,src2,src3...合並到dest中,返回值為合並後的dest,由此可以看出該方法合並後,是修改了dest的結構的。如果想要得到合並的結果卻又不想修改dest的結構,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。
這樣就可以將src1,src2,src3...進行合並,然後將合並結果返回給newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那麼合並後的結果
result={name:"Jerry",age:21,sex:"Boy"}
也就是說後面的參數如果和前面的參數存在相同的名稱,那麼後面的會覆蓋前面的參數值。
也許你對該函數已經有一定的了解。我們再看一個jquery官方的例子(http://api.jquery.com/jQuery.extend/)
代碼如下:
. 代碼如下:
<!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); // 在插件開發中經常會用到
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>
輸出結果為:
defaults -- {"validate":false,"limit":5,"name":"foo"} //這裡是原樣輸出defaults
options -- {"validate":true,"name":"bar"} //這裡是原樣輸出options
settings -- {"validate":true,"limit":5,"name":"bar"} //合並defaults和options , 後面的參數如果和前面的參數存在相同的名稱,那麼後面的會覆蓋前面的參數值。