優(yōu)秀的jQuery插件廣受全球數萬名Web開發(fā)者的青睞，而那些設計不佳的插件則很快被遺忘。本文提供一些技巧，助您開發(fā)出更出色的jQuery插件，提升其影響力。

關鍵要點：

• 通過返回調用它的jQuery對象，確保您的jQuery插件可鏈式調用，從而允許鏈接多個jQuery方法。
• 為您的jQuery插件提供默認設置，允許用戶根據自身需求進行自定義，并考慮支持HTML參數以方便使用。
• 將您的jQuery插件上傳到GitHub、Google Code和jQuery插件目錄等代碼庫進行推廣，并準備好提供支持和必要的更新。

1. 保持鏈式調用的完整性

除非您的插件返回一個值，否則插件函數的最后一行必須是：

return this;

這確保了方法調用可以鏈式進行，例如：

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

2. 簡化使用

在大多數情況下，您的插件應該無需開發(fā)者查閱文檔、設置選項或編輯插件代碼即可正常工作。如果它是一個可視化小部件，開發(fā)者不應該需要編輯任何JavaScript代碼。您可以簡單地提供帶有class/ID的HTML，它將自動啟動您的代碼，例如：

<p>My content</p>

您的插件可以自行初始化，例如：

$(function() {
    $("section.myjqWidget").myjqWidget();
});

3. 使用合適的命名和版本控制編號

jQuery插件數量眾多?！皌ab”這樣的名稱很可能已被使用。雖然這并非總是問題，但應避免使用含糊不清或可能發(fā)生沖突的名稱。版本編號也很重要，尤其是在開發(fā)者報告問題時。

4. 使用閉包

不要依賴于$引用jQuery。如果開發(fā)者安裝了其他庫，它可能在加載jQuery之前就已獲取了$。解決這個問題最簡單的方法是將jQuery作為匿名自啟動函數的$參數傳遞，例如：

(function($) {
    // 此處的代碼可以使用$來引用jQuery
})(jQuery);

5. 設置默認參數

大多數插件使用JavaScript對象字面量表示法設置參數，例如：

$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});

這有幾個優(yōu)點：參數易于閱讀，可以按任何順序排列，也可以完全省略。但是，您應該在插件代碼中設置默認值并相應地覆蓋它們，例如：

$.fn.PlugIn = function(opts) {
    // 默認配置
    var config = $.extend({}, {
        opt1: 1,
        opt2: 2,
        opt3: 3,
        opt4: 4,
        opt5: 5
    }, opts);
    // ...
};

您的插件可以使用config.opt1之類的代碼引用參數。

6. 支持HTML參數

理想情況下，HTML小部件應該能夠設置參數，而無需開發(fā)者更改JavaScript代碼。您可以考慮使用HTML5數據屬性，例如：

return this;

這些可以通過jQuery的data()方法訪問：.data("opt1")。

7. 編寫代碼文檔

在插件頂部添加簡潔的注釋，描述：

• 插件名稱和版本
• 插件的功能
• 使用示例
• 參數
• 聯系和支持鏈接

如果插件特別復雜，可以考慮單獨的README文件。

8. 徹底測試您的插件

測試它。然后再次測試它。在所有瀏覽器中測試?？赡艽嬖谀鸁o法修復的問題，例如IE6兼容性問題。這沒關系，但在您的文檔中提及即可。

9. 使用良好的模板

以下是我創(chuàng)建新插件時使用的模板代碼：

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

它提供了一個良好的起點：

• 插件被包裝在一個閉包中。
• 它設置了默認選項，這些選項被插件參數覆蓋。
• 每個選定的元素都作為jQuery對象傳遞給DoSomething函數。
• 包含return this;。
• 在最后提供了自動啟動代碼。

10. 推廣您的插件

如果您希望開發(fā)者使用您的插件，請將其上傳到GitHub、Google Code和jQuery插件目錄等代碼庫。創(chuàng)建演示頁面，在文章中宣傳它，并在Twitter上不斷發(fā)布信息。然后準備好支持插件并在必要時更新它。您會收到一些愚蠢的問題和奇怪的功能請求，但這都是成為成功的插件作者的一部分。

(后續(xù)內容，即FAQ部分，由于篇幅過長，建議另行處理?？梢詫AQ部分單獨整理成一個新的回答。)

以上是開發(fā)更好jQuery插件的10個提示的詳細內容。更多信息請關注PHP中文網其他相關文章！