对未使用的jQuery插件的14种可能解释

由于这么多人开发jQuery插件，由于缺乏更好的语言，遇到简单的可怕情况并不罕见。没有示例或文档，插件没有遵循最佳实践等。但你是幸运儿之一:本文将详细介绍你必须避开的陷阱。

对于经常使用Nettuts+的人来说，jQuery并不陌生。Jeffrey Way的“在30天内学习jQuery”（以及这里和其他地方的各种其他教程）非常棒，它将我们所有人都引向了Sizzle支持的Awesomesauce。在所有的宣传中（以及开发人员和浏览器供应商采用JavaScript的巨大飞跃中），出现了大量插件。这是jQuery成为最受欢迎的JavaScript库的部分原因！唯一的问题是他们中的许多人不是很好。

在本文中，我们将不再专门关注JavaScript，而是更多地关注插件交付的最佳实践。

您没有制作jQuery插件。有些模式或多或少被认为是创建jQuery插件的“正确方式”。如果您不遵循这些惯例，您的插件可能会...太可怕了。考虑一种最常见的模式:

（function（$，window，undefined）{ $。fn。my plugin = function（opts）{ var defaults = {//设置选项的默认值} //使用用户选项var options = $，扩展选项的默认值。extend（defaults，opts | | { }）；return this . each（function（）{//jQuery chainability//do plugin stuff }）；}）（jQuery、window）；首先，我们创建一个自调用匿名函数来避免使用全局变量。我们传入$ window和undefined。调用自调用函数的参数是jQuery和window；没有为undefined传递任何内容，因此如果我们决定在插件中使用undefined关键字，“undefined”实际上将是未定义的。

$作为jQuery传递；我们这样做是为了确保$仍然可以完全引用匿名函数之外的其他内容，例如Prototype。

传递全局可访问窗口对象的变量允许通过缩小过程压缩更多代码（您应该这样做）。

接下来，我们使用jQuery插件模式$。这是注册插件以使用$（选择器）的方法。方法（）格式。它只是以新的方式扩展了jQuery的原型。如果您想创建一个在jQuery对象上定义函数的插件，请直接添加它，如下所示:

$.plugin name = function（options）{//extend options，dopluginstuff}这种类型的插件无法链接，因为定义为jQuery对象属性的函数通常不会返回jQuery对象。例如，考虑以下代码:

$.splitInHalf = function（stringToSplit）{ var length = stringToSplit . length；var string array = stringToSplit . split（stringToSplit【math . floor（length/2）】）；返回stringArray}这里，我们返回一个字符串数组。简单地将其作为数组返回是有意义的，因为这可能是用户想要使用的（如果他们愿意，可以轻松地将其包装在jQuery对象中）。相反，考虑以下人工示例:

$.getOddEls = function（jq collection）{//return jq collection . filter（function（index）{ var I = index+1；返回（索引% 2！= 0);});}在这种情况下，用户可能希望从$返回jQuery对象。getOddEls因此，我们返回filter方法，该方法返回由传递的函数定义的jQuery集合。一个很好的经验是将返回的元素包装在jQuery函数中，尤其是在它们可以链接的情况下；如果要返回数组、字符串、数字、函数或其他数据类型，请打开它们。

2-您没有记录您的代码（正确）。可以说，在发布代码时，您可以做的最重要的事情是添加必要的文档。您向开发人员解释的内容与代码实际做的事情或能够做的事情之间的差距是用户不想浪费时间来弄清楚代码的来龙去脉。

文档是一种没有任何硬性规定的实践；然而，人们普遍认为你的文档越多（组织得越好）越好。

这个过程应该既是内部实践（在代码中/贯穿整个代码）也是外部实践（在wiki或自述文件中彻底解释每个公共方法、选项和多个用例）。

3-您没有提供足够的灵活性或定制性。最流行的插件提供对用户可能想要控制的变量的完全访问（大多数插件被称为“选项”对象）。它们还可能提供插件的许多不同配置，以便它可以在许多不同的上下文中重用。例如，让我们考虑一个简单的滑块插件。用户可能想要控制的选项包括动画的速度、类型和延迟。

最好还能让用户访问添加到插件插入或操作的DOM元素中的类名/ID名。但除此之外，他们可能希望在每次幻灯片更改时或幻灯片更改回开头时访问回调函数（一个完整的“循环”）。

让我们考虑另一个例子:调用API的插件应该提供对API返回的对象的访问。以下面的简单插件概念为例:

$。fn。get Flickr = function（opts）{ return this。each（function（）{//jQuery chainability var defaults = {//设置默认选项CB:function（data）{ }，flickrUrl : //某个API调用的某个默认值} //使用用户选项var options = $，扩展默认选项。extend（defaults，opts | | { }）；//调用异步函数，然后调用回调//传入返回的api对象$。Ajax（flickrUrl，function（data returned）{ options . CB . call（this，data returned）；});});}这使我们能够做到以下几点:

$（选择器）。get Flickr（function（fdata）{//Flickr数据在fdata对象中}）；促进这一点的另一种方法是提供“挂钩”作为一种选择。从jQuery 1.7.1及更高版本开始，我们可以使用。on（event name，function（）{ }）在插件调用后将行为分离到它们自己的函数中。例如，使用上面的插件，我们可以将代码更改为如下所示:

$。fn。get Flickr = function（opts）{ return this。each（function（I，El）{ var $ this = El；var defaults = { //设置默认选项单击URL:& quot；http://some URL . com & quot；//某个API调用的某个默认值} var options = $。extend（defaults，opts | | { }）；//调用异步函数，然后调用回调//传入返回的api对象$。Ajax（flickrUrl，function（data returned）{//do something $ this . trigger（& quot；回拨& quotdata returned）；}).error（function（）{ $ this . trigger（& quot；错误& quotdata returned）；});});}这允许我们调用getFlickr插件并链接其他行为处理程序。

$（选择器）。getFlickr（opts）。打开（& quot回拨& quot，function（data）{//do stuff }）。打开（& quot错误& quot，function（）{//处理错误}）；您可以看到提供这种灵活性是绝对重要的；插件的操作越复杂，可用的控件就越复杂。

4-您需要太多已配置的。第三个建议是插件的操作越复杂，可用的控件就越复杂。可用。然而，一个很大的错误是为插件功能提供了太多的选项。例如，基于UI的插件最好应该具有不带参数的默认行为。

$（选择器）。my plugin（）；当然，有时这是不现实的（例如，用户可能正在获取特定的提要）。在这种情况下，你应该为他们做一些繁重的工作。有许多方法可以将选项传递给插件。例如，假设我们有一个简单的推文检索插件。tweet检索器应该有一个默认行为和一个必需选项（您想从中获取的用户名）。

$（选择器）。fetch weets（& quot；jcutrell & quot);例如，默认情况下，您可能会抓取一条推文，将其包装在段落标记中，然后用此html填充选择器元素。这是大多数开发人员所期望和欣赏的。细粒度的选项应该是:选项。

5-您将外部CSS规则与内联CSS规则混合在一起。当然，根据插件的类型，如果它是高度基于UI的，则不可避免地必须包含CSS文件。一般来说，这是一个可以接受的解决问题的方法；大多数插件都与图像和CSS捆绑在一起。但是不要忘记第二点——文档还应该包括如何使用/引用样式表和图像。开发人员不想浪费时间查看源代码来弄清楚这些事情。

话虽如此，使用注入样式（可以通过插件选项高度访问）或基于类/ID的样式绝对是最佳实践。这些id和类也应该可以通过前面提到的选项进行访问。但是，内联样式会覆盖外部CSS规则；不鼓励将两者混合使用，因为开发人员可能需要很长时间才能弄清楚为什么插件创建的元素不符合他们的CSS规则。请在这些情况下做出最佳判断。

6-证据在布丁中而没有提供示例:如果您不能提供一个实际的示例来说明您的插件如何使用所附代码，人们很快就会放弃使用您的插件。就这么简单。不要偷懒。

一个很好的示例模板:

“hello world”示例-通常是通过最少配置/选项的插件调用，以及一些更复杂的html/css示例-通常包含多个选项的完整功能的示例集成示例-如果有人可能将另一个插件与您的插件一起使用，您可以在此展示如何做到这一点。这也会给你在开源开发领域加分。值得称赞。）7-您的代码与他们的jQuery版本不匹配，与任何优秀的代码库一样，jQuery版本会随着每个版本的发布而增长。即使不支持，大多数方法仍将保留。但是，增加了新方法；一个完美的例子是。on（）方法，这是一种新的jQuery事件委托集成解决方案。如果您编写一个使用。在（）上，使用jQuery 1.6或更早版本的人会很倒霉。现在，我并不是建议您为最小公分母编码，但是在您的文档中，一定要解释您的插件支持哪个版本的jQuery。如果您引入了一个支持jQuery 1.7的插件，那么即使发布了1.8，您也应该强烈考虑保持对1.7的支持。您还应该考虑利用jQuery中新的/更好的/更快的特性。

8-更改日志在哪里？如果你还没有学会如何使用版本控制，是时候咬紧牙关了。

除了将jQuery版本支持/兼容性作为文档的一部分之外，您还应该执行版本控制。版本控制（特别是通过GitHub）在很大程度上是社交编码的发源地。如果您正在开发一个jQuery插件，并希望最终将其发布到官方存储库中，无论如何它都必须存储在GitHub存储库中；如果你还没有学会如何使用版本控制，是时候咬紧牙关了。版本控制有许多好处，所有这些都超出了本文的范围。但其中一个核心好处是，它允许人们看到您所做的更改、改进和兼容性修复以及您何时做出这些更改、改进和修复。这也为您编写的插件的贡献和定制/扩展打开了大门。

其他资源Git书籍使用Git进行简单的版本控制。使用Git、GitHub和SSH的完美工作流程来熟练使用Git（$ 19）Git cast 9-没有人需要您的插件。这个世界不需要另一个滑块插件。

好吧，我们在这里忽略它已经足够长的时间了:一些“插件”是无用的或太肤浅而不能被称为插件。这个世界不需要另一个滑块插件！但是，需要指出的是，内部团队可能会开发自己的插件供自己使用，这是完全可能的。但是，如果您想将您的插件推向社交编码领域，请找一个理由来编写更多代码。俗话说，没有理由多此一举。相反，用别人的方向盘造一辆赛车。当然，有时有新的更好的方法来做已经做过的同样的事情。例如，如果您使用更快的技术或新技术，您可能会编写一个新的滑块插件。

10-您没有提供缩小版。这很简单:提供一个缩小版本的代码。这使得它更小更快。它还确保您的Javascript在编译时不会出错。当您压缩代码时，不要忘记提供未压缩的版本，以便您的同行可以查看底层代码。对于各种经验水平的前端开发人员来说，都有免费且便宜的工具。

1你的代码太聪明了。当你写一个插件时，它的目的是供其他人使用，对吗？因此，最有效的源代码是高度可读的。如果您正在编写无数巧妙的单行lambda样式的函数，或者您的变量名没有语义，那么当不可避免地出现错误时，将很难调试它们。不要写短变量名以节省空间，而是遵循提示9（缩小！建议在）。这是好文档的另一部分；一个好的开发人员应该能够检查您的代码并理解其目的，而无需付出太多努力。

此外，如果您发现自己在查阅文档以记住自己看起来奇怪的代码在做什么，您可能还需要更简洁、更具解释性。将每个函数的行数限制为尽可能少；如果它们扩展到三十行或更多行，它们可能具有代码味道。

11.你不需要jQuery》尽管我们都喜欢使用jQuery，但重要的是要了解它是一个库，并且成本非常小。一般来说，您不需要太担心jQuery选择器的性能。别惹人讨厌，你会没事的。JQuery是高度优化的。也就是说，如果您需要jQuery（或插件）的唯一原因是在DOM上执行一些查询，您可以考虑完全删除抽象并坚持使用普通的JavaScript或Zepto。

13-您没有使用员工自动完成流程。句号。

Grunt是一款“用于JavaScript项目的基于任务的命令行构建工具”，最近在Nettuts+上进行了详细介绍。它允许你做这样的事情:

Grunt init:jquery这一行（在命令行上执行）将提示您一系列问题，例如标题、描述、版本、git存储库、许可证等。这些信息有助于自动化设置文档、许可证等的过程。

Grunt不仅仅是为您制作一些定制的模板代码；它还提供了内置工具，例如code linter JSHint，只要安装PhantomJS（由Grunt运行），它就可以自动为您执行QUnit测试。通过这种方式，您可以简化工作流程，因为测试在保存后会立即在终端中运行。

14-你没有测试它，顺便说一下-你测试了你的代码，不是吗？如果不是，您如何确保/声明您的代码按预期工作？手动测试有它的位置，但是如果你发现自己每小时刷新浏览器无数次，那么你就做错了。考虑使用QUnit、Jasmine甚至摩卡等工具。

在GitHub上合并拉取请求时，测试特别有用。您可以要求所有请求提供测试，以确保新的/修改后的代码不会破坏您现有的插件。

一些有用的资源只是告诉你做错了什么，我们不会给你带来任何好处。这里有一些链接可以帮助你回到正确的道路上来！

30天学会jQuery基本jQuery插件模式-Smashing Magazine使用继承模式来组织由大规模jQuery应用程序插件创建的官方jQuery文档。jQuery模板OOP jQuery插件模板编写高级jQuery插件的10个编码技巧结语如果您正在编写jQuery插件，远离上面列出的陷阱非常重要。我是否错过了插件运行不正常的任何关键迹象？

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：对未使用的jQuery插件的14种可能解释 https://zhujicankao.com/109096.html