掌握jQuery插件開發

在實際開發工做中，總會碰到像滾動，分頁，日曆等展現效果的業務需求，對於接觸過jQuery以及熟悉jQuery使用的人來講，首先想到的確定是尋找現有的jQuery插件來知足相應的展現需求。目前頁面中經常使用的一些組件，都有多種jQuery插件可供選擇，網絡上也有不少專門收集jQuery插件的網站。利用jQuery插件確實能夠給咱們的開發工做帶來便捷，可是若是隻是會簡單使用，而對其中的原理不甚瞭解，那麼在使用過程當中碰到問題或者對插件進行定製開發時就會有諸多疑惑。本文的目的就是能夠快速瞭解jQuery插件的開發原理以及掌握jQuery開發的基本技能。

進行jQuery插件開發前，首先要知道兩個問題：什麼是jQuery插件？jQuery插件如何使用？
第一個問題，jQuery插件就是用來擴展jQuery原型對象的一個方法，簡單來講就是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插件
知道了上面這些知識，咱們就能夠來寫一個簡單的jQuery插件。假如我如今須要一個jQuery插件用來改變標籤內容顏色，就能夠按下面的方式來實現這個插件：

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

而後按下面的方式來使用插件：
$("p").changeStyle("red");
插件調用的時候，插件內部的this就是當前調用插件的jQuery對象，這樣的話每一個使用$()方法選擇的標籤，在調用changeStyle()插件時都會使用css()方法重設color樣式。

知足鏈式調用的jQuery插件
鏈式調用時jQuery的一大特點，一個通用的插件應該遵循jQuery風格，知足鏈式調用要求。實現鏈式調用的方式也很簡單：

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

而後使用的時候就能夠鏈式調用其餘方法了：
$("p").changeStyle("red").addClass("red-color");
實現鏈式調用的關鍵點就一行代碼return this，插件中加了這行代碼，那麼在插件執行完以後，就會把當前的jQuery對象返回，而後就能夠在插件方法後面繼續調用其它jQuery方法。

防止$符號污染的jQuery插件
有不少js庫都會使用$符號，雖然jQuery能夠使用jQuery.noConflict()方法交出$符號的使用權，可是若是定義插件的時候，使用$.fn對象來定義的，那麼這些插件使用的時候就會受到其它使用$變量的js庫的影響。對於這種狀況，咱們能夠使用當即執行函數經過傳參的方式封裝插件。形式以下：

1 (function($){
2      $.fn.changeStyle = function(colorStr){
3          this.css("color",colorStr);        
4          return this;
5      }
6 }(jQuery));

由於使用了當即執行函數，因此此時的$只屬於這個當即執行函數的函數做用域，這樣就能夠避免$符號的污染。

能夠接受參數的jQuery插件
繼續上面的例子，假如我還想爲這個插件添加一個設置標籤元素內容文字大小的功能，那麼我能夠這麼來實現：

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

上面這種插件傳參方式適用於參數比較少的狀況，若是須要傳給插件內部的參數比較多，咱們能夠定義一個參數對象，而後把須要傳給插件的參數放在參數對象中。插件定義時以下：

1 (function($){
2      $.fn.changeStyle = function(option){
3          this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
4          return this;
5      }
6 
7 }(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方法，這個方法在這裏的用法就是合併兩個對象，即把後面一個對象的存在的屬性值賦值給第一個對象，具體用法能夠參考這裏。$.extend方法還有一種做用是用來擴展jQuery對象自己。
這樣定義的插件，咱們在使用時若是不傳fontSize，那麼使用這個插件的jQuery對象標籤的內容會被設置成默認的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在爲插件定義默認參數時，必定要把默認參數寫在插件方法內部，這樣默認參數的做用域就在插件內部。

總結
定義插件的方式除了上面說的用$.fn來定義，還有另一種方式來定義插件，那就是使用$.fn.extend方法。相似下面的寫法：

 1 (function($){
 2      $.fn.extend({         
 3          changeStyle:function(option){             
 4          var defaultSetting = { colorStr:"green",fontSize:12};
 5          var setting = $.extend(defaultSetting,option);
 6          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
 7          return this; 
 8           }
 9      });
10 }(jQuery));

PS:$.extend方法和$.fn.extend方法均可以用來擴展jQuery功能，經過閱讀jQuery源碼咱們能夠發現這兩個方法的本質區別，那就是$.extend方法是在jQuery全局對象上擴展方法，$.fn.extend方法是在$選擇符選擇的jQuery對象上擴展方法。因此擴展jQuery的公共方法通常用$.extend方法，定義插件通常用$.fn.extend方法。

參考資料
jQuery源碼
How to Create a Basic Plugin

http://www.jianshu.com/p/518d424d4994