最近在學(xué)寫(xiě)jQuery插件，記錄一下寫(xiě)插件的方式。
jQuery為用戶(hù)提供了jQuery.extend()和jQuery.fn.extend()的方法。
jQuery.extend()方法將兩個(gè)或多個(gè)對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象中。一般jQuery.extend()方法用來(lái)合并參數(shù)。
用法：<code>jQuery.extend(target [, object1 ] [, objectN ]);</code>
或<code>jQuery.extend([deep],target [, object1 ] [, objectN ]);</code>
如果deep為true，則遞歸合并，會(huì)進(jìn)行深拷貝.
jQuery.extend(target [, object1 ] [, objectN ])示例：
<pre>
var person1 = {
name:'who',
age:18,
parents:{father: 'someone', mom: 'anybody'}
};
var person2= {
parents:{mom:'someone'},
sex:'boy'
};
$.extend(person1,person2);//person1={name:'who',age:18,parents:{mom:'someone'},sex:'boy'};
</pre>
jQuery.extend([deep],target [, object1 ] [, objectN ])示例：
<pre>
var person1 = {
name:'who',
age:18,
parents:{father: 'someone', mom: 'anybody'}
};
var person2= {
parents:{mom:'someone'},
sex:'boy'
};
$.extend(true,person1,person2);//person1={name:'who',age:18,parents:{father:'someone',mom:'someone'},sex:'boy'};
</pre>
一般在寫(xiě)插件時(shí)，不會(huì)覆蓋掉默認(rèn)參數(shù)defaults，所以在擴(kuò)展參數(shù)時(shí)一個(gè)好的寫(xiě)法是$.extend({},defaults,options)，用一個(gè)空對(duì)象{}作為第一個(gè)參數(shù)，這樣能將所有值合并到{}中，并且保護(hù)好默認(rèn)參數(shù)。
jQuery.fn.extend()方法將對(duì)象的內(nèi)容合并到j(luò)Query原型上以提供新的jQuery實(shí)例方法。該方法擴(kuò)展jQuery prototype($.fn)對(duì)象以提供可以鏈接到該jQuery()函數(shù)的新方法。
插件一般有兩種書(shū)寫(xiě)形式：
<pre>
//第一種
$.fn.functionName = function([options]){};//這個(gè)一次只能聲明一個(gè)函數(shù)
//第二種
$.fn.extend({func1:function{},funcN:function{}});//這個(gè)可以聲明多個(gè)函數(shù)
</pre>
可以這樣寫(xiě)插件：
<pre>
$.fn.myPlugin = function(options){
var defaults={attr1:value1,attrN:valueN};//默認(rèn)參數(shù)
var settings=$.extend({},defaults,options);//擴(kuò)展參數(shù)
return this.each(function(){
//some operations use settings you want
});//加return返回jQuery對(duì)象本身，這樣是為了能支持jQuery的鏈?zhǔn)秸{(diào)用
}
//調(diào)用方式
$(obj).myPlugin({prop1:value1,propN:valueN});
</pre>
或者這樣：
<pre>
$.fn.extend({
func1:function(options){
//something like $.fn.functionName
},
func2:function(options){
//something like $.fn.functionName
}
});
//調(diào)用方式
$(obj).func1(options);
$(obj).func2(options);
</pre>
一種較好的寫(xiě)法是將代碼寫(xiě)在一個(gè)自調(diào)用匿名函數(shù)里面，例如：
<pre>
;(function($,window,document,undefined){
//our code
})(jQuery,window,document);
</pre>
說(shuō)明幾點(diǎn)：

1. 在最前面加分號(hào);是為了防止別人在引用該插件時(shí)，別人在之前編寫(xiě)的代碼結(jié)尾沒(méi)有加;會(huì)導(dǎo)致該匿名函數(shù)與別人的代碼相連，代碼無(wú)法正常解析而報(bào)錯(cuò)。
2. $實(shí)參接受jQuery對(duì)象；window, document實(shí)參分別接受window, document對(duì)象，window, document對(duì)象都是全局環(huán)境下的，而將window等系統(tǒng)變量以參數(shù)形式傳遞到插件內(nèi)部時(shí)，這些變量在插件內(nèi)部是一個(gè)局部的引用，這樣可以減少作用域鏈的查詢(xún)時(shí)間，提高訪(fǎng)問(wèn)速度。
3. undefined形參可能是為了兼容性，實(shí)際上并沒(méi)有傳遞這個(gè)參數(shù)。