?

? jQuery 插件的開發包括兩種：

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

1 、類級別的插件開發

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

1.1? 添加一個新的全局函數

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

?

?

?

?

1.2? 增加多個全局函數

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

1.3? 使用 jQuery.extend(object);

?

1.4? 使用命名空間

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

?

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

2 、對象級別的插件開發

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

形式 1 ：??

形式 2 ：

?

?

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

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

?

?

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

讓我們為我們的插件添加功能指定前景色和背景色的功能。我們也許會讓選項像一個 options 對象傳遞給插件函數。例如：???

?

2.3? 暴露插件的默認設置

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

?

?

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

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

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

// ...?

//? 使用一個新的缺省設置調用插件 ?

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

// ...?

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

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

??foreground: 'green'?

});??

2.4? 適當的暴露一些函數

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

$.fn.cycle.transitions = {?

// ...?

};?

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

2.5? 保持私有函數的私有性

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

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

?

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

2.6? 支持 Metadata 插件

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

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

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

?

?

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

????

?

這段設計已經讓我創建了強大符合規范的插件。我希望它能讓你也能做到。

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(); // 頁面上為： <input id="input1" type="text"/>

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

3.2 jQuery.extend(object);

為 jQuery 類添加添加類方法，可以理解為添加靜態方法。如：

$.extend({??

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

});??

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