`
zytszone
  • 浏览: 10647 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

 

分享到:
评论

相关推荐

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    推荐10款jQuery插件.zip

    推荐10款jQuery插件.zip jQuery标签插件 jQuery表单插件 jQuery File Upload-jQuery上传插件 jquery.barrager.js专业的网页弹幕插件 jquery定时器 jQuery记录历史搜索框 jQuery密码强度提示插件 jquery实现宽度...

    jquery 360度旋转插件

    jQuery,作为一款轻量级、功能强大的JavaScript库,提供了丰富的插件来实现各种交互效果,而“jQuery 360度旋转插件”正是其中的一个典型代表。这个插件,名为elbeanio-jquery.tagsphere,以其易用性和灵活性,为...

    jQuery旋转插件jqueryrotate.zip

    jQuery旋转插件jqueryrotate是一款jquery.rotate旋转插件。

    jQuery插件,jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...

    15款jQuery Mobile插件

    15款jQuery Mobile插件15款jQuery Mobile插件

    jquery插件库-jquery抽奖插件.zip

    jQuery,作为一款强大的JavaScript库,极大地简化了DOM操作、事件处理、动画设计等任务,深受Web开发者喜爱。在网页设计领域,jQuery抽奖插件是实现互动体验、提升用户体验的重要工具。本篇文章将详细探讨jQuery抽奖...

    8款jquery插件打包

    8款jquery插件打包8款jquery插件打包8款jquery插件打包

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    很好用的Jquery插件

    4. **滑动插件如Slick**:Slick是一款高效的响应式图片滑块插件,支持无限循环、多列布局和自定义动画效果。它可以帮助你轻松创建吸引人的图片展示区,适应各种屏幕尺寸。 5. **AjaxForm**:这个插件简化了表单的...

    jQuery插件jQuery插件

    jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件

    jquery插件

    jQuery,作为一款强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理以及动画制作等任务,是web前端开发中不可或缺的工具。尤其对于初学者和经验丰富的开发者而言,jQuery提供了一种高效、简洁的方式来...

    Jquery插件学习

    这个“Jquery插件学习”资料是针对初学者的一个入门实例,旨在帮助理解如何使用和创建jQuery插件。 首先,jQuery插件是扩展jQuery功能的一种方式,它们通常包含了对DOM元素的操作、复杂的效果实现或特定的事件处理...

    等高卡片布局jQuery插件

    为了解决这个问题,这款jQuery插件应运而生,它的目标是确保所有卡片具有相同的高度,从而创建出整齐、一致的视觉效果。 jQuery库是JavaScript的一个强大框架,它简化了DOM操作、事件处理、动画设计以及Ajax交互等...

    jquery 插件

    当你调用一个jQuery插件时,实际上是调用了jQuery对象上的方法,这样就可以对选中的DOM元素进行操作。 ```javascript (function($){ $.fn.myPlugin = function(options) { // 插件的实现代码 }; })(jQuery); ```...

    Ddreamweaver的jquery插件

    Ddreamweaver jquery 插件 Ddreamweaver jquery 插件Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件

Global site tag (gtag.js) - Google Analytics