jQuery外掛開發全解析_jquery

jQuery插件的開發包括兩種：一種是類別層級的插件開發，即為jQuery新增的全域函數，相當於為jQuery類別本身新增方法。 jQuery的全域函數就是屬於jQuery命名空間的函數，另一種是物件層級的外掛程式開發，即為jQuery物件新增方法。下面就兩種函數的開發做詳細的說明。
1、類別層級的插件開發
類別層級的插件開發最直接的理解就是為jQuery類別新增類別方法，可以理解為新增靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義在jQuery的命名空間中。關於類別層級的外掛程式開發可以採用以下幾種形式進行擴充：
1.1 新增一個新的全域函數
新增一個全域函數，我們只需如下定義：
Java程式碼

複製程式碼 程式碼如下:

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

1.2 增加多個全域函數
新增多個全域函數，可採用以下定義：
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 ' ".');
};

呼叫時和一個函數的一樣的: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函數名稱和變數名稱。但是仍然不可避免某些函數或變數名稱將於其他jQuery插件衝突，因此我們習慣將一些方法封裝到另一個自訂的命名空間。
Java程式碼

複製程式碼 程式碼如下:

1.jQuery.my>
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 .採用命名空間的函數仍是全域函數，呼叫時所採用的方法：
10.$.myPlugin.foo();
11.$.myPlugin.bar('baz');
透過這個技巧(使用獨立的插件名稱)，我們可以避免命名空間內函數的衝突。
2.物件層級的外掛程式開發
物件層級的外掛程式開發需要如下的兩種形式：、
形式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.};
55>5 .})(jQuery);

上面定義了一個jQuery函數,形參是$，函數定義完成之後,把jQuery這個實參傳遞進去.立即呼叫執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起衝突.
2.1 在JQuery名稱空間下申明一個名字
這是一個單一插件的腳本。如果你的腳本包含多個插件，或是互逆的插件(例如： $.fn.doSomething() 和$.fn.undoSomething())，那麼你需要宣告多個函數名稱。但是，通常當我們編寫一個插件時，力求只使用一個名字來包含它的所有內容。我們的範例外掛程式命名為「highlight「
Java程式碼

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:

1.$.fn.hilight = function() { 2. // Our plugin implementation code goes here.

3.};

4.我們的插件透過這樣被呼叫：
5.$('#myDiv').hilight();


但是如果我們需要分解我們的實現代碼為多個函數該怎麼辦?有很多原因：設計上的需要;這樣做更容易或更易讀的實現;而且這樣更符合物件導向。 這真是個麻煩事，把功能實作分解成多個函數而不增加多餘的命名空間。出於認識和利用函數是javascript中最基本的類別對象，我們可以這樣做。就像其他物件一樣，函數可以被指定為屬性。因此我們已經宣告「hilight」為jQuery的屬性對象，任何其他的屬性或函數我們需要暴露出來的，都可以在"hilight" 函數中被宣告屬性。稍後繼續。
2.2 接受options參數以控制插件的行為
讓我們為我們的插件添加功能指定前景色和背景色的功能。我們或許會讓選項像一個options物件傳遞給外掛函數。例如：
Java程式碼




複製程式碼


程式碼如下:

1.///>1. 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.我們的插件可以這樣被呼叫：

12.$('#myDiv').hilight({
13. foreground: 'blue'
14 .});


