?

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

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

1 、類級別的插件開發(fā)

類級別的插件開發(fā)最直接的理解就是給 jQuery 類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是 $.AJAX() 這個函數(shù)，將函數(shù)定義于 jQuery 的命名空間中。關(guān)于類級別的插件開發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：

1.1? 添加一個新的全局函數(shù)

添加一個全局函數(shù)，我們只需如下定義：

?

?

Java代碼??

1. jQuery.foo?=?function()?{???
2. alert( 'This?is?a?test.?This?is?only?a?test.' );??
3. };????

?

?

1.2? 增加多個全局函數(shù)

添加多個全局函數(shù)，可采用如下定義：

Java代碼??

1. jQuery.foo?=?function()?{???
2. alert( 'This?is?a?test.?This?is?only?a?test.' );??
3. };??
4. jQuery.bar?=?function(param)?{???
5. alert( 'This?function?takes?a?parameter,?which?is?"' ?+?param?+? '".' );??
6. };???
7. 調(diào)用時和一個函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar( 'bar' );??

1.3? 使用 jQuery.extend(object);

Java代碼??

1. jQuery.extend({??????
2. foo:?function()?{??????
3. alert( 'This?is?a?test.?This?is?only?a?test.' );??????
4. },??????
5. bar:?function(param)?{??????
6. alert( 'This?function?takes?a?parameter,?which?is?"' ?+?param?+ '".' );??????
7. }?????
8. });??

?

1.4? 使用命名空間

雖然在 jQuery 命名空間中，我們禁止使用了大量的 javaScript 函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他 jQuery 插件沖突，因此我們習(xí)慣將一些方法封裝到另一個自定義的命名空間。

Java代碼??

1. jQuery.myPlugin?=?{??????????
2. foo:function()?{??????????
3. alert( 'This?is?a?test.?This?is?only?a?test.' );??????????
4. },??????????
5. bar:function(param)?{??????????
6. alert( 'This?function?takes?a?parameter,?which?is?"' ?+?param?+? '".' );????
7. }?????????
8. };??
9. 采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時采用的方法：??
10. $.myPlugin.foo();?????????
11. $.myPlugin.bar( 'baz' );??

?

通過這個技巧（使用獨立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。

2 、對象級別的插件開發(fā)

對象級別的插件開發(fā)需要如下的兩種形式：、

形式 1 ：??

Java代碼??

1. (function($){?????
2. $.fn.extend({?????
3. pluginName:function(opt,callback){?????
4. ?????????? //?Our?plugin?implementation?code?goes?here.????? ??
5. }?????
6. })?????
7. })(jQuery);?????

形式 2 ：

?

?

Java代碼??

1. (function($)?{???????
2. $.fn.pluginName?=?function()?{?????
3. ????? //?Our?plugin?implementation?code?goes?here.??? ??
4. };?????
5. })(jQuery);??????

?????? 上面定義了一個 jQuery 函數(shù) , 形參是 $ ，函數(shù)定義完成之后 , 把 jQuery 這個實參傳遞進(jìn)去 . 立即調(diào)用執(zhí)行。這樣的好處是 , 我們在寫 jQuery 插件時 , 也可以使用 $ 這個別名 , 而不會與 prototype 引起沖突 .

2.1? 在 JQuery 名稱空間下申明一個名字

這是一個單一插件的腳本。如果你的腳本中包含多個插件，或者互逆的插件（例如： ?$.fn.doSomething()? 和 $.fn.undoSomething() ），那么你需要聲明多個函數(shù)名字。但是，通常當(dāng)我們編寫一個插件時，力求僅使用一個名字來包含它的所有內(nèi)容。我們的示例插件命名為“ highlight “ ????

?

Java代碼??

1. $.fn.hilight?=?function()?{????
2. ?? //?Our?plugin?implementation?code?goes?here.?? ??
3. };????
4. 我們的插件通過這樣被調(diào)用：??
5. $( '#myDiv' ).hilight();?????

?

但是如果我們需要分解我們的實現(xiàn)代碼為多個函數(shù)該怎么辦？有很多原因：設(shè)計上的需要；這樣做更容易或更易讀的實現(xiàn)；而且這樣更符合面向?qū)ο蟆? ? 這真是一個麻煩事，把功能實現(xiàn)分解成多個函數(shù)而不增加多余的命名空間。出于認(rèn)識到和利用函數(shù)是 javascript 中最基本的類對象，我們可以這樣做。就像其他對象一樣，函數(shù)可以被指定為屬性。因此我們已經(jīng)聲明 “hilight” 為 jQuery 的屬性對象，任何其他的屬性或者函數(shù)我們需要暴露出來的，都可以在 "hilight"? 函數(shù)中被聲明屬性。稍后繼續(xù)。
2.2? 接受 options 參數(shù)以控制插件的行為

讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ堋Ｎ覀円苍S會讓選項像一個 options 對象傳遞給插件函數(shù)。例如：???

Java代碼??

1. //?plugin?definition?? ??
2. $.fn.hilight?=?function(options)?{????
3. ??var?defaults?=?{????
4. ????foreground:? 'red' ,????
5. ????background:? 'yellow' ????
6. ??};????
7. ?? //?Extend?our?default?options?with?those?provided.?? ??
8. ??var?opts?=?$.extend(defaults,?options);????
9. ?? //?Our?plugin?implementation?code?goes?here.?? ??
10. };????
11. 我們的插件可以這樣被調(diào)用：??
12. $( '#myDiv' ).hilight({????
13. ??foreground:? 'blue' ????
14. });?????

?

2.3? 暴露插件的默認(rèn)設(shè)置

我們應(yīng)該對上面代碼的一種改進(jìn)是暴露插件的默認(rèn)設(shè)置。這對于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數(shù)對象。 ?????

?

Java代碼??

1. //?plugin?definition?? ??
2. $.fn.hilight?=?function(options)?{????
3. ?? //?Extend?our?default?options?with?those?provided.?? ??
4. ?? //?Note?that?the?first?arg?to?extend?is?an?empty?object?-?? ??
5. ?? //?this?is?to?keep?from?overriding?our?"defaults"?object.?? ??
6. ??var?opts?=?$.extend({},?$.fn.hilight.defaults,?options);????
7. ?? //?Our?plugin?implementation?code?goes?here.?? ??
8. };????
9. //?plugin?defaults?-?added?as?a?property?on?our?plugin?function?? ??
10. $.fn.hilight.defaults?=?{????
11. ??foreground:? 'red' ,????
12. ??background:? 'yellow' ????
13. };?????
14. 現(xiàn)在使用者可以包含像這樣的一行在他們的腳本里：??
15. //這個只需要調(diào)用一次，且不一定要在ready塊中調(diào)用 ??
16. $.fn.hilight.defaults.foreground?=? 'blue' ;????
17. 接下來我們可以像這樣使用插件的方法，結(jié)果它設(shè)置藍(lán)色的前景色：??
18. $( '#myDiv' ).hilight();???

?

如你所見，我們允許使用者寫一行代碼在插件的默認(rèn)前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認(rèn)值：

//? 覆蓋插件缺省的背景顏色 ?

$.fn.hilight.defaults.foreground = 'blue';?

// ...?

//? 使用一個新的缺省設(shè)置調(diào)用插件 ?

$('.hilightDiv').hilight();?

// ...?

//? 通過傳遞配置參數(shù)給插件方法來覆蓋缺省設(shè)置 ?

$('#green').hilight({?

??foreground: 'green'?

});??

2.4? 適當(dāng)?shù)谋┞兑恍┖瘮?shù)

這段將會一步一步對前面那段代碼通過有意思的方法擴(kuò)展你的插件（同時讓其他人擴(kuò)展你的插件）。例如，我們插件的實現(xiàn)里面可以定義一個名叫 "format" 的函數(shù)來格式化高亮文本。我們的插件現(xiàn)在看起來像這樣，默認(rèn)的 format 方法的實現(xiàn)部分在 hiligth 函數(shù)下面。

Java代碼??

1. //?plugin?definition?? ??
2. $.fn.hilight?=?function(options)?{????
3. ?? //?iterate?and?reformat?each?matched?element?? ??
4. ?? return ? this .each(function()?{????
5. ????var?$ this ?=?$( this );????
6. ???? //?...?? ??
7. ????var?markup?=?$ this .html();????
8. ???? //?call?our?format?function?? ??
9. ????markup?=?$.fn.hilight.format(markup);????
10. ????$ this .html(markup);????
11. ??});????
12. };????
13. //?define?our?format?function?? ??
14. $.fn.hilight.format?=?function(txt)?{????
15. return ? '<strong>' ?+?txt?+? '</strong>' ;????
16. };?????

