壹種是類級插件開發，即向jQuery添加新的全局函數相當於向jQuery類本身添加方法。jQuery的全局函數是屬於jQuery名稱空間的函數，另壹個是對象級插件開發，即向jQuery對象添加方法。下面詳細介紹這兩個功能的開發。
1，類級插件開發
在類級別對插件開發最直接的理解是在jQuery類中添加類方法，可以理解為添加靜態方法。壹個典型的例子是函數$。AJAX（），它在jQuery的名稱空間中定義。類級別的插件開發可以通過以下形式進行擴展:
1.1添加壹個新的全局函數。
要添加全局函數，我們只需將其定義如下:
Java代碼
jquery . foo = function（）{
alert（‘這是壹個測試。這只是壹次測試。);
};
1.2添加多個全局函數
添加多個全局函數，其定義如下:
Java代碼
jquery . foo = function（）{
alert（‘這是壹個測試。這只是壹次測試。);
};
jquery . bar = function（param ）{
alert（“此函數接受壹個參數，該參數為““+ param +““。“);
};
它的調用與函數相同:jquery . foo（）；jquery . bar（）；或美元。foo（）；$.酒吧（“酒吧”）；
1.3使用jquery . extend（object）；
Java代碼
jquery . extend （{
foo:function（）{
alert（‘這是壹個測試。這只是壹次測試。);
},
條形:函數（參數）{
alert（“此函數接受壹個參數，該參數為““+ param +““。“);
}
});
1.4使用命名空間
雖然在jQuery名稱空間中，我們禁止使用大量的javaScript函數名和變量名。然而，仍然不可避免的是，壹些函數或變量名會與其他jQuery插件沖突，因此我們習慣於將壹些方法封裝到另壹個自定義名稱空間中。
Java代碼
jQuery.myPlugin = {
foo:function（）{
alert（‘這是壹個測試。這只是壹次測試。);
},
條形:函數（參數）{
alert（“此函數接受壹個參數，該參數為““+ param +““。“);
}
};
使用名稱空間的函數仍然是全局函數，調用它們時使用的方法有:
$。my plugin。foo（）；
$。my plugin。bar（‘baz‘）；
通過這種技術（使用獨立的插件名稱），我們可以避免名稱空間中的函數沖突。
2.對象級插件開發
對象級插件開發需要以下兩種形式:，
表格1:
Java代碼
（函數（$）{
$。fn。extend （{
插件名:函數（選項，回調）{
//我們的插件實現代碼在這裏。
}
})
})(jQuery)；
表格2:
Java代碼
(函數($) {
$。fn。plugin name = function（）{
//我們的插件實現代碼在這裏。
};
})(jQuery)；
上面定義了壹個jQuery函數，形參是$。函數定義完成後，傳入參數jQuery，並立即調用它來執行。這樣做的好處是，當我們編寫jQuery插件時，我們也可以使用別名$而不會與prototype沖突。
2.1在JQuery名稱空間下聲明壹個名稱。
這是單個插件的腳本。如果您的腳本包含多個插件或相互矛盾的插件（例如，$。fn。do something（）和$。fn。undo something（）），那麽您需要聲明多個函數名。然而，通常當我們編寫壹個插件時，我們試圖只使用壹個名稱來包含它的所有內容。我們的示例插件名為“highlight”
Java代碼
$。fn。hi light = function（）{
//我們的插件實現代碼在這裏。
};
我們的插件是這樣調用的:
$（‘# my div‘）。hi light（）；
但是如果我們需要將實現代碼分解成多個函數呢？原因有很多:設計需要；這實現起來更容易或更易讀；它更加面向對象。這真的很麻煩，將函數實現分解為多個函數，而不添加多余的名稱空間。我們能夠做到這壹點是因為我們將函數作為javascript中最基本的類對象來實現和使用。就像其他對象壹樣，函數可以被指定為屬性。因此，我們已經將“highlight”聲明為jQuery的屬性對象，並且我們需要公開的任何其他屬性或函數都可以在“highlight”函數中聲明。稍後繼續。
2.2接受選項參數來控制插件的行為。
讓我們為插件添加指定前景色和背景色的功能。我們可以讓選項像options對象壹樣傳遞給插件函數。例如:
Java代碼
//插件定義
$。fn。hi light =函數（選項）{
var默認值= {
前景:“紅色”，
背景:“黃色”
};
//用提供的選項擴展我們的默認選項。
var opts = $。擴展（默認值、選項）；
//我們的插件實現代碼在這裏。
};
我們的插件可以這樣命名:
$（‘# my div‘）。hi light （{
前景:“藍色”
});
2.3公開插件的默認設置
我們應該對上面的代碼進行的壹個改進是公開插件的默認設置。這使得插件的用戶更容易用更少的代碼覆蓋和修改插件。接下來，我們開始使用函數對象。
Java代碼
//插件定義
$。fn。hi light =函數（選項）{
//用提供的選項擴展我們的默認選項。
//請註意，要擴展的第壹個參數是壹個空對象-
//這是為了防止覆蓋我們的“defaults”對象。
var opts = $。extend（{ }，$。fn。hi light。defaults，options）；
//我們的插件實現代碼在這裏。
};
//插件默認值-作為插件函數的屬性添加
$。fn。hi light。defaults = {
前景:“紅色”，
背景:“黃色”
};
現在用戶可以在他們的腳本中包含這樣壹行:
//這個只需要調用壹次，而且不壹定要在ready塊中調用。
$。fn。hi light。defaults。foreground =‘blue‘；
接下來我們可以像這樣使用插件方法，結果它設置了藍色的前景色:
$（‘# my div‘）。hi light（）；
如您所見，我們允許用戶以插件的默認前景色編寫壹行代碼。用戶仍然可以在需要時有選擇地覆蓋這些新的默認值:
//覆蓋插件的默認背景顏色。
$。fn。hi light。defaults。foreground =‘blue‘；
// ...
//使用新的默認設置調用插件。
$('.hilightDiv）。hi light（）；
// ...
//通過將配置參數傳遞給插件方法來覆蓋默認設置。
$（‘# green‘）。hi light （{
前景:“綠色”
});
2.4適當暴露壹些功能
這壹段將以壹種有趣的方式逐步擴展您的插件到前面的代碼（並讓其他人同時擴展您的插件）。例如，在插件的實現中，我們可以定義壹個名為“format”的函數來格式化突出顯示的文本。我們的插件現在看起來像這樣，默認格式方法的實現部分在hiligth函數下。
Java代碼
//插件定義
$。fn。hi light =函數（選項）{
//叠代並重新格式化每個匹配的元素
return this . each（function（）{
var $ this = $(this)；
// ...
var markup = $ this . html（）；
//調用我們的格式函數
markup = $。fn。hi light。format（markup）；
$this.html（標記）；
});
};
//定義我們的格式函數
$。fn。hi light。format = function（txt ）{
return‘& lt；strong & gt；‘+txt+‘& lt；/strong & gt；‘；
};
通過允許回調函數，我們可以輕松地支持options對象中的其他屬性來覆蓋默認設置。這是修改插件的另壹個極好的方法。這裏顯示的技巧是進壹步有效地公開格式函數，以便可以重新定義它。通過這種技術，其他人可以傳遞他們自己的設置來覆蓋您的插件，換句話說，其他人也可以為您的插件編寫插件。
考慮到我們在本文中構建的無用插件，您可能想知道這些插件何時會有用。壹個真實的例子是循環插件。這個循環插件是壹個滑動顯示插件，可以支持滾動、滑動、漸隱等多種內部轉換。但事實上，沒有辦法定義可能應用於滑動變化的每種類型的效果。這就是這種可擴展性有用的地方。Cycle插件向用戶公開“轉換”對象，並讓他們添加自己的轉換定義。插件中的定義如下:
$。fn。cycle。transitions = {
// ...
};
這種技術使其他人能夠定義轉換設置並將其傳遞給Cycle插件。
2.5保持私人功能的私密性
這種技術非常強大，可以暴露插件的壹部分以進行覆蓋。但是您需要仔細考慮實現中暴露的部分。壹旦公開，您需要記住對參數或語義的任何更改，這可能會破壞向後兼容性。壹般來說，如果您不確定是否要公開特定的函數，那麽您可能不需要這樣做。
那麽，我們如何在不弄亂名稱空間或暴露實現的情況下定義更多的函數呢？這就是閉包的功能。為了演示，我們將在插件中添加另壹個“調試”功能。該調試函數將把選定的元素格式輸出到firebug控制臺。為了創建壹個閉包，我們定義了壹個包裝整個插件的函數。
Java代碼
(函數($) {
//插件定義
$。fn。hi light =函數（選項）{
調試（這個）；
// ...
};
//用於調試的私有函數
函數調試（$ obj ）{
if（window . console & amp；& amp窗口。控制臺。日誌）
window . console . log（‘hi light選擇計數:‘+$ obj . size（））；
};
// ...
})(jQuery)；
我們的“debug”方法不能從外部閉包進入，因此它是我們的實現的私有方法。
2.6支持元數據插件。
在您正在編寫的插件的基礎上，添加對元數據插件的支持可以使其更加強大。就我個人而言，我喜歡這個元數據插件，因為它允許您使用壹些“標記”來覆蓋插件選項（這在創建示例時非常有用）。支持它非常簡單。更新:評論裏有壹點優化建議。
Java代碼
$。fn。hi light =函數（選項）{
// ...
//在元素叠代之前生成主選項
var opts = $。extend（{ }，$。fn。hi light。defaults，options）；
return this . each（function（）{
var $ this = $(this)；
//構建元素特定選項
var o = $。meta？$.extend（{ }，opts，$ this . data（））:opts；
// ...
這些變更行做了壹些事情:它測試是否安裝了元數據插件。如果安裝了它，它可以擴展我們的選項對象。通過提取元數據行作為最後壹個參數，它將覆蓋任何其他選項設置。如果我們選擇“標記”，現在我們可以通過“標記”來驅動行為:
調用時可以這樣寫:jquery . foo（）；或美元。foo（）；
Java代碼
& lt！-標記-& gt；
& ltdiv class =“hi light { background:‘red‘，foreground:‘white‘}“& gt；
祝您愉快！
& lt/div & gt；
& ltdiv class =“hi light { foreground:‘orange‘}“& gt；
祝您愉快！
& lt/div & gt；
& ltdiv class =“hi light { background:‘green‘}“& gt；
祝您愉快！
& lt/div & gt；
現在我們可以突出顯示哪些div僅使用壹行腳本:
$('.hilight）。hi light（）；
2.7整合
讓我們用以下代碼結束我們的示例:
Java代碼
//創建壹個閉包
(函數($) {
//插件的定義
$。fn。hi light =函數（選項）{
調試（這個）；
//在元素叠代之前生成主選項
var opts = $。extend（{ }，$。fn。hi light。defaults，options）；
//叠代並重新格式化每個匹配的元素
return this . each（function（）{
$ this = $（this）；
//構建元素特定選項
var o = $。meta？$.extend（{ }，opts，$ this . data（））:opts；
//更新元素樣式
$ this . CSS （{
背景色:o.background，
顏色:o .前景
});
var markup = $ this . html（）；
//調用我們的格式函數
markup = $。fn。hi light。format（markup）；
$this.html（標記）；
});
};
//私有函數:調試
函數調試（$ obj ）{
if（window . console & amp；& amp窗口。控制臺。日誌）
window . console . log（‘hi light選擇計數:‘+$ obj . size（））；
};
//定義公開的格式函數
$。fn。hi light。format = function（txt ）{
return‘& lt；strong & gt；‘+txt+‘& lt；/strong & gt；‘；
};
//插件的默認值
$。fn。hi light。defaults = {
前景:“紅色”，
背景:“黃色”
};
//結束
})(jQuery)；
這種設計使我能夠創建符合規範的強大插件。我希望它能使妳也這樣做。
3.摘要
JQuery提出了兩種開發插件的方法，即:
jquery . fn . extend（object）；向jQuery對象添加壹個方法。
jQuery.extend（對象）；擴展jQuery類本身。向類中添加新方法。
3.1 jquery . fn . extend（object）；
什麽是fn？看看jQuery代碼，不難發現。
jQuery.fn = jQuery.prototype = {
init:函數（選擇器，上下文）{//....
// ......
};
事實證明，jQuery.fn = jQuery.prototype對原型肯定不陌生。雖然javascript沒有明確的類概念，但用類來理解它更方便。JQuery是壹個封裝非常好的類。例如，如果我們使用語句$（“# BTN 1“），我們將生成jQuery類的壹個實例。
jquery . fn . extend（object）；jQuery.prototype的擴展是在jQuery類中添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。
例如，我們需要開發壹個插件並制作壹個特殊的編輯框。當它被點擊時，我們將提醒當前編輯框的內容。您可以這樣做:
$。fn。extend （{
alert while click:function（）{
$(這個)。單擊(函數(){
alert（$（this）。val())；
});
}
});
$（“# input 1“）。alertwhilect（）；//在頁面上:
$（“# input 1“）是壹個jQuery實例。當它調用成員方法alertWhileClick時，它將被擴展。每次點擊都會先彈出當前編輯的內容。
3.2 jQuery.extend（對象）；
向jQuery類添加類方法可以理解為添加靜態方法。比如:
$.擴展（{
add:函數（a，b）{ return a+b；}
});
為jQuery添加壹個“靜態方法”，然後就可以在引入jQuery的地方使用這個方法，$了。添加（3，4）；//返回7
——轉自ITeyes，作者gaojiewyh