开发更好jQuery插件的10个提示

优秀的jQuery插件广受全球数万名Web开发者的青睐，而那些设计不佳的插件则很快被遗忘。本文提供一些技巧，助您开发出更出色的jQuery插件，提升其影响力。

关键要点：

• 通过返回调用它的jQuery对象，确保您的jQuery插件可链式调用，从而允许链接多个jQuery方法。
• 为您的jQuery插件提供默认设置，允许用户根据自身需求进行自定义，并考虑支持HTML参数以方便使用。
• 将您的jQuery插件上传到GitHub、Google Code和jQuery插件目录等代码库进行推广，并准备好提供支持和必要的更新。

1. 保持链式调用的完整性

除非您的插件返回一个值，否则插件函数的最后一行必须是：

return this;

这确保了方法调用可以链式进行，例如：

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

2. 简化使用

在大多数情况下，您的插件应该无需开发者查阅文档、设置选项或编辑插件代码即可正常工作。如果它是一个可视化小部件，开发者不应该需要编辑任何JavaScript代码。您可以简单地提供带有class/ID的HTML，它将自动启动您的代码，例如：

<p>My content</p>

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

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

3. 使用合适的命名和版本控制编号

jQuery插件数量众多。“tab”这样的名称很可能已被使用。虽然这并非总是问题，但应避免使用含糊不清或可能发生冲突的名称。版本编号也很重要，尤其是在开发者报告问题时。

4. 使用闭包

不要依赖于$引用jQuery。如果开发者安装了其他库，它可能在加载jQuery之前就已获取了$。解决这个问题最简单的方法是将jQuery作为匿名自启动函数的$参数传递，例如：

(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);

5. 设置默认参数

大多数插件使用JavaScript对象字面量表示法设置参数，例如：

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

这有几个优点：参数易于阅读，可以按任何顺序排列，也可以完全省略。但是，您应该在插件代码中设置默认值并相应地覆盖它们，例如：

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

您的插件可以使用config.opt1之类的代码引用参数。

6. 支持HTML参数

理想情况下，HTML小部件应该能够设置参数，而无需开发者更改JavaScript代码。您可以考虑使用HTML5数据属性，例如：

return this;

这些可以通过jQuery的data()方法访问：.data("opt1")。

7. 编写代码文档

在插件顶部添加简洁的注释，描述：

• 插件名称和版本
• 插件的功能
• 使用示例
• 参数
• 联系和支持链接

如果插件特别复杂，可以考虑单独的README文件。

8. 彻底测试您的插件

测试它。然后再次测试它。在所有浏览器中测试。可能存在您无法修复的问题，例如IE6兼容性问题。这没关系，但在您的文档中提及即可。

9. 使用良好的模板

以下是我创建新插件时使用的模板代码：

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

它提供了一个良好的起点：

• 插件被包装在一个闭包中。
• 它设置了默认选项，这些选项被插件参数覆盖。
• 每个选定的元素都作为jQuery对象传递给DoSomething函数。
• 包含return this;。
• 在最后提供了自动启动代码。

10. 推广您的插件

如果您希望开发者使用您的插件，请将其上传到GitHub、Google Code和jQuery插件目录等代码库。创建演示页面，在文章中宣传它，并在Twitter上不断发布信息。然后准备好支持插件并在必要时更新它。您会收到一些愚蠢的问题和奇怪的功能请求，但这都是成为成功的插件作者的一部分。

(后续内容，即FAQ部分，由于篇幅过长，建议另行处理。可以将FAQ部分单独整理成一个新的回答。)

以上是开发更好jQuery插件的10个提示的详细内容。更多信息请关注PHP中文网其他相关文章！