影响jQuery使用的14个方面

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

  你需要一个插件吗?

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

  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插件不公平,但至少应该有一些相同的审查标准。

(0)

相关推荐

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquery-1.9.0.js'></script

  • jquery $.trim()方法使用介绍

    $.trim(str) 返回:string: 说明:去掉字符串首尾空格. 示例: 先看个错误代码错误代码: 复制代码 代码如下: <input type="text" name="" id="results" value=""/> var content = $('#content').val(); if(content.trim() == '') alert('空'); 上面的写法在firefox下不会报错,但在

  • jquery easyui使用心得

    第一步下载jquery easyui 下载地址:http://www.jb51.net/codes/70218.html 第二步创建Java web项目 第三步导入相关的文件..目录结构如下 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" rel="ext

  • 影响jQuery使用的14个方面

    幸运的是,人们通常具有各种不同的插件可供选择.但是,即使你只用一个,也要弄清楚它是否值得使用的.永远不要在你的代码库中引入错误的代码. 你需要一个插件吗? 首先是要弄清楚究竟你是否需要一个插件.如果不需要,既可以节省文件大小,又可以节省自己的时间. 1.自己写是不是更好? 如果功能很简单,就自己写.jQuery的插件经常会捆绑各种功能,这可能矫枉过正.在这种情况下,手写任何简单的功能往往更有意义.当然,要对所涉及的工作量有所衡量. 举例来说,如果你需要更先进的功能,jQuery UI的手风琴是很

  • jQuery数据类型小结(14个)

    jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors.Events等. 1. String String最常见,几乎任何一门高级编程语言和脚本语言中都支持,比如"Hello world!"即字符串.字符串的类型为string.比如 var typeOfStr = typeof "hello world";//typeOfStr为"string&quo

  • jQuery使用技巧简单汇总

    1.使用最新的jquery版本 觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了.建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本. 还有个建议是使用google的cdn上的jquery文件,加载速度更快.猛击Google Libraries API 进入查看. 复制代码 代码如下: <!-- Include a specific version of

  • PHP中的MYSQL常用函数(php下操作数据库必备)

    1.mysql_connect()-建立数据库连接 格式: resource mysql_connect([string hostname [:port] [:/path/to/socket] [, string username] [, string password]]) 例: $conn = @mysql_connect("localhost", "username", "password") or die("不能连接到Mysql

  • php+mysql开发中的经验与常识小结

    本文总结了php+mysql开发中的经验与常识.分享给大家供大家参考,具体如下: 一.基础规范 (1)尽量使用 InnoDB 存储引擎 支持事务.行级锁.并发性能更好,CPU 及内存缓存页优化得当,资源利用率更高 (2)必须使用 UTF8 字符集 无需转码,无乱码风险 (3)数据表.数据字段必须加入中文注释 N 年后谁知道这个 r1,r2,r3 字段是干嘛的 (4)尽量不要使用存储过程.视图.触发器.Event 高并发大数据的互联网业务,架构设计思路是"解放数据库 CPU,将计算转移到服务层&q

  • PHP设计模式概论【概念、分类、原则等】

    本文实例讲述了PHP设计模式.分享给大家供大家参考,具体如下: 1. 设计模式 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样. 模式的经典定义:每个模式都描述了一个在我们的环境中不断出现的问题,然后描述了该问题的解决方案的核心,通过这种方

  • laravel添加角色和模糊搜索功能的实现代码

    一.添加角色 1.1 角色添加显示页面路由(get) // 角色添加页面显示 Route::get('role/add', 'RoleController@addindex') -> name('admin.role.add'); 1.2 角色添加页面控制器(get) public function addindex () { return view('admin.role.add'); } 1.3 角色添加模版 <!DOCTYPE HTML> <html> <head

  • laravel结合vue添加权限的实现示例

    目录 一.添加(权限)节点 1.1.引入vue 1.2.添加模版(vue.jquery) 1.3.添加节点控制器逻辑 1.4.模型中定义修改器 1.5.效果: 一.添加(权限)节点 1.1.引入vue 使用vue进行界面管理,实现添加功能 我们在这个目录下存入vue.js: 1.2.添加模版(vue.jquery) resources/admin/node/create.blade.php: <!--_meta 作为公共模版分离出去--> <!DOCTYPE HTML> <h

  • 14个有用的Jquery技巧分享

    1.通过方法返回Jquery对象实例 用 var someDiv = $('#someDiv').hide();  代替 var someDiv = $('#someDiv');  someDiv.hide(); 2.使用find来查找 用 $('#someDiv').find('p.someClass').hide();   代替 $('#someDiv p.someClass').hide();因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最

  • 分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa

随机推荐