掌握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)

然後按下面的方式來使用外掛程式：

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

外掛程式呼叫的時候，外掛程式內部的this就是當前呼叫外掛程式的jquery物件，這樣的話每個使用$()方法選擇的標籤，在呼叫changestyle()外掛程式時都會使用css()方法重設color樣式。

滿足鏈式呼叫的jquery外掛程式

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

1 $.fn.changestyle = function
(colorstr)

然後使用的時候就可以鏈式呼叫其他方法了：

$("p").changestyle("red").addclass("red-color");

實現鏈式呼叫的關鍵點就一行**return this，外掛程式中加了這行**，那麼在外掛程式執行完之後，就會把當前的jquery物件返回，然後就可以在外掛程式方法後面繼續呼叫其它jquery方法。

防止$符號汙染的jquery外掛程式

有很多js庫都會使用$符號，雖然jquery可以使用jquery.noconflict()方法交出$符號的使用權，但是如果定義外掛程式的時候，使用$.fn物件來定義的，那麼這些外掛程式使用的時候就會受到其它使用$變數的js庫的影響。對於這種情況，我們可以使用立即執行函式通過傳參的方式封裝外掛程式。形式如下：

1 (function
($)6 }(jquery));

因為使用了立即執行函式，所以此時的$只屬於這個立即執行函式的函式作用域，這樣就可以避免$符號的汙染。

可以接受引數的jquery外掛程式

繼續上面的例子，假如我還想為這個外掛程式新增乙個設定標籤元素內容文字大小的功能，那麼我可以這麼來實現：

(function
($)}(jquery));

上面這種外掛程式傳參方式適用於引數比較少的情況，如果需要傳給外掛程式內部的引數比較多，我們可以定義乙個引數物件，然後把需要傳給外掛程式的引數放在引數物件中。外掛程式定義時如下：

1 (function
($)6
7 }(jquery));

使用方式：$("p").changestyle();

把引數放到乙個物件中傳給外掛程式還有乙個好處就是我們可以在外掛程式內部為一些引數定義一些預設值，例如：

(function
($);
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();

注意：在為外掛程式定義預設引數時，一定要把預設引數寫在外掛程式方法內部，這樣預設引數的作用域就在外掛程式內部。

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

1 (function
($);
5var setting =$.extend(defaultsetting,option);
6this.css("color",setting.colorstr).css("fontsize",setting.fontsize+"px"); 
7return
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

掌握jQuery外掛程式開發

在實際開發工作中，總會碰到像滾動，分頁，日曆等展示效果的業務需求，對於接觸過jquery以及熟悉jquery使用的人來說，首先想到的肯定是尋找現有的jquery外掛程式來滿足相應的展示需求。目前頁面中常用的一些元件，都有多種jquery外掛程式可供選擇，網路上也有很多專門收集jquery外掛程式的 ...

掌握jQuery外掛程式開發

掌握jQuery外掛程式開發

掌握jQuery外掛程式開發

掌握jQuery外掛程式開發

相關推薦