2.3 暴露插件的預設設定
我們應該對上面程式碼的一種改進是暴露插件的預設設定。這對於讓插件的使用者更容易用較少的程式碼覆蓋和修改插件。接下來我們開始利用函數物件。
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 = { 10.$.fn.hilight.defaults = { 10.$.fn.hilight.defaults = { 10.$.fn.hilight.defaults = {

11. foreground: 'red', 12. background: 'yellow' 13.}; 14.現在使用者可以包含像這樣的一行在他們的腳本裡： 15. //這個只需要呼叫一次，且不一定要在ready區塊中呼叫16.$.fn.hilight.defaults.foreground = 'blue'; 17.接下來我們可以像這樣使用插件的方法，結果它設定藍色的前景色： 18.$('#myDiv').hilight(); 現在使用者可以包含像這樣的一行在他們的腳本裡： 複製程式碼 程式碼如下:

//這個只需要呼叫一次，且不一定要在ready區塊中呼叫
$.fn.hilight.defaults.foreground = 'blue';
接下來我們可以像這樣使用插件的方法，結果它設定藍色的前景色：
$('#myDiv').hilight();
如你所見，我們允許用戶寫一行程式碼在插件的預設前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的預設值：
// 覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個新的預設設定來呼叫插件
$('.hilightDiv').hilight();
// ...
// 透過傳遞配置參數給插件方法來覆寫預設設定
$('#green').hilight({
foreground: 'green'
});

2.4 適當的暴露一些函數
這段將會一步一步對前面那段程式碼透過有意思的方法擴展你的插件(同時讓其他人擴展你的插件)。例如，我們外掛程式的實作裡面可以定義一個名叫"format"的函數來格式化高亮文字。我們的插件現在看起來像這樣，預設的format方法的實作部分在hiligth函數下面。
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 '' txt '';
16.};

我們很容易的支援options物件中的其他的屬性透過允許一個回調函數來覆蓋預設的設定。這是另一個出色的方法來修改你的插件。這裡展示的技巧是進一步有效的暴露format函數進而讓他能被重新定義。透過這個技巧，是其他人能夠傳遞他們自己設定來覆蓋你的插件，換句話說，這樣其他人也能夠為你的插件寫入插件。
考慮到這個文章中我們建立的無用的插件，你也許想知道究竟什麼時候這些會有用。一個真實的例子是Cycle插件.這個Cycle插件是一個滑動顯示插件，他能支援許多內部變換作用到滾動，滑動，漸變消失等。但是實際上，沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle外掛程式對使用者暴露"transitions"對象，使他們加入自己變換定義。外掛程式定義像這樣：

複製程式碼 程式碼如下:

$.fn.cycle .transitions = {
// ...
};

這個技巧使其他人能定義和傳遞變換設定到Cycle外掛。
2.5 保持私有函數的私有性
這種技巧暴露你插件一部分來被覆蓋是非常強大的。但是你需要仔細思考你實現中暴露的部分。一但被暴露，你需要在頭腦中保持任何對於參數或語義的改變也許會破壞向後的兼容性。一個通理是，如果你不能肯定是否暴露特定的函數，那麼你也許不需要那樣做。
那我們怎麼定義更多的函數而不攪亂命名空間也不暴露實現呢?這就是閉包的函數。為了演示，我們將會添加另一個“debug”函數到我們的插件中。這個 debug函數將為輸出被選取的元素格式到firebug控制台。為了創建一個閉包，我們將包裝整個插件定義在一個函數中。
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」方法不能從外部閉包進入,因此對於我們的實作是私有的。
2.6 支援Metadata外掛程式
在你正在寫的外掛程式的基礎上，加入對Metadata外掛的支援能讓他更強大。個人來說，我喜歡這個Metadata插件，因為它讓你使用不多的"markup」覆蓋插件的選項(這非常有用當創建例子時)。而且支援它非常簡單。更新：註解中有一點優化建議。
Java程式碼

複製程式碼 程式碼如下:

1.fn.fn. = 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插件是否被安裝如果它被安裝了，它能擴展我們的options對象通過抽取元數據這行作為最後一個參數添加到JQuery.extend，那麼它將會覆蓋任何其它選項設置。我們能從"markup」驅動行為,如果我們選擇了「markup」：
呼叫的時候可以這樣寫： jQuery.foo(); 或$.foo();
Java程式碼

複製程式碼 程式碼如下:

1.
2.
3. Have a nice day!
4.

5.

6. Have a nice day!
7.

8.

9. Have a nice day!
10.

11.現在我們能高亮哪些div只用一行腳本：
12.$('.hilight ').hilight();

2.7 整合
下面讓我們的範例完成後的程式碼：
Java程式碼

複製程式碼 程式碼如下:

1.// 建立一個閉包
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. // 私有函數：debugging
25. function debug($obj) {
26. if (window .console && window.console.log)
27. window.console.log('hilight selection count: ' $obj.size());
28. };
29. // 定義暴露format函數
30. $.fn.hilight.format = function(txt) {
31. return '' txt '';
32. };
33 . // 外掛程式的defaults
34. $.fn.hilight.defaults = {
35. foreground: 'red',
36. background: 'yellow'
37. };
38.// 閉包結束
39.})(jQuery);

這段設計已經讓我創造了強大符合規範的插件。我希望它能讓你也能做到。
3、總結
jQuery為開發插件提拱了兩個方法，分別是：
jQuery.fn.extend(object); 為jQuery物件加入方法。
jQuery.extend(object); 為擴展jQuery類別本身.為類別新增新的方法。
3.1 jQuery.fn.extend(object);
fn 是什麼東西呢。查看jQuery程式碼，就不難發現。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原來jQuery.fn = jQuery.prototype.對prototype肯定不會陌生。雖然 javascript　沒有明確的類別的概念，但用類別來理解它，會更方便。 jQuery就是一個封裝得非常好的類，例如我們用 語句　$("#btn1") 會產生一個 jQuery類別的實例。
jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是為jQuery類別加入「成員函數」。 jQuery類別的實例可以使用這個「成員函數」。
例如我們要開發一個插件，做一個特殊的編輯框，當它被點擊時，便alert 目前編輯框裡的內容。可以這麼做：

複製程式碼 程式碼如下:

$.fn.extend({ alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //頁面上為：

$("#input1")　為一個jQuery實例，當它呼叫成員方法alertWhileClick後，便實現了擴展，每次被點擊時它會先彈出目前編輯裡的內容。
3.2 jQuery.extend(object);
為jQuery類別新增新增類別方法，可以理解為新增靜態方法。如：

複製程式碼 程式碼如下:

1.$.extend({
2.add:function(a,b){return a b;}
3.});

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