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

发布于 2012-08-08 | 更新于 2020-09-20

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

本文链接: https://www.itzhai.comjquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructions.html

版权声明: 版权归作者所有,未经许可不得转载,侵权必究!联系作者请加公众号。

×
IT宅

关注公众号及时获取网站内容更新。

请帅旋喝一杯咖啡

咖啡=电量,给帅旋充杯咖啡,他会满电写代码!

IT宅

关注公众号及时获取网站内容更新。