在實際開發(fā)工作中，總會碰到像滾動，分頁，日歷等展示效果的業(yè)務需求，對于接觸過jQuery以及熟悉jQuery使用的人來說，首先想到的肯定是尋找現(xiàn)有的jQuery插件來滿足相應的展示需求。目前頁面中常用的一些組件，都有多種jQuery插件可供選擇，網(wǎng)絡(luò)上也有很多專門收集jQuery插件的網(wǎng)站。利用jQuery插件確實可以給我們的開發(fā)工作帶來便捷，但是如果只是會簡單使用，而對其中的原理不甚了解，那么在使用過程中碰到問題或者對插件進行定制開發(fā)時就會有諸多疑惑。本文的目的就是可以快速了解jQuery插件的開發(fā)原理以及掌握jQuery開發(fā)的基本技能。

進行jQuery插件開發(fā)前，首先要知道兩個問題：什么是jQuery插件？jQuery插件如何使用？

第一個問題，jQuery插件就是用來擴展jQuery原型對象的一個方法，簡單來說就是jQuery插件是jQuery對象的一個方法。其實回答了第一個問題，也就知道第二個問題的答案了，jQuery插件的使用方式就是jQuery對象方法的調(diào)用。

我們先看個例子：$("a").css("color","red")。我們知道每個jQuery對象都會包含jQuery中定義的DOM操作方法,這里使用$方法來選擇a元素，返回一個a元素的jQuery對象，這個對象就可以使用jQuery中定義的DOM操作方法。那么jQuery對象是如何獲取這些方法的呢？其實jQuery內(nèi)部定義了一個jQuery.fn對象，查看jQuery源碼可以發(fā)現(xiàn)jQuery.fn=jQuery.prototype，也就是說jQuery.fn對象是jQuery的原型對象,jQuery的DOM操作方法都在jQuery.fn對象上定義的，然后jQuery對象就可以通過原型繼承這些方法。

基礎(chǔ)版jQuery插件

知道了上面這些知識，我們就可以來寫一個簡單的jQuery插件。假如我現(xiàn)在需要一個jQuery插件用來改變標簽內(nèi)容顏色，就可以按下面的方式來實現(xiàn)這個插件：

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

然后按下面的方式來使用插件：

$("p").changeStyle("red");

插件調(diào)用的時候，插件內(nèi)部的this就是當前調(diào)用插件的jQuery對象，這樣的話每個使用$()方法選擇的標簽，在調(diào)用changeStyle()插件時都會使用css()方法重設(shè)color樣式。

滿足鏈式調(diào)用的jQuery插件

鏈式調(diào)用時jQuery的一大特色，一個通用的插件應該遵循jQuery風格，滿足鏈式調(diào)用要求。實現(xiàn)鏈式調(diào)用的方式也很簡單：

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

然后使用的時候就可以鏈式調(diào)用其他方法了：

$("p").changeStyle("red").addClass("red-color");

實現(xiàn)鏈式調(diào)用的關(guān)鍵點就一行代碼return this，插件中加了這行代碼，那么在插件執(zhí)行完之后，就會把當前的jQuery對象返回，然后就可以在插件方法后面繼續(xù)調(diào)用其它jQuery方法。

防止$符號污染的jQuery插件

有很多js庫都會使用$符號，雖然jQuery可以使用jQuery.noConflict()方法交出$符號的使用權(quán)，但是如果定義插件的時候，使用$.fn對象來定義的，那么這些插件使用的時候就會受到其它使用$變量的js庫的影響。對于這種情況，我們可以使用立即執(zhí)行函數(shù)通過傳參的方式封裝插件。形式如下：

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

因為使用了立即執(zhí)行函數(shù)，所以此時的$只屬于這個立即執(zhí)行函數(shù)的函數(shù)作用域，這樣就可以避免$符號的污染。

可以接受參數(shù)的jQuery插件

繼續(xù)上面的例子，假如我還想為這個插件添加一個設(shè)置標簽元素內(nèi)容文字大小的功能，那么我可以這么來實現(xiàn)：

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

上面這種插件傳參方式適用于參數(shù)比較少的情況，如果需要傳給插件內(nèi)部的參數(shù)比較多，我們可以定義一個參數(shù)對象，然后把需要傳給插件的參數(shù)放在參數(shù)對象中。插件定義時如下：

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

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

把參數(shù)放到一個對象中傳給插件還有一個好處就是我們可以在插件內(nèi)部為一些參數(shù)定義一些缺省值，例如：

(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對象標簽的內(nèi)容會被設(shè)置成默認的12px。

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

注意：在為插件定義默認參數(shù)時，一定要把默認參數(shù)寫在插件方法內(nèi)部，這樣默認參數(shù)的作用域就在插件內(nèi)部。

總結(jié)

定義插件的方式除了上面說的用$.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源碼我們可以發(fā)現(xiàn)這兩個方法的本質(zhì)區(qū)別，那就是$.extend方法是在jQuery全局對象上擴展方法，$.fn.extend方法是在$選擇符選擇的jQuery對象上擴展方法。所以擴展jQuery的公共方法一般用$.extend方法，定義插件一般用$.fn.extend方法。

參考資料

How to Create a Basic Plugin

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論