????? 我們很容易的支持 options 對象中的其他的屬性通過允許一個回調(diào)函數(shù)來覆蓋默認(rèn)的設(shè)置。這是另外一個出色的方法來修改你的插件。這里展示的技巧是進(jìn)一步有效的暴露 format 函數(shù)進(jìn)而讓他能被重新定義。通過這技巧，是其他人能夠傳遞他們自己設(shè)置來覆蓋你的插件，換句話說，這樣其他人也能夠為你的插件寫插件。 ?
????? 考慮到這個篇文章中我們建立的無用的插件，你也許想知道究竟什么時候這些會有用。一個真實的例子是 Cycle 插件 . 這個 Cycle 插件是一個滑動顯示插件，他能支持許多內(nèi)部變換作用到滾動，滑動，漸變消失等。但是實際上，沒有辦法定義也許會應(yīng)用到滑動變化上每種類型的效果。那是這種擴(kuò)展性有用的地方。 ?Cycle 插件對使用者暴露 "transitions" 對象，使他們添加自己變換定義。插件中定義就像這樣：

$.fn.cycle.transitions = {?

// ...?

};?

這個技巧使其他人能定義和傳遞變換設(shè)置到 Cycle 插件。

2.5? 保持私有函數(shù)的私有性

這種技巧暴露你插件一部分來被覆蓋是非常強(qiáng)大的。但是你需要仔細(xì)思考你實現(xiàn)中暴露的部分。一但被暴露，你需要在頭腦中保持任何對于參數(shù)或者語義的改動也許會破壞向后的兼容性。一個通理是，如果你不能肯定是否暴露特定的函數(shù)，那么你也許不需要那樣做。

那么我們怎么定義更多的函數(shù)而不攪亂命名空間也不暴露實現(xiàn)呢？這就是閉包的功能。為了演示，我們將會添加另外一個 “debug” 函數(shù)到我們的插件中。這個 ?debug 函數(shù)將為輸出被選中的元素格式到 firebug 控制臺。為了創(chuàng)建一個閉包，我們將包裝整個插件定義在一個函數(shù)中。 ?

Java代碼??

1. ?(function($)?{????
2. ?? //?plugin?definition?? ??
3. ??$.fn.hilight?=?function(options)?{????
4. ????debug( this );????
5. ???? //?...?? ??
6. ??};????
7. ?? //?private?function?for?debugging?? ??
8. ??function?debug($obj)?{????
9. ???? if ?(window.console?&&?window.console.log)????
10. ??????window.console.log( 'hilight?selection?count:?' ?+?$obj.size());????
11. ??};????
12. //??...?? ??
13. })(jQuery);????

?

我們的 “debug” 方法不能從外部閉包進(jìn)入 , 因此對于我們的實現(xiàn)是私有的。

2.6? 支持 Metadata 插件

在你正在寫的插件的基礎(chǔ)上，添加對 Metadata 插件的支持能使他更強(qiáng)大。個人來說，我喜歡這個 Metadata 插件，因為它讓你使用不多的 "markup” 覆蓋插件的選項（這非常有用當(dāng)創(chuàng)建例子時）。而且支持它非常簡單。更新：注釋中有一點優(yōu)化建議。

Java代碼??

