[聚合文章] jQuery插件的二种类型

jquery插件的开发包括两种：一种是类级别的插件开发，给jquery添加新的全局函数(jquery命名空间的函数)，相当于给jquery类本身添加方法。另一种是对象级别的插件开发，即给jquery对象添加方法。

类级别的插件开发

//添加全局函数
jQuery.foo = function() {};//使用方式jQuery.foo();

//使用jQuery.extend(object)添加全局函数
jQuery.extend({
    foo:function(){},
    bar:function(){}
});

//使用命名空间
jQuery.myPlugin = {
    foo:function(){},
    bar:function("bar"){}
}//使用方式jQuery.myPlugin.foo();

对象级别的插件开发

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

例子：$("a").css("color","red")。
      每个jQuery对象都包含jQuery中定义的DOM操作方法,用$选择a元素，返回a元素的jQuery对象，这个对象
就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一
个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的
原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件

//改变标签内容颜色
$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);//this就是当前调用插件的jQuery对象
}

//使用方式
$("p").changeStyle("red");

满足链式调用的jQuery插件

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);
         return this;//把当前的jQuery对象返回
}

//可以链式调用其他方法
$("p").changeStyle("red").addClass("red-color");

//实现链式调用的关键点就一行代码return this

防止$符号污染的jQuery插件

//可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，
//那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行
//函数通过传参的方式封装插件

//此时的$只属于这个立即执行函数的函数作用域
(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

可以接受参数的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));

//使用方式：$("p").changeStyle({colorStr:"red"});
//$.extend方法还有一种作用是用来扩展jQuery对象本身。

暴露插件的默认设置

$.fn.changeStyle = function(options){
     var opts = $.extend({}, $.fn.changeStyle.defaults, options);
          this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
          return this;
}; 

 $.fn.changeStyle.default = {
    backgroundColor: "red", 
    color:"yellow"
};

//$.fn.changeStyle.defaults.color = '#fff';
//$.fn.changeStyle.defaults.backgroundColor = '#000';

//定义插件的方式除了上面说的用$.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));

$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，本质区别，$.extend方法是在
jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩
展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

原文参考简书