你真的需要一个jQuery插件吗

来源： philip@lamppr

jQuery的插件提供了一个很好的方法，节省了时间和简化了开发，避免 程序员从头开始编写每个组件。但是，插件也将一个不稳定因素引入代码中。一个好的插件节省了无数的开发时间，一个质量不好的插件会导致修复错误的时间比实际从头 开始编写组件的时间还长。

幸运的是，人们通常具有各种不同的插件可供选择。但是，即使你只用一个，也要弄清楚它是否值得使用的。永远不要在你的代码库中引入错误的代码。

你需要一个插件吗？

首先是要弄清楚究竟你是否需要一个插件。如果不需要，既可以节省文件大小，又可以节省自己的时间。

1.自己写是不是更好？

如果功能很简单，就自己写。jQuery的插件经常会捆绑各种功能，这可能矫枉过正。在这种情况下，手写任何简单的功能往往更有意义。当然，要对所涉及的工作量有所衡量。

举例来说，如果你需要更先进的功能，jQuery UI的手风琴是很好的选择。但如果你只需要打开和关闭面板。如果你还没有在你的网站上使用jQuery UI上，考虑jQuery的 slideToggle()或animate()。

2.是不是你已经在使用一个类似的插件？

在发现某个插件不能解决你需要的一切，寻找另一个插件来弥补，十分有诱惑。但在同一个应用程式包括两个类似的插件，肯定是一个臃肿的 JavaScript。你能找到一个插件，包括你所有的需求么？如果没有，你能扩展其中一个插件达到你所需要涵盖的一切吗？同样，在决定是否扩展一个插件，权衡的是好处和开发时间。

举例来说，jQuery的灯箱是在画廊里显示弹出的照片很好的方法， simpleModal是个很棒的方法向用户显示模式信息。但是，为什么这两种方式你的网站都使用？你可以轻松地扩展一个覆盖这两种需求。更好的是，找到一个插件，它涵盖一切，诸如Colorbox。

3.需要JavaScript？

在某些情况下，JavaScript是没有必要的。CSS的伪选择器，例如:hover和CSS3 transitios功能，可以涵盖各种动态效果，速度远远超过了JavaScript的解决方案。此外，许多插件只提供样式;感觉用markup和CSS的可能更好些。

如果你需要展示动态内容，要求有条件的提示，jQuery Tooltip是必不可少的。但是，如果你需要提示的地方只有几个，最好是用纯CSS（见本例）。静态提示信息，你可以更进一步利用CSS3过渡进行动画效果，但不要忘记在该动画将只在某些 浏览器有效。

当审查任何插件，一系列的警告标志表明了这款插件的质量较差。在这里，我们将看看插件的方方面面，从JavaScript到CSS到mark- up。我们甚至会考虑如何发布插件。插件中出现任何警告都会将你的插件排除在考虑之外。如果你很幸运，有多个插件供选择，这些警告条例可以帮助你缩小选择。但是，即使只有一个选择，如果你看到太多的警示还是放弃的好。可以提前减少自己的头痛。

4.奇怪的选项或参数语法

在使用jQuery的时候，开发工程师关心的是函数如何接受参数。如果一个插件开发人员使用特殊的语法，有理由相信他们没有太多的jQuery或JavaScript的编程经验。

有些插件接受一个jQuery对象作为一个参数，但不允许链式使用该对象，例如，$.myPlugin( $(‘a’) );，而不是$(‘a’).myPlugin();这是一个很大的警告。

代码：

 $('.my-selector').myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
 });

 $('.my-selector').myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
 });

 $.myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
 }, $('.my-selector'));

 $.myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
 }, $('.my-selector'));

5.很少或几乎没有文档

没有文档，一个插件的使用就非常困难，因为这是寻找问题答案想到的第一个地方。文件有各种格式，适当的文件是最好的，但良好的代码注释可以一样好。如果没有文档，或者仅仅是在博客发表的一个简单例子，那么你可能要考虑其他选择。良好的文档表明该插件的作者关心你这样的用户。它还表明，他们已经研究过其他插件，知道好文档的价值。

6.可怜的支持记录

缺乏支持，表示发现问题时将难以得到帮助。更引人关注的是，它表明该插件有段时间没更新了。软件开源的一个好处是它吸引很多眼球，帮助你调试和改进。如果作者没有谈到这些人，该插件将不会更新。

你考虑的插件最后一次更新是在什么时候？最后一次回答留言是什么时候？虽然不是所有的插件都需要像jQuery plug-ins 这个网站一样有个强有力的支持系统。警惕那些从来没有更新的插件。