1. $.fn.hilight?=?function(options)?{????
2. ?? //?...?? ??
3. ?? //?build?main?options?before?element?iteration?? ??
4. ??var?opts?=?$.extend({},?$.fn.hilight.defaults,?options);????
5. ?? return ? this .each(function()?{????
6. ????var?$ this ?=?$( this );????
7. ???? //?build?element?specific?options?? ??
8. ????var?o?=?$.meta???$.extend({},?opts,?$ this .data())?:?opts;????
9. ???? //...???? ??

? 這些變動行做了一些事情：它是測試 Metadata 插件是否被安裝如果它被安裝了，它能擴(kuò)展我們的 options 對象通過抽取元數(shù)據(jù)這行作為最后一個參數(shù)添加到 JQuery.extend ，那么它將會覆蓋任何其它選項設(shè)置。現(xiàn)在我們能從 "markup” 處驅(qū)動行為 , 如果我們選擇了 “markup” ：

?調(diào)用的時候可以這樣寫： ?jQuery.foo();? 或 ?$.foo();?

?

Java代碼??

1. <!--??markup??-->????
2. <div? class = "hilight?{?background:?'red',?foreground:?'white'?}" >????
3. ??Have?a?nice?day!????
4. </div>????
5. <div? class = "hilight?{?foreground:?'orange'?}" >????
6. ??Have?a?nice?day!????
7. </div>????
8. <div? class = "hilight?{?background:?'green'?}" >????
9. ??Have?a?nice?day!????
10. </div>????
11. 現(xiàn)在我們能高亮哪些div僅使用一行腳本：??
12. $( '.hilight' ).hilight();?????

?

2.7? 整合
下面使我們的例子完成后的代碼：

????

Java代碼??

1. //?創(chuàng)建一個閉包?? ??
2. (function($)?{????
3. ?? //?插件的定義?? ??
4. ??$.fn.hilight?=?function(options)?{????
5. ????debug( this );????
6. ???? //?build?main?options?before?element?iteration?? ??
7. ????var?opts?=?$.extend({},?$.fn.hilight.defaults,?options);????
8. ???? //?iterate?and?reformat?each?matched?element?? ??
9. ???? return ? this .each(function()?{????
10. ??????$ this ?=?$( this );????
11. ?????? //?build?element?specific?options?? ??
12. ??????var?o?=?$.meta???$.extend({},?opts,?$ this .data())?:?opts;????
13. ?????? //?update?element?styles?? ??
14. ??????$ this .css({????
15. ????????backgroundColor:?o.background,????
16. ????????color:?o.foreground????
17. ??????});????
18. ??????var?markup?=?$ this .html();????
19. ?????? //?call?our?format?function?? ??
20. ??????markup?=?$.fn.hilight.format(markup);????
21. ??????$ this .html(markup);????
22. ????});????
23. ??};????
24. ?? //?私有函數(shù)：debugging?? ??
25. ??function?debug($obj)?{????
26. ???? if ?(window.console?&&?window.console.log)????
27. ??????window.console.log( 'hilight?selection?count:?' ?+?$obj.size());????
28. ??};????
29. ?? //?定義暴露format函數(shù)?? ??
30. ??$.fn.hilight.format?=?function(txt)?{????
31. ???? return ? '<strong>' ?+?txt?+? '</strong>' ;????
32. ??};????
33. ?? //?插件的defaults?? ??
34. ??$.fn.hilight.defaults?=?{????
35. ????foreground:? 'red' ,????
36. ????background:? 'yellow' ????
37. ??};????
38. //?閉包結(jié)束?? ??
39. })(jQuery);?????

?

這段設(shè)計已經(jīng)讓我創(chuàng)建了強(qiáng)大符合規(guī)范的插件。我希望它能讓你也能做到。

3 、總結(jié)

jQuery 為開發(fā)插件提拱了兩個方法，分別是：

jQuery.fn.extend(object);?? 給 jQuery 對象添加方法。
jQuery.extend(object); ? 為擴(kuò)展 jQuery 類本身 . 為類添加新的方法。

3.1 jQuery.fn.extend(object);

fn? 是什么東西呢。查看 jQuery 代碼，就不難發(fā)現(xiàn)。

jQuery.fn = jQuery.prototype = {??

init: function( selector, context ) {//.... ??

//......??

};???

原來 ?jQuery.fn = jQuery.prototype. 對 prototype 肯定不會陌生啦。雖然 ?javascript 　沒有明確的類的概念，但是用類來理解它，會更方便。 jQuery 便是一個封裝得非常好的類，比如我們用 ? 語句　 $("#btn1")? 會生成一個 ?jQuery 類的實例。

jQuery.fn.extend(object);? 對 jQuery.prototype 進(jìn)得擴(kuò)展，就是為 jQuery 類添加 “ 成員函數(shù) ” 。 jQuery 類的實例可以使用這個 “ 成員函數(shù) ” 。

比如我們要開發(fā)一個插件，做一個特殊的編輯框，當(dāng)它被點擊時，便 alert? 當(dāng)前編輯框里的內(nèi)容。可以這么做：

$.fn.extend({????????

???? alertWhileClick:function(){???????

???????? $(this).click(function(){??????

????????????? alert($(this).val());???????

????????? });???????

????? }???????

});???

$("#input1").alertWhileClick(); // 頁面上為： <input id="input1" type="text"/>

$("#input1") 　為一個 jQuery 實例，當(dāng)它調(diào)用成員方法 ?alertWhileClick 后，便實現(xiàn)了擴(kuò)展，每次被點擊時它會先彈出目前編輯里的內(nèi)容。

3.2 jQuery.extend(object);

為 jQuery 類添加添加類方法，可以理解為添加靜態(tài)方法。如：

$.extend({??

??? add:function(a,b){return a+b;}??

});??

便為　 jQuery 　添加一個為 ?add 　的　 “ 靜態(tài)方法 ” ，之后便可以在引入 ?jQuery 　的地方，使用這個方法了， $.add(3,4); //return 7