深入理解jQuery插件開發

今天為大家介紹的是深入理解jQuery插件開發，希望大家會喜歡。

如果你看到這篇文章，我確信你毫無疑問會認為jQuery是一個使用簡便的庫。jQuery可能使用起來很簡單，但是它仍然有一些奇怪的地方，對它基本功能和概念不熟悉的人可能會難以掌握。但是不用擔心，我下面已經把代碼劃分成小部分，做了一個簡單的指導。那些語法看起來可能過於復雜，但是如果進入到它的思想和模式中，它是非常簡單易懂的。

下面，我們有了一個插件的基本層次：

你可能會注意到，我所提到代碼的結構和其他插件代碼有很大的不同。根據你的使用和需求的不同，插件的開發方式也可能會呈現多樣化。我的目的是澄清代碼中的一些概念，足夠讓你找到適合自己的方法去理解和開發一個jQuery插件。

現在，來解剖我們的代碼吧!

容器：一個即時執行函數

根本上來說，每個插件的代碼是被包含在一個即時執行的函數當中。

即時執行函數，顧名思義，是一個函數。讓它與眾不同的是，它被包含在一對小括號裡面，這讓所有的代碼都在匿名函數的局部作用域中運行。這並不是說DOM(全局變量)在函數內是被屏蔽的，而是外部無法訪問到函數內部的公共變量和對象命名空間。這是一個很好的開始，這樣你聲明你的變量和對象的時候，就不用擔心著變量名和已經存在的代碼有沖突。

現在，因為函數內部所有的所有公共變量是無法訪問的，這樣要把jQuery本身作為一個內部的公共變量來使用就會成為問題。就像普通的函數一樣，即時函數也根據引用傳入對象參數。我們可以將jQuery對象傳入函數，我們傳入了一個把公共變量“jQuery”傳入了一個即時執行的函數裡面，在函數局部(容器)中我們可以通過“$”來引用它。也就是說，我們把容器當做一個函數來調用，而這個函數的參數就是jQuery。因為我們引用的“jQuery”作為公共變量傳入，而不是它的簡寫“$”，這樣我們就可以兼容Prototype庫。如果你不用Prototype或者其它用“$”做簡寫的庫的話，你不這樣做也不會造成什麼影響，但是知道這種用法仍是一件好事。

插件：一個函數

一個jQuery插件本質上是我們塞進jQuery命名空間中一個龐大的函數，當然，我們可以很輕易地用“jQuery.pluginName=function”，來達到我們的目的，但是如果我們這樣做的話我們的插件的代碼是處於沒有被保護的暴露狀態的。“jQuery.fn”是“jQuery.prototype”的簡寫，意味當我們通過jQuery命名空間去獲取我們的插件的時候，它僅可寫(不可修改)。它事實上可以為你干點什麼事呢?它讓你恰當地組織自己的代碼，和理解如何保護你的代碼不受運行時候不需要的修改。最好的說法就是，這是一個很好的實踐!

通過一個插件，我們獲得一個基本的jQuery函數：

