jQuery插件的开发注意事项
jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发(这种对所有的jquery对象都能使用,也就是说标签a、ul、div、li等这些DOM的jquery对象都可以使用这些方法)
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。
通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发(这种只针对某一种html标签对象,即在使用时还得$("#div1")这样来获取该html的jquery对象再调用此插件中的方法)
对象级别的插件开发需要如下的两种形式:、
形式1:
形式2:
-
(function($)
{ -
$.fn.pluginName
= function() { -
// Our plugin implementation code goes here. -
};
-
})(jQuery);
3、总结
jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
3.1 jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn
= jQuery.prototype =
{
init:
function( selector, context )
{//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({
});
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
3.2 jQuery.extend(object);
为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
});
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,$.add(3,4); //return 7
链接地址:http://www.iteye.com/topic/545971