jQuery插件的幾種寫法大總結

插件編寫的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，友善後期維護

通過$.extend()來擴充jquery

通過$.fn 向jquery添加新的方法

通過$.widget()應用jquery ui的部件工廠方式建立

$.extend()相對簡單，一般很少能夠獨立開發複雜插件，僅僅是在jquery命名空間或者了解成jquery身上添加了一個靜态方法而以

我們調用通過$.extend()添加的函數時直接通過$符号調用（$.myfunction()），而不需要選中dom元素($('#example').myfunction())

$.widget()是一種進階的開發模式，該模式開發出來的部件帶有很多jquery内建的特性，比如插件的狀态資訊自動儲存，各種關于插件的常用方法等

$.fn則是一般插件開發用到的方式，可以利用jquery強大的選擇器帶來的便利，以及将插件更好地運用于所選擇的元素身上，使用的插件也大多是通過此種方式開發

說明：上面代碼中，通過$.extend()向jquery添加了一個sayhello函數，然後通過$直接調用

基本上就是往$.fn上面添加一個方法，名字是我們的插件名稱。然後我們的插件代碼在這個方法裡面展開

将頁面上所有連結顔色轉成紅色，則可以這樣寫這個插件

1、在插件名字定義的這個函數内部，this指代的是我們在調用該插件時，用jquery選擇器選中的元素，一般是一個jquery類型的集合。在插件名字定義的這個函數内部，this指代的是我們在調用該插件時，用jquery選擇器選中的元素，一般是一個jquery類型的集合

2、如果通過調用jquery的.each()方法處理集合中的每個元素時要注意的是，在each方法内部，this指帶的是普通的dom元素了，如果需要調用jquery的方法那就需要用$來重新包裝一下

jquery一個時常優雅的特性是支援鍊式調用，選擇好dom元素後可以不斷地調用其他方法。要讓插件不打破這種鍊式調用，隻需return一下即可

1、一個強勁的插件是可以讓使用者随意定制的，這要求我們提供在編寫插件時就要考慮得全面些，盡量提供合适的參數

2、比如現在我們不想讓連結隻變成紅色，我們讓插件的使用者自己定義顯示什麼顔色，要做到這一點很友善，隻需要使用者在調用的時候傳入一個參數即可。同時我們在插件的代碼裡面接收

3、為了靈活，使用者可以不傳遞參數，插件裡面會給出參數的預設值

4、在處理插件參數的接收上，通常使用jquery的extend方法，當給extend方法傳遞一個以上的參數時，它會将所有參數對象合并到第一個裡。同時，如果對象中有同名屬性時，合并的時候後面的會覆寫前面的。

5、可以在插件裡定義一個儲存插件參數預設值的對象，同時将接收來的參數對象合并到預設對象上，最後就實作了使用者指定了值的參數使用指定的值，未指定的參數使用插件預設值

6、保護好預設參數：做法是将一個新的空對象做為$.extend的第一個參數，defaults和使用者傳遞的參數對象緊随其後，這樣做的好處是所有值被合并到這個空對象上，保護了插件裡面的預設值

7.執行個體

1、不僅僅是jquery插件的開發，我們在寫任何js代碼時都應該注意的一點是不要污染全局命名空間。因為随着你代碼的增多，如果有意無意在全局範圍内定義一些變量的話，最後很難維護，也容易跟别人寫的代碼有沖突

2、比如你在代碼中向全局window對象添加了一個變量status用于存放狀态，同時頁面中引用了另一個别人寫的庫，也向全局添加了這樣一個同名變量，最後的結果肯定不是你想要的。是以不到萬不得已，一般我們不會将變量定義成全局的

3、可以使用自調用匿名函數包裹插件代碼

這樣可以避免我們将這段代碼放到頁面後，前面别人寫的代碼沒有用分号結尾，這樣，這個插件代碼就會報錯。

1、我們下載下傳的插件裡面，一般都會提供一個壓縮的版本一般在檔案名裡帶個'min'字樣。也就是壓縮後的版本。并且平時我們使用的jquery也是官網提供的壓縮版本，jquery.min.js

2、這裡的壓縮不是指代碼進行功能上的壓縮，而是通過将代碼裡面的變量名，方法函數名等等用更短的名稱來替換，并且删除注釋（如果有的話）删除代碼間的空白及換行所得到的濃縮版本。同時由于代碼裡面的各種名稱都已經被替代，别人無法閱讀和厘清其邏輯，也起到了混淆代碼的作用

在javascript中，沒有真正意義的共有變量、私有變量、常量等概念，當javascript代碼達到一定數量級時，過段時間回頭看自己寫的代碼，會把自己也搞暈的

1、請在私有變量前加“_” 比如： var _pub = this.pub;

2、常量請大寫 比如： this.color = "red";

3、jquery對象變量前加“$” 比如： this.$obj = $("#layout");

4、object、array變量前加“o”、“a”很多人喜歡給數組變量加個”s”，這也是可以的，按個人習慣，如果你覺得有必要還可以給函數前加個“fn”。

1、請多使用data()方法jquery中data()方法非常有用，尤其在jquery插件開發中，因為data()所建立的緩存，可以完整的儲存各種資料類型的資料，這是其他緩存機制無法比拟的

2、請使用bind/on來綁定事件 很多朋友喜歡以下的代碼：

但在jquery插件開發中更提倡使用bind/on：

3、善用typeof判斷資料類型，這個方法在參數判斷中非常有用處

4、插件名加個獨有字首 jquery插件有太多了，插件撞車時很容易的事，比如搜尋框插件：