掌握jQuery外掛開發，這篇文章就夠了

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外掛用來改變標籤內容顏色，就可以按下面的方式來實現這個外掛：

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

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

滿足鏈式呼叫的jQuery外掛
鏈式呼叫時jQuery的一大特色，一個通用的外掛應該遵循jQuery風格，滿足鏈式呼叫要求。實現鏈式呼叫的方式也很簡單：

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

然後使用的時候就可以鏈式呼叫其他方法了：
$("p").changeStyle("red").addClass("red-color");
實現鏈式呼叫的關鍵點就一行程式碼return this，外掛中加了這行程式碼，那麼在外掛執行完之後，就會把當前的jQuery物件返回，然後就可以在外掛方法後面繼續呼叫其它jQuery方法。

**防止公式輸入有誤符號，雖然jQuery可以使用jQuery.noConflict()方法交出$符號的使用權，但是如果定義外掛的時候，使用公式輸入有誤變數的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方法，這個方法在這裡的用法就是合併兩個物件，即把後面一個物件的存在的屬性值賦值給第一個物件，具體用法可以參考。$.extend方法還有一種作用是用來擴充套件jQuery物件本身。
這樣定義的外掛，我們在使用時如果不傳fontSize，那麼使用這個外掛的jQuery物件標籤的內容會被設定成預設的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在為外掛定義預設引數時，一定要把預設引數寫在外掛方法內部，這樣預設引數的作用域就在外掛內部。

總結
定義外掛的方式除了上面說的用$.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方法。

參考資料
jQuery原始碼

作者：留七七
連結：