Jquery插件开发的方法总汇

jquery插件是用来扩展jquery对象的一种方法，它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式：

$.extend()来扩展jQuery ，主要用于向jquery对象添加静态方法
$.fn 向jQuery添加新的方法 ， 这里的fn等价于prototype，在jquery原型链上添加
$.widget()应用jQuery UI的部件工厂方式创建，改模式可以带很多jquery内建的属性，比如插件的状态信息自动保存等

1.使用$.extend()来扩展jQuery

通过$.extend()向jQuery添加了一个foo函数，然后可以通过$或者jQuery直接调用， 这种方式主要用来定义一些辅助方法是比较方便的。

jQuery.extend({       
  foo: function(name) {       
    console.log(name);       
 },
);

等级于：

jQuery.foo = function(name) {    
  console.log(name);
};

2.使用$.fn开发jquery插件

1、基本格式:

这是我们最常用的方式，它的基本格式如下：

$.fn.pluginName = function() {
    this.css('color', '#fff');
}

在$.fn上面添加一个方法，这个方法名字也就是插件名称 ，这里面的this指的是jQuery选中的元素（$('#id‘)。调用如下：

$(function(){
        $('#id').myPlugin();
 })

2、支持链式调用

如何支持jquery的链式调用呢？我们只需要最后返回return this即可:

$.fn.pluginName = function() {
    this.css('color', '#fff');
    return this;
}

3、防止$符号污染的jQuery插件

有很多库可能都使用了$符号，为了防止它$被其它库给覆盖，所以我们可以使用立即执行函数通过传参的方式封装插件。形式如下：

(function($){
     $.fn.pluginName= function(color){
         this.css("color",color);        
         return this;
     }
}(jQuery));

 pluginName支持参数颜色，此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$符号的污染。

4、可以接受参数的jQuery插件

(function($){
     $.fn.pluginName= function(option){
         this.css("color",option.color).css("fontSize",option.fontSize+"px");    
         return this;
     }
}(jQuery));

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值 :

(function($){
     $.fn.pluginName= function(option){
         var default = { color:"green",fontSize:12};
         var opt= $.extend(default ,option);
         this.css("color",opt.color).css("fontSize",opt.fontSize+"px");    
         return this;
     }
}(jQuery));

注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。 

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_292