在我们开发的时候,无论是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....
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
推荐10款jQuery插件.zip jQuery标签插件 jQuery表单插件 jQuery File Upload-jQuery上传插件 jquery.barrager.js专业的网页弹幕插件 jquery定时器 jQuery记录历史搜索框 jQuery密码强度提示插件 jquery实现宽度...
jQuery,作为一款轻量级、功能强大的JavaScript库,提供了丰富的插件来实现各种交互效果,而“jQuery 360度旋转插件”正是其中的一个典型代表。这个插件,名为elbeanio-jquery.tagsphere,以其易用性和灵活性,为...
jQuery旋转插件jqueryrotate是一款jquery.rotate旋转插件。
jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...
15款jQuery Mobile插件15款jQuery Mobile插件
jQuery,作为一款强大的JavaScript库,极大地简化了DOM操作、事件处理、动画设计等任务,深受Web开发者喜爱。在网页设计领域,jQuery抽奖插件是实现互动体验、提升用户体验的重要工具。本篇文章将详细探讨jQuery抽奖...
8款jquery插件打包8款jquery插件打包8款jquery插件打包
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,以便开发者轻松地将其集成到现有的项目中。 6. **响应式设计**:考虑到可能在不同尺寸的设备上使用,插件应该具备响应式布局,确保在...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jQuery,作为一款强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理以及动画制作等任务,是web前端开发中不可或缺的工具。尤其对于初学者和经验丰富的开发者而言,jQuery提供了一种高效、简洁的方式来...
这个“Jquery插件学习”资料是针对初学者的一个入门实例,旨在帮助理解如何使用和创建jQuery插件。 首先,jQuery插件是扩展jQuery功能的一种方式,它们通常包含了对DOM元素的操作、复杂的效果实现或特定的事件处理...
为了解决这个问题,这款jQuery插件应运而生,它的目标是确保所有卡片具有相同的高度,从而创建出整齐、一致的视觉效果。 jQuery库是JavaScript的一个强大框架,它简化了DOM操作、事件处理、动画设计以及Ajax交互等...
当你调用一个jQuery插件时,实际上是调用了jQuery对象上的方法,这样就可以对选中的DOM元素进行操作。 ```javascript (function($){ $.fn.myPlugin = function(options) { // 插件的实现代码 }; })(jQuery); ```...
JQuery插件是JavaScript库JQuery生态中的一个重要组成部分,它扩展了JQuery的基本功能,为开发者提供了更加丰富和便捷的API来实现各种复杂的交互效果和动画。在网页开发中,JQuery插件广泛应用于增强用户体验、创建...