在開發過很多 jQuery 外掛以後，我慢慢的摸索出了一套開發jQuery外掛比較標準的結構和模式。這樣我就可以複製並貼上大部分的程式碼結構，只要專注最主要的邏輯程式碼就行了。
使用相同的設計模式和架構也讓修復bug或者二次開發更容易。一套經過驗證的架構可以保證我的外掛不出大的問題，不論外掛簡單還是複雜。我在這裡分享10條我總結的經驗。
1. 把你的程式碼全部放在閉包裡面
這是我用的最多的一條。但是有時候在閉包外面的方法會不能呼叫。不過你的外掛的程式碼只為你自己的外掛服務，所以不存在這個問題，你可以把所有的程式碼都放在閉包裡面。而方法可能應該放在Prototype方法內部，我們後面會講到這一點。
|
1 2 3 4 |
(function($) { //code here })(jQuery); |
2. 提供外掛的預設選項
你的外掛應該會有一些選項是可以讓開發者設定的，所以提供恢復預設選項是以有必要的。你可以通過jQuery的extend功能來設定這些選項：
|
1 2 3 4 5 6 7 8 |
var defaultSettings = { mode : 'Pencil', lineWidthMin : '0', lineWidthMax : '10', lineWidth : '2' }; settings = $.extend({}, defaultSettings, settings || {}); |
3. 使用返回一個元素
JavaScript/jQuery有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery外掛中都遵守這一條。
|
1 2 3 4 5 6 7 8 9 |
$.fn.wPaint = function(settings) { return this.each(function() { var elem = $(this); //run some code here } } |
4. 一次性程式碼放在主迴圈以外
這一條很重要，但是常常被忽略。簡單的講，如果你有一段程式碼是一堆預設值，只需要被例項化一次，而不是每次呼叫你外掛功能的時候都例項化，你應該把這段程式碼放在外掛方法的外面。這樣可以讓你的外掛執行的更高效，節省記憶體。我們將會在後面討論prototype的時候，看這個方法在實際中的運用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var defaultSettings = { mode : 'Pencil', lineWidthMin : '0', lineWidthMax : '10', lineWidth : '2' }; $.fn.wPaint = function(settings) { settings = $.extend({}, defaultSettings, settings || {}); return this.each(function() { var elem = $(this); //run some code here } } |
你可以注意到，上面程式碼中的“defaultSettings”是完全在外掛方法外面的，由於這些程式碼是在閉包裡面，我們不用擔心這些變數被重寫。
5. 為什麼要設定 Class Prototyping
作為你程式碼的血與肉，方法和函式應該放在prototype函式內。有兩個原因：
▲它可以節省很多記憶體，因為可以不用重複建立這些方法。
▲引用一個現成的方法比重新建立一個好快很多。
簡單的說，prototype就是擴充套件了一個物件，為它提供方法，而不用在每一個物件中例項化這些方法。這也讓你的程式碼更有條理和高效。一旦你習慣這種開發方式，你會發現它在你將來的專案中為你節省了很多時間。
6. 如何設定 Class Prototyping
設定一個 prototype 方法有兩個部分。首先我們需要建立我們最初的類定義，在多數情況下這就意味著建立一個物件。這個定義包含了每一個物件例項都不同的部分。在我的 Paint jQuery Plugin 外掛中，我是這麼寫的：
|
1 2 3 4 5 6 7 8 9 |
function Canvas(settings) { this.settings = settings; this.draw = false; this.canvas = null; this.ctx = null; return this; } |
下面來新增全域性的方法：
|
1 2 3 4 5 6 7 |
Canvas.prototype = { generate: function() { //generate code } } |
這裡的關鍵是要讓prototype的方法是通用的，但是資料是每個例項自己的，可以用“this”引用。
7. 使用 “this” 物件
通過使用“$this”，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要注意的是， $this 這個名字是可以改的，任意的變數名都可以。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Canvas.prototype = { generate: function() { //some code var $this = this; var buton = //...some code button.click(function(){ //using this will not be found since it has it's own this //use $this instead. $this.someFunc($this); }); }, someFunc: function($this) { //won't know what "this" is. //use $this instead passed from the click event } } |
8. 在每一個物件中儲存設定
我一直在每一個物件中儲存自己的設定，然後操作它自己的設定。這樣你就不用在不同的方法中傳遞很多引數。把這些變數放在物件中，也方便你在其他地方呼叫這些變數。
|
1 2 3 4 5 6 |
function Canvas(settings) { this.settings = settings; return this; } |
9. 分離你的Prototype方法邏輯
這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “如果其他人要重寫這個方法的話，你的程式碼是否能滿足他的需求？”或者“別人來寫這個方法有多困難？”。當然這是一個靈活性拿捏的問題。這裡列出了我的 Color Picker jQuery Plugin 的方法，你可以參考一下：
|
1 2 3 4 5 6 7 8 |
generate() appendColors() colorSelect() colorHoverOn() colorHoverOff() appendToElement() showPalette() hidePalette() |
10. 提供 Setter/Getter 選項
這一條不是必須的，但是我發現我所有的外掛都包用到了這一條。因為它只需要一點點程式碼，就能為別人提供一個他可能需要的功能。
基本上，我們只要讓開發者能夠設定或者獲取元素已經存在的值：
|
1 2 |
var lineWidth = $("#container").wPaint("lineWidth"); $("#container").wPaint("lineWidth", "5"); |
首先我們要把元素和物件關聯起來，然後我們就可以引用它。我們在返回元素之前做如下操作：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
return this.each(function() { var elem = $(this); var canvas = new Canvas(settings); //run some code here elem.data("_wPaint_canvas", canvas); } 下面的程式碼明確了我們究竟要做什麼： $.fn.wPaint = function(option, settings) { if(typeof option === 'object') { settings = option; } else if(typeof option === 'string') { if( this.data('_wPaint_canvas') && defaultSettings[option] !== undefined ){ var canvas = this.data('_wPaint_canvas'); if(settings) { canvas.settings[option] = settings; return true; } else { return canvas.settings[option]; } } else return false; } return this.each(function() { //run some code here } } |
以上十條基本上覆蓋了jQuery外掛開發的核心，並且可以作為開發的模板。有一套基本的程式碼可以極大的縮短你的開發時間，並且能夠讓你設計外掛架構的時候更自信。