jquery插件寫法及用法（jQuery插件開(kāi)發(fā)全解析） - 全文

一、?jQuery插件的寫法以及使用

如今做web開(kāi)發(fā)，jquery 幾乎是必不可少的，同時(shí)jquery插件也是不斷的被大家所熟知，以及運(yùn)用。最近在搞這個(gè)jquery插件，發(fā)現(xiàn)它的牛逼之處，所以講一講jQuery插件的寫法以及使用。 這里大家也許會(huì)抱怨，這根本看不懂，別急，看下去會(huì)讓你明白
首先可以告訴大家，這個(gè)插件實(shí)現(xiàn)的功能是對(duì)一個(gè)標(biāo)簽的字體大小以及顏色設(shè)置。
下圖是顯示在網(wǎng)頁(yè)上的代碼： 如上的代碼得到的效果如下圖： 如此，大家不要疑惑，就將color()這個(gè)函數(shù)當(dāng)做系統(tǒng)給你提供的函數(shù)即可。
在這里首先要和大家講解自執(zhí)行的匿名函數(shù)/閉包的運(yùn)用
1、?解釋什么事閉包，下面這種形式的就是自執(zhí)行的匿名函數(shù)/閉包 2.坑爹的報(bào)錯(cuò)代碼 3.解釋表達(dá)式和函數(shù)聲明
表達(dá)式： 函數(shù)聲明： 如此大家可以大概猜想到對(duì)象的使用方法，首先是要?jiǎng)?chuàng)建一個(gè)對(duì)象:new C()
其中C就是相當(dāng)于(function($){//Code})，()便是后面的()了。
以上是一種理解方式， 實(shí)際情況如下：
js在"預(yù)編譯"階段, 會(huì)解釋函數(shù)聲明, 但卻會(huì)忽略表達(dá)式。
當(dāng)javascript執(zhí)行到function() {//Code}()d時(shí)由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過(guò),javascript會(huì)跳過(guò)function(){//code}試圖去執(zhí)行()故會(huì)報(bào)錯(cuò);
當(dāng)javascript執(zhí)行到(function {// Code})()時(shí)由于(function {// code})是表達(dá)式, javascript會(huì)去對(duì)它求解得到返回值, 由于返回值是一 個(gè)函數(shù), 故而遇到()時(shí), 便會(huì)被執(zhí)行。
另外,函數(shù)轉(zhuǎn)換為表達(dá)式的方法并不一定要靠分組操作符()我們還可以用!操作符等操作符，只要是表達(dá)一個(gè)表達(dá)式的即可。
如此大家大概知道插件得書(shū)寫為什么要加個(gè)().
然后就是寫插件得步驟了：基本格式如下
?
接下來(lái)有兩種插件書(shū)寫的形式
一種是一個(gè)函數(shù)：$.fn.函數(shù)名 = function([options]){}
另外一種自然是可以多個(gè)函數(shù)：$.fn.extend({函數(shù)名:function(){}});
第一種真能一次搞一個(gè)函數(shù)，而第二個(gè)可以一次聲明多個(gè)函數(shù)

接下來(lái)講解$.extend()的用法

有兩種
一種$.extend(defaults, options);
其中defaults為默認(rèn)設(shè)置，options為傳入的參數(shù)
這個(gè)函數(shù)的作用是用后面的參數(shù)與第一個(gè)參數(shù)進(jìn)行合并然后返回它的值
代碼實(shí)現(xiàn)如下： 用chrome顯示的效果如下： 看到如上的結(jié)果，大家可能已經(jīng)知道了，defaults被改變了，竟然變成了options的值，同時(shí)大家可以注意到$.extend(defaults, options)返回值是被覆蓋的值
這就造成了一般的插件不會(huì)用$.extend(defaults, options)原因就是他改變了默認(rèn)的值

接下來(lái)就是另外一種方法
$.extend({},defaults, options);

效果如下圖： ? 大家可以注意到用這個(gè)函數(shù)的話不會(huì)導(dǎo)致defaults被替代，所以一般的插件書(shū)寫是用$.extend({}, defaults, options);
至于插件得調(diào)用，很簡(jiǎn)單

$("").函數(shù)名

即可。
接下是講解一下書(shū)寫插件時(shí)的一些細(xì)節(jié)部分
看如下代碼

?

這里的return有什么作用

對(duì)于一般的插件代碼，如果沒(méi)有加一個(gè)return 回到一個(gè)問(wèn)題：那就是只能用一次
$(".afters").color().css({})這就會(huì)報(bào)錯(cuò)，因?yàn)闆](méi)有返回本身這個(gè)對(duì)象，所以使用完color()是沒(méi)有返回值得話，那么css調(diào)用時(shí)是undefined，所以會(huì)報(bào)錯(cuò)，因此當(dāng)我們寫完插件代碼時(shí)，最后要返回jQuery對(duì)象本身，否則就只能調(diào)用一次就不能調(diào)用了。
?

二、jQuery插件開(kāi)發(fā)全解析

jQuery插件的開(kāi)發(fā)包括兩種：

一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開(kāi)發(fā)做詳細(xì)的說(shuō)明。

1、類級(jí)別的插件開(kāi)發(fā)

類級(jí)別的插件開(kāi)發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開(kāi)發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
1.1?添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：
Java代碼
jQuery.foo = function() { ??
alert('This is a test. This is only a test.'); ?
}; ???
?
1.2 增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：
Java代碼 ?收藏代碼
jQuery.foo = function() { ??
alert('This is a test. This is only a test.'); ?
}; ?
jQuery.bar = function(param) { ??
alert('This function takes a parameter, which is "' + param + '".'); ?
}; ??
調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); ?
1.3 使用jQuery.extend(object);
Java代碼 ?收藏代碼
jQuery.extend({ ?????
foo: function() { ?????
alert('This is a test. This is only a test.'); ?????
}, ?????
bar: function(param) { ?????
alert('This function takes a parameter, which is "' + param +'".'); ?????
} ????
}); ?
?
1.4 使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。
Java代碼 ?收藏代碼
jQuery.myPlugin = { ?????????
foo:function() { ?????????
alert('This is a test. This is only a test.'); ?????????
}, ?????????
bar:function(param) { ?????????
alert('This function takes a parameter, which is "' + param + '".'); ???
} ????????
}; ?
采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法： ?
$.myPlugin.foo(); ????????
$.myPlugin.bar('baz'); ?
?
通過(guò)這個(gè)技巧（使用獨(dú)立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。

2、對(duì)象級(jí)別的插件開(kāi)發(fā)

對(duì)象級(jí)別的插件開(kāi)發(fā)需要如下的兩種形式：、
形式1： ?
Java代碼 ?
(function($){ ????
$.fn.extend({ ????
pluginName:function(opt,callback){ ????
??????????// Our plugin implementation code goes here. ??????
} ????
}) ????
})(jQuery); ????
形式2：
Java代碼 ?
(function($) { ??????
$.fn.pluginName = function() { ????
?????// Our plugin implementation code goes here. ????
}; ????
})(jQuery); ?????
???????上面定義了一個(gè)jQuery函數(shù),形參是$，函數(shù)定義完成之后,把jQuery這個(gè)實(shí)參傳遞進(jìn)去.立即調(diào)用執(zhí)行。這樣的好處是,我們?cè)趯慾Query插件時(shí),也可以使用$這個(gè)別名,而不會(huì)與prototype引起沖突.
2.1 在JQuery名稱空間下申明一個(gè)名字
這是一個(gè)單一插件的腳本。如果你的腳本中包含多個(gè)插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那么你需要聲明多個(gè)函數(shù)名字。但是，通常當(dāng)我們編寫一個(gè)插件時(shí)，力求僅使用一個(gè)名字來(lái)包含它的所有內(nèi)容。我們的示例插件命名為“highlight“ ???
?
Java代碼 ?
$.fn.hilight = function() { ???
??// Our plugin implementation code goes here. ???
}; ???
我們的插件通過(guò)這樣被調(diào)用： ?
$('#myDiv').hilight(); ????
?
但是如果我們需要分解我們的實(shí)現(xiàn)代碼為多個(gè)函數(shù)該怎么辦？有很多原因：設(shè)計(jì)上的需要；這樣做更容易或更易讀的實(shí)現(xiàn)；而且這樣更符合面向?qū)ο蟆?這真是一個(gè)麻煩事，把功能實(shí)現(xiàn)分解成多個(gè)函數(shù)而不增加多余的命名空間。出于認(rèn)識(shí)到和利用函數(shù)是javascript中最基本的類對(duì)象，我們可以這樣做。就像其他對(duì)象一樣，函數(shù)可以被指定為屬性。因此我們已經(jīng)聲明“hilight”為jQuery的屬性對(duì)象，任何其他的屬性或者函數(shù)我們需要暴露出來(lái)的，都可以在"hilight" 函數(shù)中被聲明屬性。稍后繼續(xù)。
2.2 接受options參數(shù)以控制插件的行為
讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ?。我們也許會(huì)讓選項(xiàng)像一個(gè)options對(duì)象傳遞給插件函數(shù)。例如： ??
Java代碼 ?
// plugin definition ???
$.fn.hilight = function(options) { ???
??var defaults = { ???
????foreground: 'red', ???
????background: 'yellow' ???
??}; ???
??// Extend our default options with those provided. ???
??var opts = $.extend(defaults, options); ???
??// Our plugin implementation code goes here. ???
}; ???
我們的插件可以這樣被調(diào)用： ?
$('#myDiv').hilight({ ???
??foreground: 'blue' ???
}); ????
?
2.3 暴露插件的默認(rèn)設(shè)置
我們應(yīng)該對(duì)上面代碼的一種改進(jìn)是暴露插件的默認(rèn)設(shè)置。這對(duì)于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來(lái)我們開(kāi)始利用函數(shù)對(duì)象。 ????
?
Java代碼?
// plugin definition ???
$.fn.hilight = function(options) { ???
??// Extend our default options with those provided. ???
??// Note that the first arg to extend is an empty object - ???
??// this is to keep from overriding our "defaults" object. ???
??var opts = $.extend({}, $.fn.hilight.defaults, options); ???
??// Our plugin implementation code goes here. ???
}; ???
// plugin defaults - added as a property on our plugin function ???
$.fn.hilight.defaults = { ???
??foreground: 'red', ???
??background: 'yellow' ???
}; ????
現(xiàn)在使用者可以包含像這樣的一行在他們的腳本里： ?
//這個(gè)只需要調(diào)用一次，且不一定要在ready塊中調(diào)用 ?
$.fn.hilight.defaults.foreground = 'blue'; ???
接下來(lái)我們可以像這樣使用插件的方法，結(jié)果它設(shè)置藍(lán)色的前景色： ?
$('#myDiv').hilight(); ??
?
如你所見(jiàn)，我們?cè)试S使用者寫一行代碼在插件的默認(rèn)前景色。而且使用者仍然在需要的時(shí)候可以有選擇的覆蓋這些新的默認(rèn)值：
// 覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個(gè)新的缺省設(shè)置調(diào)用插件
$('.hilightDiv').hilight();
// ...
// 通過(guò)傳遞配置參數(shù)給插件方法來(lái)覆蓋缺省設(shè)置
$('#green').hilight({
??foreground: 'green'
}); ?
2.4 適當(dāng)?shù)谋┞兑恍┖瘮?shù)
這段將會(huì)一步一步對(duì)前面那段代碼通過(guò)有意思的方法擴(kuò)展你的插件（同時(shí)讓其他人擴(kuò)展你的插件）。例如，我們插件的實(shí)現(xiàn)里面可以定義一個(gè)名叫"format"的函數(shù)來(lái)格式化高亮文本。我們的插件現(xiàn)在看起來(lái)像這樣，默認(rèn)的format方法的實(shí)現(xiàn)部分在hiligth函數(shù)下面。
Java代碼?
// plugin definition ???
$.fn.hilight = function(options) { ???
??// iterate and reformat each matched element ???
??return this.each(function() { ???
????var $this = $(this); ???
????// ... ???
????var markup = $this.html(); ???
????// call our format function ???
????markup = $.fn.hilight.format(markup); ???
????$this.html(markup); ???
??}); ???
}; ???
// define our format function ???
$.fn.hilight.format = function(txt) { ???
return '' + txt + ''; ???
}; ????
??????我們很容易的支持options對(duì)象中的其他的屬性通過(guò)允許一個(gè)回調(diào)函數(shù)來(lái)覆蓋默認(rèn)的設(shè)置。這是另外一個(gè)出色的方法來(lái)修改你的插件。這里展示的技巧是進(jìn)一步有效的暴露format函數(shù)進(jìn)而讓他能被重新定義。通過(guò)這技巧，是其他人能夠傳遞他們自己設(shè)置來(lái)覆蓋你的插件，換句話說(shuō)，這樣其他人也能夠?yàn)槟愕牟寮懖寮?br /> ??????考慮到這個(gè)篇文章中我們建立的無(wú)用的插件，你也許想知道究竟什么時(shí)候這些會(huì)有用。一個(gè)真實(shí)的例子是Cycle插件.這個(gè)Cycle插件是一個(gè)滑動(dòng)顯示插件，他能支持許多內(nèi)部變換作用到滾動(dòng)，滑動(dòng)，漸變消失等。但是實(shí)際上，沒(méi)有辦法定義也許會(huì)應(yīng)用到滑動(dòng)變化上每種類型的效果。那是這種擴(kuò)展性有用的地方。 Cycle插件對(duì)使用者暴露"transitions"對(duì)象，使他們添加自己變換定義。插件中定義就像這樣：
$.fn.cycle.transitions = {
// ...
};
這個(gè)技巧使其他人能定義和傳遞變換設(shè)置到Cycle插件。
2.5 保持私有函數(shù)的私有性
這種技巧暴露你插件一部分來(lái)被覆蓋是非常強(qiáng)大的。但是你需要仔細(xì)思考你實(shí)現(xiàn)中暴露的部分。一但被暴露，你需要在頭腦中保持任何對(duì)于參數(shù)或者語(yǔ)義的改動(dòng)也許會(huì)破壞向后的兼容性。一個(gè)通理是，如果你不能肯定是否暴露特定的函數(shù)，那么你也許不需要那樣做。
那么我們?cè)趺炊x更多的函數(shù)而不攪亂命名空間也不暴露實(shí)現(xiàn)呢？這就是閉包的功能。為了演示，我們將會(huì)添加另外一個(gè)“debug”函數(shù)到我們的插件中。這個(gè) debug函數(shù)將為輸出被選中的元素格式到firebug控制臺(tái)。為了創(chuàng)建一個(gè)閉包，我們將包裝整個(gè)插件定義在一個(gè)函數(shù)中。
Java代碼 ?收藏代碼
?(function($) { ???
??// plugin definition ???
??$.fn.hilight = function(options) { ???
????debug(this); ???
????// ... ???
??}; ???
??// private function for debugging ???
??function debug($obj) { ???
????if (window.console && window.console.log) ???
??????window.console.log('hilight selection count: ' + $obj.size()); ???
??}; ???
// ?... ???
})(jQuery); ???
?
我們的“debug”方法不能從外部閉包進(jìn)入,因此對(duì)于我們的實(shí)現(xiàn)是私有的。
2.6 支持Metadata插件
在你正在寫的插件的基礎(chǔ)上，添加對(duì)Metadata插件的支持能使他更強(qiáng)大。個(gè)人來(lái)說(shuō)，我喜歡這個(gè)Metadata插件，因?yàn)樗屇闶褂貌欢嗟?markup”覆蓋插件的選項(xiàng)（這非常有用當(dāng)創(chuàng)建例子時(shí)）。而且支持它非常簡(jiǎn)單。更新：注釋中有一點(diǎn)優(yōu)化建議。
Java代碼 ?
$.fn.hilight = function(options) { ???
??// ... ???
??// build main options before element iteration ???
??var opts = $.extend({}, $.fn.hilight.defaults, options); ???
??return this.each(function() { ???
????var $this = $(this); ???
????// build element specific options ???
????var o = $.meta ? $.extend({}, opts, $this.data()) : opts; ???
????//... ?????
?這些變動(dòng)行做了一些事情：它是測(cè)試Metadata插件是否被安裝如果它被安裝了，它能擴(kuò)展我們的options對(duì)象通過(guò)抽取元數(shù)據(jù)這行作為最后一個(gè)參數(shù)添加到JQuery.extend，那么它將會(huì)覆蓋任何其它選項(xiàng)設(shè)置。現(xiàn)在我們能從"markup”處驅(qū)動(dòng)行為,如果我們選擇了“markup”：
?調(diào)用的時(shí)候可以這樣寫： jQuery.foo(); 或 $.foo();
?
Java代碼 ?
???
???
???
???
現(xiàn)在我們能高亮哪些div僅使用一行腳本： ?
$('.hilight').hilight(); ????

2.7 整合
下面使我們的例子完成后的代碼：
????
Java代碼 ?
// 創(chuàng)建一個(gè)閉包 ???
(function($) { ???
??// 插件的定義 ???
??$.fn.hilight = function(options) { ???
????debug(this); ???
????// build main options before element iteration ???
????var opts = $.extend({}, $.fn.hilight.defaults, options); ???
????// iterate and reformat each matched element ???
????return this.each(function() { ???
??????$this = $(this); ???
??????// build element specific options ???
??????var o = $.meta ? $.extend({}, opts, $this.data()) : opts; ???
??????// update element styles ???
??????$this.css({ ???
????????backgroundColor: o.background, ???
????????color: o.foreground ???
??????}); ???
??????var markup = $this.html(); ???
??????// call our format function ???
??????markup = $.fn.hilight.format(markup); ???
??????$this.html(markup); ???
????}); ???
??}; ???
??// 私有函數(shù)：debugging ???
??function debug($obj) { ???
????if (window.console && window.console.log) ???
??????window.console.log('hilight selection count: ' + $obj.size()); ???
??}; ???
??// 定義暴露format函數(shù) ???
??$.fn.hilight.format = function(txt) { ???
????return '' + txt + ''; ???
??}; ???
??// 插件的defaults ???
??$.fn.hilight.defaults = { ???
????foreground: 'red', ???
????background: 'yellow' ???
??}; ???
// 閉包結(jié)束 ???
})(jQuery); ????
?
這段設(shè)計(jì)已經(jīng)讓我創(chuàng)建了強(qiáng)大符合規(guī)范的插件。我希望它能讓你也能做到。?

3、總結(jié)

jQuery為開(kāi)發(fā)插件提拱了兩個(gè)方法，分別是：
jQuery.fn.extend(object); ?給jQuery對(duì)象添加方法。
jQuery.extend(object); ?為擴(kuò)展jQuery類本身.為類添加新的方法。
3.1 jQuery.fn.extend(object);
fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = { ?
init: function( selector, context ) {//....　 ?
//...... ?
}; ??
原來(lái) jQuery.fn = jQuery.prototype.對(duì)prototype肯定不會(huì)陌生啦。雖然 javascript　沒(méi)有明確的類的概念，但是用類來(lái)理解它，會(huì)更方便。jQuery便是一個(gè)封裝得非常好的類，比如我們用 語(yǔ)句　$("#btn1") 會(huì)生成一個(gè) jQuery類的實(shí)例。
jQuery.fn.extend(object); 對(duì)jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。
比如我們要開(kāi)發(fā)一個(gè)插件，做一個(gè)特殊的編輯框，當(dāng)它被點(diǎn)擊時(shí)，便alert 當(dāng)前編輯框里的內(nèi)容?？梢赃@么做：
$.fn.extend({ ???????
?????alertWhileClick:function(){ ??????
?????????$(this).click(function(){ ?????
??????????????alert($(this).val()); ??????
??????????}); ??????
??????} ??????
}); ??
$("#input1").alertWhileClick(); //頁(yè)面上為：
$("#input1")　為一個(gè)jQuery實(shí)例，當(dāng)它調(diào)用成員方法 alertWhileClick后，便實(shí)現(xiàn)了擴(kuò)展，每次被點(diǎn)擊時(shí)它會(huì)先彈出目前編輯里的內(nèi)容。
3.2 jQuery.extend(object);
為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：
$.extend({ ?
????add:function(a,b){return a+b;} ?
}); ?
便為　jQuery　添加一個(gè)為 add　的　“靜態(tài)方法”，之后便可以在引入 jQuery　的地方，使用這個(gè)方法了，$.add(3,4); //return 7