jQuery插件实现的方法和原理简单说明

jQuery是一个封装的很好的类,比如我们使用$(“#username”)会生成一个 jQuery类的实例。

1、jQuery插件开发主要使用如下两个方法:

1.1、添加静态方法

jQuery.extend(object);

为扩展jQuery类本身,为类添加新的方法,可以理解文添加静态方法。

$.extend({
  addMethod : function(a, b){return a + b;} // $.addMethod(1, 2); //return 3
});

1.2、添加成员方法

jQuery.fn.extend(object);

jQuery.fn = jQuery.prototype

给jQuery对象添加方法,对jQuery.prototype进行扩展,为jQuery类添加成员方法:

$.fn.extend({
getInputText:function(){
$(this).click(function(){
alert($(this).val());
});
}
});

$(“#username”).getInputText();

2、一个通用的框架:

以下是一个通用的框架:

(function($){
$.fn.yourPluginName = function(options){
//各种属性和参数

    var options = $.extend(defaults, options); 

    this.each(function(){ 
        //插件的实现代码

    }); 
}; 

})(jQuery);

关于

$.extend(defaults, options);

就是通过合并defaults和options来扩展defaults,实现插件默认参数的功能,详细解释可以参考jQuery的官方文档:

http://api.jquery.com/jQuery.extend/

arthinking wechat
欢迎关注itzhai公众号