是否该使用jQuery插件
原文地址
?? ?
?? ? ?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。我们甚至会考虑如何发布插件。插件中出现任何警告都会将你的插件排除在考虑之外。You get what you pay for, and because you’re probably paying nothing, you should be willing to cut any one a bit of slack.
?? ? ?如果你很幸运,有多个插件供选择,这些警告条例可以帮助你缩小选择。但是,即使只有一个选择,如果你看到太多的警示还是放弃的好。可以提前减少自己的头痛。
4.奇怪的选项或参数语法
?? ??在使用jQuery的时候,开发工程师关心的是函数如何接受参数。如果一个插件开发人员使用特殊的语法,有理由相信他们没有太多的jQuery或JavaScript的编程经验。
?? ??有些插件接受一个jQuery对象作为一个参数,但不允许链式使用该对象,例如,$.myPlugin( $('a') );,而不是$('a').myPlugin();这是一个很大的警告。
绿色标志将是这种格式...
运行中的jsPerf。
13.跨浏览器测试
?? ??如果一个插件有很多CSS,一定要在所有你希望支持的浏览器测试样式。记住CSS可以来自外部样式表和内部JavaScript。
?? ??即使插件没有任何CSS,无论如何要在所有浏览器上检查JavaScript错误(至少在你支持的IE浏览器的最早版本)。jQuery的核心已经处理了大多数跨浏览器问题,但插件往往使用一些的数量纯JavaScript,这往往会打破旧浏览器的规则。
14.单元测试
?? ? ?最后,进一步考虑跨浏览器测试--单元测试。单元测试是测试组件插件的简单方法,支持任何浏览器或平台。如果该插件作者的下载包里已经包括了单元测试,可以打赌,这款插件能在所有跨浏览器和平台上工作。
?? ? ?不幸的是,极少数插件才包括单元测试数据,但这并不意味着你不能使用QUnit plug-in执行自己的单元测试。
?? ? ?用最小的设置,测试是否该插件的方法返回了预期结果。只要有一个测试失败,不要在这个插件上浪费你的时间。在大多数情况下,执行单元测试有点浪费时间,但QUnit可以帮助你确定插件的质量。QUnit的使用帮助信息,见本教程
??
QUnit运行单元测试的一个例子。
结论 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?? ? ?当评估一个jQuery插件的质量,先评估代码质量。是否JavaScript有优化、没有错误?是否CSS已经调整并有效?是否mark-up的命名有语义,足够灵活?这些问题都归结为最重要的问题:这个插件很容易使用?
?? ? ?jQuery的核心进行了优化和错误检查,支持它的不仅有核心团队成员,还有整个jQuery社区。虽然用同样的标准衡量jQuery插件不公平,但至少应该有一些相同的审查标准。
相关文章 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
你可能对以下文章也有兴趣:
??Commonly Confused Bits Of jQuery
?Spicing Up Your Website With jQuery Goodness
?jQuery and JavaScript Coding: Examples and Best Practices
?45 Useful jQuery Techniques and Plugins?