深入理解jQuery插件開(kāi)發(fā)
如果你看到這篇文章，我確信你毫無(wú)疑問(wèn)會(huì)認(rèn)為jQuery是一個(gè)使用簡(jiǎn)便的庫(kù)。jQuery可能使用起來(lái)很簡(jiǎn)單，但是它仍然有一些奇怪的地方，對(duì)它基本功能和概念不熟悉的人可能會(huì)難以掌握。但是不用擔(dān)心，我下面已經(jīng)把代碼劃分成小部分，做了一個(gè)簡(jiǎn)單的指導(dǎo)。那些語(yǔ)法看起來(lái)可能過(guò)于復(fù)雜，但是如果進(jìn)入到它的思想和模式中，它是非常簡(jiǎn)單易懂的。
下面，我們有了一個(gè)插件的基本層次：
- // Shawn Khameneh
- // ExtraordinaryThoughts.com
- (function($) {
- var privateFunction = function() {
- // 代碼在這里運(yùn)行
- }
- var methods = {
- init: function(options) {
- return this.each(function() {
- var $this = $(this);
- var settings = $this.data('pluginName');
- if(typeof(settings) == 'undefined') {
- var defaults = {
- propertyName: 'value',
- onSomeEvent: function() {}
- }
- settings = $.extend({}, defaults, options);
- $this.data('pluginName', settings);
- } else {
- settings = $.extend({}, settings, options);
- }
- // 代碼在這里運(yùn)行
- });
- },
- destroy: function(options) {
- return $(this).each(function() {
- var $this = $(this);
- $this.removeData('pluginName');
- });
- },
- val: function(options) {
- var someValue = this.eq(0).html();
- return someValue;
- }
- };
- $.fn.pluginName = function() {
- var method = arguments[0];
- if(methods[method]) {
- method = methods[method];
- arguments = Array.prototype.slice.call(arguments, 1);
- } else if( typeof(method) == 'object' || !method ) {
- method = methods.init;
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
- return this;
- }
- return method.apply(this, arguments);
- }
- })(jQuery);
你可能會(huì)注意到，我所提到代碼的結(jié)構(gòu)和其他插件代碼有很大的不同。根據(jù)你的使用和需求的不同，插件的開(kāi)發(fā)方式也可能會(huì)呈現(xiàn)多樣化。我的目的是澄清代碼中的一些概念，足夠讓你找到適合自己的方法去理解和開(kāi)發(fā)一個(gè)jQuery插件。
現(xiàn)在，來(lái)解剖我們的代碼吧！
容器：一個(gè)即時(shí)執(zhí)行函數(shù)
根本上來(lái)說(shuō)，每個(gè)插件的代碼是被包含在一個(gè)即時(shí)執(zhí)行的函數(shù)當(dāng)中，如下：
- (function(arg1, arg2) {
- // 代碼
- })(arg1, arg2);
即時(shí)執(zhí)行函數(shù)，顧名思義，是一個(gè)函數(shù)。讓它與眾不同的是，它被包含在一對(duì)小括號(hào)里面，這讓所有的代碼都在匿名函數(shù)的局部作用域中運(yùn)行。這并不是說(shuō)DOM（全局變量）在函數(shù)內(nèi)是被屏蔽的，而是外部無(wú)法訪(fǎng)問(wèn)到函數(shù)內(nèi)部的公共變量和對(duì)象命名空間。這是一個(gè)很好的開(kāi)始，這樣你聲明你的變量和對(duì)象的時(shí)候，就不用擔(dān)心著變量名和已經(jīng)存在的代碼有沖突。
現(xiàn)在，因?yàn)楹瘮?shù)內(nèi)部所有的所有公共變量是無(wú)法訪(fǎng)問(wèn)的，這樣要把jQuery本身作為一個(gè)內(nèi)部的公共變量來(lái)使用就會(huì)成為問(wèn)題。就像普通的函數(shù)一樣，即時(shí)函數(shù)也根據(jù)引用傳入對(duì)象參數(shù)。我們可以將jQuery對(duì)象傳入函數(shù)，如下：
- (function($) {
- // 局部作用域中使用$來(lái)引用jQuery
- })(jQuery);
我們傳入了一個(gè)把公共變量“jQuery”傳入了一個(gè)即時(shí)執(zhí)行的函數(shù)里面，在函數(shù)局部（容器）中我們可以通過(guò)“$”來(lái)引用它。也就是說(shuō)，我們把容器當(dāng)做一個(gè)函數(shù)來(lái)調(diào)用，而這個(gè)函數(shù)的參數(shù)就是jQuery。因?yàn)槲覀円玫?ldquo;jQuery”作為公共變量傳入，而不是它的簡(jiǎn)寫(xiě)“$”，這樣我們就可以兼容Prototype庫(kù)。如果你不用Prototype或者其它用“$”做簡(jiǎn)寫(xiě)的庫(kù)的話(huà)，你不這樣做也不會(huì)造成什么影響，但是知道這種用法仍是一件好事。
#p#
插件：一個(gè)函數(shù)
一個(gè)jQuery插件本質(zhì)上是我們?nèi)M(jìn)jQuery命名空間中一個(gè)龐大的函數(shù)，當(dāng)然，我們可以很輕易地用“jQuery.pluginName=function”，來(lái)達(dá)到我們的目的，但是如果我們這樣做的話(huà)我們的插件的代碼是處于沒(méi)有被保護(hù)的暴露狀態(tài)的。“jQuery.fn”是“jQuery.prototype”的簡(jiǎn)寫(xiě)，意味當(dāng)我們通過(guò)jQuery命名空間去獲取我們的插件的時(shí)候，它僅可寫(xiě)（不可修改）。它事實(shí)上可以為你干點(diǎn)什么事呢？它讓你恰當(dāng)?shù)亟M織自己的代碼，和理解如何保護(hù)你的代碼不受運(yùn)行時(shí)候不需要的修改。最好的說(shuō)法就是，這是一個(gè)很好的實(shí)踐！
通過(guò)一個(gè)插件，我們獲得一個(gè)基本的jQuery函數(shù)：
- (function($) {
- $.fn.pluginName = function(options) {
- // 代碼在此處運(yùn)行
- return this;
- }
- })(jQuery);
上面的代碼中的函數(shù)可以像其他的jQuery函數(shù)那樣通過(guò)“$(‘#element’).pluginName()”來(lái)調(diào)用。注意，我是如何把“return this”語(yǔ)句加進(jìn)去的；這小片的代碼通過(guò)返回一個(gè)原來(lái)元素的集合（包含在this當(dāng)中）的引用來(lái)產(chǎn)生鏈?zhǔn)秸{(diào)用的效果，而這些元素是被一個(gè)jQuery對(duì)象所包裹的。你也應(yīng)該注意，“this”在這個(gè)特定的作用域中是一個(gè)jQuery對(duì)象，相當(dāng)于“$(‘#element’)”。
根據(jù)返回的對(duì)象，我們可以總結(jié)出，在上面的代碼中，使用“$(‘#element’).pluginName()”的效果和使用“$(‘#element’)”的效果是一樣的。在你的即時(shí)執(zhí)行函數(shù)作用域中，沒(méi)必要用“$(this)”的方式來(lái)把this包裹到一個(gè)jQuery對(duì)象中，因?yàn)?/span>this本身已經(jīng)是被包裝好的jQuery對(duì)象。
多個(gè)元素：理解Sizzle
jQuery使用的選擇器引擎叫Sizzle，Sizzle可以為你的函數(shù)提供多元素操作（例如對(duì)所有類(lèi)名相同的元素）。這是jQuery幾個(gè)優(yōu)秀的特性之一，但這也是你在開(kāi)發(fā)插件過(guò)程中需要考慮的事情。即使你不準(zhǔn)備為你的插件提供多元素支持，但為這做準(zhǔn)備仍然是一個(gè)很好的實(shí)踐。
這里我添加了一小段代碼，它讓你的插件代碼為多元素集合中每個(gè)元素單獨(dú)地起作用：
- function($) {
- // 向jQuery中被保護(hù)的“fn”命名空間中添加你的插件代碼，用“pluginName”作為插件的函數(shù)名稱(chēng)
- $.fn.pluginName = function(options) {
- // 返回“this”（函數(shù)each（）的返回值也是this），以便進(jìn)行鏈?zhǔn)秸{(diào)用。
- return this.each(function() {
- // 此處運(yùn)行代碼，可以通過(guò)“this”來(lái)獲得每個(gè)單獨(dú)的元素
- // 例如： $(this).show()；
- var $this = $(this);
- });
- }
- })(jQuery);
在以上示例代碼中，我并不是用 each（）在我的選擇器中每個(gè)元素上運(yùn)行代碼。在那個(gè)被 each（）調(diào)用的函數(shù)的局部作用域中，你可以通過(guò)this來(lái)引用每個(gè)被單獨(dú)處理的元素，也就是說(shuō)你可以通過(guò)$(this)來(lái)引用它的jQuery對(duì)象。在局部作用域中，我用$this變量存儲(chǔ)起jQuery對(duì)象，而不是每次調(diào)用函數(shù)的時(shí)候都使用$(this)，這會(huì)是個(gè)很好的實(shí)踐。當(dāng)然，這樣做并不總是必要的；但我已經(jīng)額外把它包含在我的代碼中。還有要注意的是，我們將會(huì)對(duì)每個(gè)單獨(dú)方法都使用 each（），這樣到時(shí)我們就可以返回我們需要的值，而不是一個(gè)jQuery對(duì)象。
下面是一個(gè)例子，假如我們的插件支持一個(gè) val 的方法，它可以返回我們需要的值：
- $('#element').pluginName('val');
- // 會(huì)返回我們需要的值，而不是一個(gè)jQuery對(duì)象
功能：公有方法和私有方法
一個(gè)基本的函數(shù)可能在某些情況下可以良好地工作，但是一個(gè)稍微復(fù)雜一點(diǎn)的插件就需要提供各種各樣的方法和私有函數(shù)。你可能會(huì)使用不同的命名空間去為你的插件提供各種方法，但是最好不要讓你的源代碼因?yàn)槎嘤嗟拿臻g而變得混亂。
下面的代碼定義了一個(gè)存儲(chǔ)公有方法的JSON對(duì)象，以及展示了如何使用插件中的主函數(shù)中去判斷哪些方法被調(diào)用，和如何在讓方法作用到選擇器每個(gè)元素上。
- (function($) {
- // 在我們插件容器內(nèi)，創(chuàng)造一個(gè)公共變量來(lái)構(gòu)建一個(gè)私有方法
- var privateFunction = function() {
- // code here
- }
- // 通過(guò)字面量創(chuàng)造一個(gè)對(duì)象，存儲(chǔ)我們需要的共有方法
- var methods = {
- // 在字面量對(duì)象中定義每個(gè)單獨(dú)的方法
- init: function() {
- // 為了更好的靈活性，對(duì)來(lái)自主函數(shù)，并進(jìn)入每個(gè)方法中的選擇器其中的每個(gè)單獨(dú)的元素都執(zhí)行代碼
- return this.each(function() {
- // 為每個(gè)獨(dú)立的元素創(chuàng)建一個(gè)jQuery對(duì)象
- var $this = $(this);
- // 執(zhí)行代碼
- // 例如： privateFunction();
- });
- },
- destroy: function() {
- // 對(duì)選擇器每個(gè)元素都執(zhí)行方法
- return this.each(function() {
- // 執(zhí)行代碼
- });
- }
- };
- $.fn.pluginName = function() {
- // 獲取我們的方法，遺憾的是，如果我們用function(method){}來(lái)實(shí)現(xiàn)，這樣會(huì)毀掉一切的
- var method = arguments[0];
- // 檢驗(yàn)方法是否存在
- if(methods[method]) {
- // 如果方法存在，存儲(chǔ)起來(lái)以便使用
- // 注意：我這樣做是為了等下更方便地使用each（）
- method = methods[method];
- // 如果方法不存在，檢驗(yàn)對(duì)象是否為一個(gè)對(duì)象（JSON對(duì)象）或者method方法沒(méi)有被傳入
- } else if( typeof(method) == 'object' || !method ) {
- // 如果我們傳入的是一個(gè)對(duì)象參數(shù)，或者根本沒(méi)有參數(shù)，init方法會(huì)被調(diào)用
- method = methods.init;
- } else {
- // 如果方法不存在或者參數(shù)沒(méi)傳入，則報(bào)出錯(cuò)誤。需要調(diào)用的方法沒(méi)有被正確調(diào)用
- $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
- return this;
- }
- // 調(diào)用我們選中的方法
- // 再一次注意我們是如何將each（）從這里轉(zhuǎn)移到每個(gè)單獨(dú)的方法上的
- return method.call(this);
- }
- })(jQuery);
注意我把 privateFunction 當(dāng)做了一個(gè)函數(shù)內(nèi)部的全局變量?？紤]到所有的代碼的運(yùn)行都是在插件容器內(nèi)進(jìn)行的，所以這種做法是可以被接受的，因?yàn)樗辉诓寮淖饔糜蛑锌捎?。在插件中的主函?shù)中，我檢驗(yàn)了傳入?yún)?shù)所指向的方法是否存在。如果方法不存在或者傳入的是參數(shù)為對(duì)象， init 方法會(huì)被運(yùn)行。最后，如果傳入的參數(shù)不是一個(gè)對(duì)象而是一個(gè)不存在的方法，我們會(huì)報(bào)出一個(gè)錯(cuò)誤信息。
同樣要注意的是，我是如何在每個(gè)方法中都使用 this.each() 的。當(dāng)我們?cè)谥骱瘮?shù)中調(diào)用 method.call(this) 的時(shí)候，這里的 this 事實(shí)上就是一個(gè)jQuery對(duì)象，作為 this 傳入每個(gè)方法中。所以在我們方法的即時(shí)作用域中，它已經(jīng)是一個(gè)jQuery對(duì)象。只有在被 each（）所調(diào)用的函數(shù)中，我們才有必要將this包裝在一個(gè)jQuery對(duì)象中。
下面是一些用法的例子：
- /*
- 注意這些例子可以在目前的插件代碼中正確運(yùn)行，并不是所有的插件都使用同樣的代碼結(jié)構(gòu)
- */
- // 為每個(gè)類(lèi)名為 ".className" 的元素執(zhí)行init方法
- $('.className').pluginName();
- $('.className').pluginName('init');
- $('.className').pluginName('init', {}); // 向init方法傳入“{}”對(duì)象作為函數(shù)參數(shù)
- $('.className').pluginName({}); // 向init方法傳入“{}”對(duì)象作為函數(shù)參數(shù)
- // 為每個(gè)類(lèi)名為 “.className” 的元素執(zhí)行destroy方法
- $('.className').pluginName('destroy');
- $('.className').pluginName('destroy', {}); // 向destroy方法傳入“{}”對(duì)象作為函數(shù)參數(shù)
- // 所有代碼都可以正常運(yùn)行
- $('.className').pluginName('init', 'argument1', 'argument2'); // 把 "argument 1" 和 "argument 2" 傳入 "init"
- // 不正確的使用
- $('.className').pluginName('nonexistantMethod');
- $('.className').pluginName('nonexistantMethod', {});
- $('.className').pluginName('argument 1'); // 會(huì)嘗試調(diào)用 "argument 1" 方法
- $('.className').pluginName('argument 1', 'argument 2'); // 會(huì)嘗試調(diào)用 "argument 1" ，“argument 2”方法
- $('.className').pluginName('privateFunction'); // 'privateFunction' 不是一個(gè)方法
在上面的例子中多次出現(xiàn)了 {} ，表示的是傳入方法中的參數(shù)。在這小節(jié)中，上面代碼可以可以正常運(yùn)行，但是參數(shù)不會(huì)被傳入方法中。繼續(xù)閱讀下一小節(jié)，你會(huì)知道如何向方法傳入?yún)?shù)。
#p#
設(shè)置插件：傳入?yún)?shù)
許多插件都支持參數(shù)傳入，如配置參數(shù)和回調(diào)函數(shù)。你可以通過(guò)傳入JS鍵值對(duì)對(duì)象或者函數(shù)參數(shù)，為方法提供信息。如果你的方法支持多于一個(gè)或兩個(gè)參數(shù)，那么沒(méi)有比傳入對(duì)象參數(shù)更恰當(dāng)?shù)姆绞健?/span>
- (function($) {
- var methods = {
- init: function(options) {
- // 在每個(gè)元素上執(zhí)行方法
- return this.each(function() {
- var $this = $(this);
- // 創(chuàng)建一個(gè)默認(rèn)設(shè)置對(duì)象
- var defaults = {
- propertyName: 'value',
- onSomeEvent: function() {}
- }
- // 使用extend方法從options和defaults對(duì)象中構(gòu)造出一個(gè)settings對(duì)象
- var settings = $.extend({}, defaults, options);
- // 執(zhí)行代碼
- });
- }
- };
- $.fn.pluginName = function() {
- var method = arguments[0];
- if(methods[method]) {
- method = methods[method];
- // 我們的方法是作為參數(shù)傳入的，把它從參數(shù)列表中刪除，因?yàn)檎{(diào)用方法時(shí)并不需要它
- arguments = Array.prototype.slice.call(arguments, 1);
- } else if( typeof(method) == 'object' || !method ) {
- method = methods.init;
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
- return this;
- }
- // 用apply方法來(lái)調(diào)用我們的方法并傳入?yún)?shù)
- return method.apply(this, arguments);
- }
- })(jQuery);
正如上面所示，一個(gè)“options”參數(shù)被添加到方法當(dāng)中，和“arguments”也被添加到了主函數(shù)中。如果一個(gè)方法已經(jīng)被聲明，在參數(shù)傳入方法之前，調(diào)用那個(gè)方法的參數(shù)會(huì)從參數(shù)列表中刪除掉。我用了“apply（）”來(lái)代替了“call（）”，“apply（）”本質(zhì)上是和“call（）”做著同樣的工作的，但不同的是它允許參數(shù)的傳入。這種結(jié)構(gòu)也允許多個(gè)參數(shù)的傳入，如果你愿意這樣做，你也可以為你的方法修改參數(shù)列表，例如：“init:function(arg1, arg2){}”。
如果你是使用JS對(duì)象作為參數(shù)傳入，你可能需要定義一個(gè)默認(rèn)對(duì)象。一旦默認(rèn)對(duì)象被聲明，你可以使用“$.extend”來(lái)合并參數(shù)對(duì)象和默認(rèn)對(duì)象中的值，以形成一個(gè)新的參數(shù)對(duì)象來(lái)使用（在我們的例子中就是“settings”）；
這里有一些例子，用來(lái)演示以上的邏輯：
- var options = {
- customParameter: 'Test 1',
- propertyName: 'Test 2'
- }
- var defaults = {
- propertyName: 'Test 3',
- onSomeEvent: 'Test 4'
- }
- var settings = $.extend({}, defaults, options);
- /*
- settings == {
- propertyName: 'Test 2',
- onSomeEvent: 'Test 4',
- customParameter: 'Test 1'
- }
- */
保存設(shè)置：添加持久性數(shù)據(jù)
有時(shí)你會(huì)想在你的插件中保存設(shè)置和信息，這時(shí)jQuery中的“data（）”函數(shù)就可以派上用場(chǎng)了。它在使用上是非常簡(jiǎn)單的，它會(huì)嘗試獲取和元素相關(guān)的數(shù)據(jù)，如果數(shù)據(jù)不存在，它就會(huì)創(chuàng)造相應(yīng)的數(shù)據(jù)并添加到元素上。一旦你使用了“data（）”來(lái)為元素添加信息，請(qǐng)確認(rèn)你已經(jīng)記住，當(dāng)不再需要數(shù)據(jù)的時(shí)候，用“removeDate（）”來(lái)刪除相應(yīng)的數(shù)據(jù)。
- // Shawn Khameneh
- // ExtraordinaryThoughts.com
- (function($) {
- var privateFunction = function() {
- // 執(zhí)行代碼
- }
- var methods = {
- init: function(options) {
- // 在每個(gè)元素上執(zhí)行方法
- return this.each(function() {
- var $this = $(this);
- // 嘗試去獲取settings，如果不存在，則返回“undefined”
- var settings = $this.data('pluginName');
- // 如果獲取settings失敗，則根據(jù)options和default創(chuàng)建它
- if(typeof(settings) == 'undefined') {
- var defaults = {
- propertyName: 'value',
- onSomeEvent: function() {}
- }
- settings = $.extend({}, defaults, options);
- // 保存我們新創(chuàng)建的settings
- $this.data('pluginName', settings);
- } else {
- / 如果我們獲取了settings，則將它和options進(jìn)行合并（這不是必須的，你可以選擇不這樣做）
- settings = $.extend({}, settings, options);
- // 如果你想每次都保存options，可以添加下面代碼：
- // $this.data('pluginName', settings);
- }
- // 執(zhí)行代碼
- });
- },
- destroy: function(options) {
- // 在每個(gè)元素中執(zhí)行代碼
- return $(this).each(function() {
- var $this = $(this);
- // 執(zhí)行代碼
- // 刪除元素對(duì)應(yīng)的數(shù)據(jù)
- $this.removeData('pluginName');
- });
- },
- val: function(options) {
- // 這里的代碼通過(guò).eq(0)來(lái)獲取選擇器中的第一個(gè)元素的，我們或獲取它的HTML內(nèi)容作為我們的返回值
- var someValue = this.eq(0).html();
- // 返回值
- return someValue;
- }
- };
- $.fn.pluginName = function() {
- var method = arguments[0];
- if(methods[method]) {
- method = methods[method];
- arguments = Array.prototype.slice.call(arguments, 1);
- } else if( typeof(method) == 'object' || !method ) {
- method = methods.init;
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
- return this;
- }
- return method.apply(this, arguments);
- }
- })(jQuery);
在上面的代碼中，我檢驗(yàn)了元素的數(shù)據(jù)是否存在。如果數(shù)據(jù)不存在，“options”和“default”會(huì)被合并，構(gòu)建成一個(gè)新的settings，然后用“data（）”保存在元素中。
