如何判断一款jQuery插件的好坏【转】

标签: jquery 插件 | 发表时间:2014-03-11 08:57 | 作者:zytszone
出处:http://www.iteye.com

在我们开发的时候,无论是JavaScript的开发人员还是jQuery的开发人员,都会询问一个问题,那就是:

 

我怎么知道一款插件是好还是不好?

 

当然这通常要根据你要解决的问题来判断插件的好坏,但是在一个好的jQuery插件排名系统中,这里有几个你需要注意的地方,可能会帮助你来判断这款插件的好坏。

 

假设我们有下面一段代码:

 

$.fn.myplugin = function () {
  var me = $(this).each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });

  return me;
};

 有可能在事件触发的时候,一段代码可以很好的工作,但是你很难有大量的时间来仔细看每一段代码,但是你需要作出决定,你是否可以使用这段代码来解决你的实际问题。

 

 

在上面这段代码中,就有好几个非常不好的写法。如果有些写法你也使用了的话,我可能会觉得你并没有领会jQuery的精髓,而且你没有很好的对代码进行调优。

 

内联返回

$.fn.myplugin = function () {
  var me = $(this).each(fn);
  return me;
};

 应该写成: 

$.fn.myplugin = function () {
  return $(this).each(fn);
};

  me变量不会被重复使用的时候,你无需创建它。 

双重jQuery

$.fn.myplugin = function () {
  return $(this).each(fn);
};

 在这段插件代码的上下文中,假如有一个方法添加到了.fn上,那么this指向了jQuery实例,而不是DOM元素。因此如果我们用实际的元素来代替this的话,上面的代码你可以看到,它等同于:

 

$.fn.myplugin = function () {
  return $($('div.foo')).each(fn);
};

 在实际的插件中(不是jQuery的回调),this指向的是jQuery本身,所以我们可以直接访问jQuery的方法:

$.fn.myplugin = function () {
  return this.each(fn);
};

 

 

each返回了什么? 

 

$.fn.myplugin = function () {
  return this.each(function () {
    return $(this).bind('someEvent', fn);
  });
};

 jQuery的each轮询不会收集任何信息,它只是个简单的循环。它的结果值是包含原有集合的jQuery,你不能通过返回值来改变它。所以在上述代码中,return是不必要的。

$.fn.myplugin = function () {
  return this.each(function () {
    $(this).bind('someEvent', fn);
  });
};

 

 

each的浪费使用

 

$.fn.myplugin = function () {
  return this.each(function () {
    $(this).bind('someEvent', fn);
  });
};

 

如果在一开始就移除了所有不整齐的代码,那么下一步是显而易见的。如果没有的话,那么想想下面两个问题:

  • each返回的是什么?jQuery集合。
  • bind返回的是什么? jQuery集合。
    当我们在each元素上运行bind方法时,而且只做这一个方法时,意味着返回是没有区别的。所以我们不需要each,这里直接返回bind就可以了。 
    $.fn.myplugin = function () {
      return this.bind('someEvent', fn);
    };

并且记住,在插件里面,this指向的是jQuery的实例,而不是元素,因此我们不需要$()。 

 

 

转载自  http://www.gbtags.com/gb/share/2029.htm

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 插件] 推荐:

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

常用JQuery插件整理

- xxg - 博客园-首页原创精华区
  虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来.   jquery.HooRay(哈哈,自己写的插件是必须有的).   jquery UI(官方的UI插件,功能很多,但我只用少数几个).   artDialog(很欣赏这个插件,又强大又美观).

2010年最佳jQuery插件

- seenxu - 博客园新闻频道
在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

jquery Dialog - 弹出窗插件

- Bloger - 博客园-首页原创精华区
    分享几个jquery Dialog弹出窗插件.     1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.

jQuery 插件autocomplete 应用

- Bloger - 博客园-首页原创精华区
  项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能.   autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件).

jquery插件的开发

- - CSDN博客推荐文章
插件的概念大家并不陌生了,插件可以很方便我们进行代码开发,大大节约了我们的开发时间. 以前我用jquery都是自己洗一大把的代码,复用性不高维护也不方便. 因此自己学着开发了2个简单的jquery插件. 下面先看下jquery插件的分类. jQuery开发分为两种:. 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法.

jQuery 绘图插件:jqPlot

- - 我爱水煮鱼
jqPlot 是一个 jQuery 这个 JavaScript 框架的绘图插件, jqPlot 能够产生很多漂亮优雅的线图和条形图. 默认最优设置,非常易于使用. jQuery 绘图插件:jqPlot. 使用 jqPlot 基本可以控制图表的每一个部分,如网格的背景,字体和大小,等等,并且 jqPlot 自己本身也有插件支持系统,所以它可以很容易扩展新的图表类别和选项.

jQuery 模块介绍与 jQuery 插件的深度模块化

- zhibin - 岁月如歌
大名鼎鼎的 jQuery 就不多介绍了,详细介绍推荐官网:jquery.com. 阮一峰最近整理的文章也不错,推荐:jQuery 设计思想, jQuery 最佳实践. jQuery 是 DOM 操作类库,其核心功能是找到 DOM 元素并对其进行操作. 拿 jQuery 与 YUI, Dojo 等框架相比是不公平的,就如拿轮胎和汽车相比一样.