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方法。
複製代碼

原文參考簡書