上面的代碼中的函數可以像其他的jQuery函數那樣通過“$(‘#element’).pluginName()”來調用。注意，我是如何把“return this”語句加進去的;這小片的代碼通過返回一個原來元素的集合(包含在this當中)的引用來產生鏈式調用的效果，而這些元素是被一個jQuery對象所包裹的。你也應該注意，“this”在這個特定的作用域中是一個jQuery對象，相當於“$(‘#element’)”。

根據返回的對象，我們可以總結出，在上面的代碼中，使用“$(‘#element’).pluginName()”的效果和使用“$(‘#element’)”的效果是一樣的。在你的即時執行函數作用域中，沒必要用“$(this)”的方式來把this包裹到一個jQuery對象中，因為this本身已經是被包裝好的jQuery對象。

多個元素：理解Sizzle

jQuery使用的選擇器引擎叫Sizzle，Sizzle可以為你的函數提供多元素操作(例如對所有類名相同的元素)。這是jQuery幾個優秀的特性之一，但這也是你在開發插件過程中需要考慮的事情。即使你不准備為你的插件提供多元素支持，但為這做准備仍然是一個很好的實踐。

這裡我添加了一小段代碼，它讓你的插件代碼為多元素集合中每個元素單獨地起作用：

在以上示例代碼中，我並不是用 each()在我的選擇器中每個元素上運行代碼。在那個被 each()調用的函數的局部作用域中，你可以通過this來引用每個被單獨處理的元素，也就是說你可以通過$(this)來引用它的jQuery對象。在局部作用域中，我用$this變量存儲起jQuery對象，而不是每次調用函數的時候都使用$(this)，這會是個很好的實踐。當然，這樣做並不總是必要的;但我已經額外把它包含在我的代碼中。還有要注意的是，我們將會對每個單獨方法都使用 each()，這樣到時我們就可以返回我們需要的值，而不是一個jQuery對象。

下面是一個例子，假如我們的插件支持一個 val 的方法，它可以返回我們需要的值。

功能：公有方法和私有方法

一個基本的函數可能在某些情況下可以良好地工作，但是一個稍微復雜一點的插件就需要提供各種各樣的方法和私有函數。你可能會使用不同的命名空間去為你的插件提供各種方法，但是最好不要讓你的源代碼因為多余的命名空間而變得混亂。

下面的代碼定義了一個存儲公有方法的JSON對象，以及展示了如何使用插件中的主函數中去判斷哪些方法被調用，和如何在讓方法作用到選擇器每個元素上。

注意我把 privateFunction 當做了一個函數內部的全局變量。考慮到所有的代碼的運行都是在插件容器內進行的，所以這種做法是可以被接受的，因為它只在插件的作用域中可用。在插件中的主函數中，我檢驗了傳入參數所指向的方法是否存在。如果方法不存在或者傳入的是參數為對象， init 方法會被運行。最後，如果傳入的參數不是一個對象而是一個不存在的方法，我們會報出一個錯誤信息。

同樣要注意的是，我是如何在每個方法中都使用 this.each() 的。當我們在主函數中調用 method.call(this) 的時候，這裡的 this 事實上就是一個jQuery對象，作為 this 傳入每個方法中。所以在我們方法的即時作用域中，它已經是一個jQuery對象。只有在被 each()所調用的函數中，我們才有必要將this包裝在一個jQuery對象中。

下面是一些用法的例子：

在上面的例子中多次出現了 {} ，表示的是傳入方法中的參數。在這小節中，上面代碼可以可以正常運行，但是參數不會被傳入方法中。繼續閱讀下一小節，你會知道如何向方法傳入參數。 設置插件：傳入參數 許多插件都支持參數傳入，如配置參數和回調函數。你可以通過傳入JS鍵值對對象或者函數參數，為方法提供信息。如果你的方法支持多於一個或兩個參數，那麼沒有比傳入對象參數更恰當的方式。

正如上面所示，一個“options”參數被添加到方法當中，和“arguments”也被添加到了主函數中。如果一個方法已經被聲明，在參數傳入方法之前，調用那個方法的參數會從參數列表中刪除掉。我用了“apply()”來代替了“call()”，“apply()”本質上是和“call()”做著同樣的工作的，但不同的是它允許參數的傳入。這種結構也允許多個參數的傳入，如果你願意這樣做，你也可以為你的方法修改參數列表，例如：“init:function(arg1, arg2){}”。

如果你是使用JS對象作為參數傳入，你可能需要定義一個默認對象。一旦默認對象被聲明，你可以使用“$.extend”來合並參數對象和默認對象中的值，以形成一個新的參數對象來使用(在我們的例子中就是“settings”);

這裡有一些例子，用來演示以上的邏輯：

保存設置：添加持久性數據

有時你會想在你的插件中保存設置和信息，這時jQuery中的“data()”函數就可以派上用場了。它在使用上是非常簡單的，它會嘗試獲取和元素相關的數據，如果數據不存在，它就會創造相應的數據並添加到元素上。一旦你使用了“data()”來為元素添加信息，請確認你已經記住，當不再需要數據的時候，用“removeData()”來刪除相應的數據。

在上面的代碼中，我檢驗了元素的數據是否存在。如果數據不存在，“opti