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

進(jìn)行jQuery插件開(kāi)發(fā)前，首先要知道兩個(gè)問(wèn)題：什么是jQuery插件？jQuery插件如何使用？

第一個(gè)問(wèn)題，jQuery插件就是用來(lái)擴(kuò)展jQuery原型對(duì)象的一個(gè)方法，簡(jiǎn)單來(lái)說(shuō)就是jQuery插件是jQuery對(duì)象的一個(gè)方法。其實(shí)回答了第一個(gè)問(wèn)題，也就知道第二個(gè)問(wèn)題的答案了，jQuery插件的使用方式就是jQuery對(duì)象方法的調(diào)用。

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

基礎(chǔ)版jQuery插件

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

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

然后按下面的方式來(lái)使用插件：

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

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

滿(mǎn)足鏈?zhǔn)秸{(diào)用的jQuery插件

鏈?zhǔn)秸{(diào)用時(shí)jQuery的一大特色，一個(gè)通用的插件應(yīng)該遵循jQuery風(fēng)格，滿(mǎn)足鏈?zhǔn)秸{(diào)用要求。實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的方式也很簡(jiǎn)單：

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

然后使用的時(shí)候就可以鏈?zhǔn)秸{(diào)用其他方法了：

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

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

防止$符號(hào)污染的jQuery插件

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

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

因?yàn)槭褂昧肆⒓磮?zhí)行函數(shù)，所以此時(shí)的$只屬于這個(gè)立即執(zhí)行函數(shù)的函數(shù)作用域，這樣就可以避免$符號(hào)的污染。

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

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

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

上面這種插件傳參方式適用于參數(shù)比較少的情況，如果需要傳給插件內(nèi)部的參數(shù)比較多，我們可以定義一個(gè)參數(shù)對(duì)象，然后把需要傳給插件的參數(shù)放在參數(shù)對(duì)象中。插件定義時(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ù)放到一個(gè)對(duì)象中傳給插件還有一個(gè)好處就是我們可以在插件內(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方法，這個(gè)方法在這里的用法就是合并兩個(gè)對(duì)象，即把后面一個(gè)對(duì)象的存在的屬性值賦值給第一個(gè)對(duì)象，具體用法可以參考這里。$.extend方法還有一種作用是用來(lái)擴(kuò)展jQuery對(duì)象本身。

這樣定義的插件，我們?cè)谑褂脮r(shí)如果不傳fontSize，那么使用這個(gè)插件的jQuery對(duì)象標(biāo)簽的內(nèi)容會(huì)被設(shè)置成默認(rèn)的12px。

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

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

總結(jié)

定義插件的方式除了上面說(shuō)的用$.fn來(lái)定義，還有另外一種方式來(lái)定義插件，那就是使用$.fn.extend方法。類(lèi)似下面的寫(xiě)法：

(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方法都可以用來(lái)擴(kuò)展jQuery功能，通過(guò)閱讀jQuery源碼我們可以發(fā)現(xiàn)這兩個(gè)方法的本質(zhì)區(qū)別，那就是$.extend方法是在jQuery全局對(duì)象上擴(kuò)展方法，$.fn.extend方法是在$選擇符選擇的jQuery對(duì)象上擴(kuò)展方法。所以擴(kuò)展jQuery的公共方法一般用$.extend方法，定義插件一般用$.fn.extend方法。

參考資料

How to Create a Basic Plugin

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論