拥有历史技术支持记录，作者回应bug或者将强需求，是一个绿色标志。拥有一个支持论坛进一步表示这个插件有很好的支持，即使不是作者至少有论坛给你解决问题。

7.没有压缩版本

虽然事一个相当小的警示，如果插件的创建者并没有根据源代码提供一个压缩版本，那么他们可能不会太关注表现。当然，你可以自己去压缩，但这个警示不是讨论浪费时间的问题：这暗示了插件可能包含更为严重的性能问题。

另一方面，提供压缩，打包和gzipped版本下载是一个迹象。

8.需要奇怪的Mark-up

如果一个插件需要mark-up，那么这个mark-up应是高质量的。它应符合语义semantic sense而且足够灵活。除了很烂的前端技术，奇怪的mark-up也会使集成变得更加困难。一个好的插件插入几乎任何涵盖了任何你常用mark-up；使用一个坏插件还不如去跳火圈。

在某些情况下，严格的mark-up是必要的，所以应该允许在一定范围内的使用。基本上，更具体的功能，更具体的mark-up需要。完全灵活的mark-up是从任何自然下降jQuery的选择是最简单的集成。

9.过度使用CSS

许多的jQuery插件包括了CSS，css的质量和JavaScript重要是一样的。过多的CSS肯定是一个坏标志。但什么是“过度”取决于插件的目的。注重显示，如灯箱或UI插件，比简单动画驱动的插件要更多的CSS。良好的CSS样式，让程序更容易修改以适应你的主题风格。

10.没有其他人使用它

jQuery的用户数量庞大，最体面的插件将可能对某事有他们写的，即使它是一个“50 jQuery [fill in the blank]”。比如你做了一个简单的谷歌搜索插件，你搜索结果很少，你可能要考虑其他选择，除非该插件是全新的，或者你会找个专业写插件的工程师来修改它。

11.使用和观察

测试插件最好的方式是简单地在服务器上运行，看看结果。首先，它是否破坏了一些规则？请务必看看JavaScript的代码段。如果插件包括一个样式表，看看每个网页的布局和样式上的错误。

此外，请问该插件的效果如何？如果它运行速度很慢或网页载入相当滞后，还是考虑其他插件吧。

12.使用JSPerf进行绩效考核

把你的插件展现效果提高到新的水平，使用JSPerf进行测试。Benchmarking会运行的一组操作多次，然后返回平均执行时间。JSPerf提供了一个简单的方法来测试一个插件运行的速度有多快。这是挑选两个几乎相同插件的重要的方式来。

13.跨浏览器测试

如果一个插件有很多CSS，一定要在所有你希望支持的浏览器测试样式。记住CSS可以来自外部样式表和内部JavaScript。

即使插件没有任何CSS，无论如何要在所有浏览器上检查JavaScript错误（至少在你支持的IE浏览器的最早版本）。jQuery的核心已经处理了大多数跨浏览器问题，但插件往往使用一些的数量纯JavaScript，这往往会打破旧浏览器的规则。

14.单元测试

最后，进一步考虑跨浏览器测试–单元测试。单元测试是测试组件插件的简单方法，支持任何浏览器或平台。如果该插件作者的下载包里已经包括了单元测试，可以打赌，这款插件能在所有跨浏览器和平台上工作。不幸的是，极少数插件才包括单元测试数据，但这并不意味着你不能使用QUnit plug-in执行自己的单元测试。

用最小的设置，测试是否该插件的方法返回了预期结果。只要有一个测试失败，不要在这个插件上浪费你的时间。在大多数情况下，执行单元测试有点浪费时间，但QUnit可以帮助你确定插件的质量。

结论

当评估一个jQuery插件的质量，先评估代码质量。JavaScript是否有优化、没有错误？CSS是否已经调整并有效？mark-up的命名是否有语义，足够灵活？这些问题都归结为最重要的问题：这个插件很容易使用？

jQuery的核心进行了优化和错误检查，支持它的不仅有核心团队成员，还有整个jQuery社区。虽然用同样的标准衡量jQuery插件不公平，但至少应该有一些相同的审查标准。

相关文章

• 10 个 jQuery 图表插件推荐
• 24个最受欢迎的jQuery画廊和幻灯片插件
• 推荐1个jQuery屏幕键盘插件
• 推荐10个不错的jQuery插件
• 10个刚出炉的jQuery特效插件