jQuery创建自己的插件(自定义插件)的方法

但必须知道，这些插件不是自己凭空产生的，它们是由开发人员编写、测试并完善的，这些人员为 jQuery 社区奉献了自己的业余时间。我们做这些都是免费的，是出于对自己代码的热爱。本文主要关注您如何回报这个伟大的社区，即如何编写自己的插件并上传到 jQuery 的插件页面。这可以让所有人使用您创建的插件，可以让整个 jQuery 开发社区变得更好。今年您也做出自己的贡献吧。

在编写本文中的插件时，我发现插件的创建过程以及用来创建它的框架非常简单明了。困难的地方在于想一些其他人还没有做过的事情，并编写一些能真正完成某些操作的 JavaScript 代码。由于插件结构简单明了，对于新手它简单易学，对于高手它很灵活，因此插件的数量急速上升。

当然，在研究本文所涉及的内容时，我还发现每个作者编写插件的风格都不同，jQuery 允许好几种不同的插件编写风格。在本文中，我集中介绍最简单的一种风格，以及 jQuery 本身推荐的一种风格，插件弹出后您就会看到差别或不同的选项。

描述插件

创建插件的第 1 步当然是想一个好点子。像大部分点子一样，其他人总会给您创造机会。以我在本文中开发的插件为例，它不是什么新颖的概念，但在我撰写文本的时候，jQuery 插件社区还找不到该插件。我知道我个人会从该插件中受益良多。

我的插件是一个 NumberFormatter 插件。处理服务器端代码（比如 Java™ 或 PHP）和国际化的用户应该很熟悉数字格式化。众所周知，并非每个人都用相同的方式格式化数字。例如，并非每个人都使用 “里” 来度量距离。在美国，数字的写法可能是 “1,250,500.75”（这个数字是从我的税收表上抄来的），但在其他国家的写法可能完全不同：德国是 “1.250.500,75”，法国是 “1 250 500,75”，瑞士是 “1'250'500.75”，日本是 “125,0500.75”。数字完全相同，但是在向 web 应用程序用户展示时使用不同的格式。

因此，问题归结到，当编写一个国际化应用程序时，如何向不同国家的人展示这些数字？当然，解决方案是使用服务器端格式化，这种解决办法非常常见。Java 有一个健壮的格式化库，使数字的格式化变得非常简单。当使用数字在服务器上设置页面时，服务器负责处理这些数字。但是，很多时候数字可能不在服务器上，因此您需要一种方法在客户机上格式化数字，而不需要与服务器会话。

我在这里描述的典型用例如下。您的 web 应用程序中有一个输入字段，要求用户输入他们的薪水。在美国，用户可能以各种格式输入 “$65000”、“65,000”、“65000” 和 “65,000.00”。所有这些数字都是相同的，但是您需要控制这些数字在屏幕上的显示方式，这样才能提供更好的用户体验。您可以在输入数字之后调用服务器，但是如果有许多使用不同格式的数字字段就太麻烦了。此外，如果您可以在客户端处理该问题，并向用户提供即时反馈，那么就不需要这样做了。

因此，我建立了一个空缺，之后我将尝试使用 JavaScript/jQuery 功能填补这一空缺。我的插件将在客户机上提供数字格式化，为其他人提供一种国际化 web 应用程序的方式，且无需与服务器会话。作为额外的功能，我的插件还可以提供反向操作；该插件使开发人员能够解析数字，从格式化的文本字符串中获取数字。这还可以应用于客户机上的数字操作。此外，我将模拟 JavaDecimalFormatter类中的功能，以维护执行数字格式化的客户端代码和标准服务器端方法之间的通用性。

第 1 步结果：我发现了一个插件需求，然后定义了对于该需求我可以填补的空缺。

插件规则

jQuery 团队建立了许多希望插件作者都能遵守的通用规则，为插件用户创建一个通用而可信的环境。考虑到 jQuery 团队比我聪明多了，我没有理由违背这些规则，对不对？出于该原因，我在此列出这些规则，并且在插件的每一步都尽量遵守这些规则。

