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

在我们开发的时候,无论是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

相关推荐