如何判断一款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

 

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


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—