jQuery插件开发

Posted 2020-08-29 爱吃鱼摆摆

什么是jQuery插件，jQuery插件如何使用？

jQuery插件就是用来扩展jQuery原型对象的一个方法，使用方法就是jQuery对象方法的调用。

来个例子：$("a").css("color","red")。每个jQuery对象都会包含jQuery中定义的DOM操作方法，这里使用$来选择a元素，返回一个a元素的jquery对象，因此这个对象就可以使用jQuery中定义的DOM操作方法。jQuery对象如何获取这些方法？

jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件

写一个改变标签内容颜色的基本插件可以这样做：

$.fn.changeStyle=function(colorStr){

　　this.css("color",colorStr);

}

使用：$("p").changeStyle("red");

插件满足链式调用（实现链式调用的关键点就一行代码return this，在插件执行完之后就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。）：

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

这样使用的时候就可以链式调用其他方法了：$("p").changeStyle("red").addClass("red-color");

防止$符号污染的jQuery插件

很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。这种情况，可以使用立即执行函数通过传参的方式封装插件。形式如下：(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
})(jQuery);

可以接受参数的jQuery插件

继续上面的例子，还想为这个插件添加一个设置标签元素内容文字大小的功能：
(function($){
     $.fn.changeStyle = function(colorStr，fontSize){
         this.css("color",colorStr).css("fontSize",fontSize+"px");        
         return this;
     }
})(jQuery);

如果传入参数较多，可以定义一个参数对象，然后把需要传给插件的参数放在参数对象中。插件定义时如下：

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

})(jQuery);

使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});

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

(function($){
     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
})(jQuery);

上面的代码用到了$.extend方法，它的作用：

1、合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象。

2、是用来扩展jQuery对象本身。

使用方式：$("p").changeStyle({colorStr:"red"});
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。类似下面的写法：
(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
})(jQuery);
PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。