jquery 插件
- - JavaScript - Web前端 - ITeye博客 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.
在我们开发的时候,无论是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); };
$.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); };
$.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); }); };
$.fn.myplugin = function () { return this.each(function () { $(this).bind('someEvent', fn); }); };
如果在一开始就移除了所有不整齐的代码,那么下一步是显而易见的。如果没有的话,那么想想下面两个问题:
$.fn.myplugin = function () { return this.bind('someEvent', fn); };
并且记住,在插件里面,this指向的是jQuery的实例,而不是元素,因此我们不需要$()。
转载自 http://www.gbtags.com/gb/share/2029.htm