• 文件命名为 “jquery.<your plug-in name>.js”
  这是有道理的，因为您希望用户查看文件时立即知道这是一个 jQuery 插件以及这是哪个插件。

  检查完毕。我的插件将命名为 “jquery.numberformatter.js”。

• 所有新方法都附加到 jQuery.fn 对象，所有新功能都附加到 jQuery 对象
  现阶段这可能有点难以理解，在下一节我将讨论更多内容，因为这是实际编码过程中最重要的规则。

  检查完毕。我的方法/函数将仅附加到这两个对象。

• “this” 用于引用 jQuery 对象
  这有利于插件作者的编写，它让所有插件作者在引用 “this” 时都知道将从 jQuery 收到哪个对象。

  检查完毕。我将仅使用 “this” 引用 jQuery 对象。

• 插件中定义的所有方法/函数的末尾都必须带有一个 “;”（分号），否则将不利于代码的最小化。
  因为这是最小化 JavaScript 文件的最佳实践，大于最小值会很糟糕，您的插件有可能很快就被抛弃。

  检查完毕。所有的方法/函数都将以 “;” 结尾。

• 除有特别注明外，所有方法都必须返回 jQuery 对象
  jQuery 方法的顺序链 (daisy-chaining) 非常著名，如果您编写打破链条的插件，它就一定会 “打破链条”。

  检查完毕。我的format()方法将返回 jQuery 对象，虽然我的parse()方法没有返回 jQuery 对象，但我在很多地方都注明该函数打破了链条。（毕竟，它不可能返回一个 Number 对象而不打破链条）。

• 您应该总是使用this.each()迭代匹配的元素，这是一种可靠而有效地迭代对象的方式。
  出于性能和稳定性考虑，他们推荐所有的方法都使用它迭代匹配的元素。

  检查完毕。我的方法都将只使用该方法迭代匹配的元素。

• 总是在插件代码中使用 “jQuery” 而不是 “$”
  这很重要，它使与 “$” 有冲突的用户（那些使用另一个 JavaScript 库的用户）能够使用 “var JQ = jQuery.noConflict();” 函数更改他们的 jQuery 别名（pseudonym）。但是，在我查看许多插件时，我发现该规则常常得不到遵守，这太不幸了。如果开发人员需要更改 jQuery 别名，那么很可能意味着该插件要被弃用了。

  检查完毕。在我的插件中，我将仅使用 jQuery 而不是它的别名 “$”。

好了，这些就是在插件代码中必须遵守的规则和建议。真正的问题在于，它们实际上是强制性的，因为如果您不遵守这些插件规则，那么您的插件就得不到广泛应用，而且还会得到不好的反馈。结果该插件很快就没有人使用了，您所花费的时间都将白费。因此，遵守这些规则非常重要。这不仅能帮助您鹤立鸡群，保证您代码的统一性，还能增加插件的成功几率。

第 2 步结果：我将遵守创建 jQuery 插件的所有规则

编写插件

现在可以开始编写代码了！开始编写插件的第一步是确定如何组织您的插件。开始有两种选择：您希望它是一个方法还是一个函数？“它们有区别吗？”您可能会这样问。

正如我上面提到的，方法需要附加到 jQuery.fn 对象，函数需要附加到 jQuery 对象。这样一切都清楚了，不是吗？如果您对 jQuery 相对不太了解，那么可能还不是很清楚。您可以这样考虑。方法使代码能够迭代所有传入插件的选定元素。因此，插件可以接收任何类型的 HTML 元素，由插件决定如何处理每个元素。因此，插件方法可以接收任何 jQuery 选择器，所有从 “p” 到 “#mySpecificPageElement” 的内容。如果您希望插件更加灵活，允许用户传入任何类型的页面元素，那么最好使用方法。插件开发人员应该负责正确地处理所有内容。相比之下，函数不使用任何选定元素作为参数。函数可以简单地应用于整个页面。这也由插件开发人员负责处理，开发人员必须定义他们希望与插件交互的页面元素，并忽略其他元素。让我们在代码中看看不同之处。

详情了解:http://www.jb51.net/article/23854.htm