1. 把你的代碼全部放在閉包裡面 這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。不過你的插件的代碼只為你自己的插件服務，所以不存在這個問題，你可以把所有的代碼都放在閉包裡面。而方法可能應該放在Prototype方法內部。 2. 提供插件的預設選項 你的插件應該會有一些選項是可以讓開發者 ...
1. 把你的代碼全部放在閉包裡面
這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。
不過你的插件的代碼只為你自己的插件服務，所以不存在這個問題，你可以把所有的代碼都放在閉包裡面。
而方法可能應該放在Prototype方法內部。
(function($) {
//code here
})(jQuery);
2. 提供插件的預設選項
你的插件應該會有一些選項是可以讓開發者設置的，所以提供恢復預設選項是以有必要的。 你可以通過jQuery的extend功能來設置這些選項：
var defaultSettings = { mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2' };
settings = $.extend({}, defaultSettings, settings || {});
3. 使用返回一個元素
JavaScript/jQuery有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery插件中都遵守這一條。
$.fn.wPaint = function(settings) {
return this.each(function() {
var elem = $(this);
//run some code here
}
}
4. 一次性代碼放在主迴圈以外
這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆預設值，只需要被實例化一次，而不是每次調用你插件功能的時候都實例化，你應該把這段代碼放在插件方法的外面。這樣可以讓你的插件運行的更高效，節省記憶體。
var defaultSettings = {
mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2' };
settings = $.extend({}, defaultSettings, settings || {});
$.fn.wPaint = function(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 插件中，我是這麼寫的：
function Canvas(settings) {
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return this; }
下麵來添加全局的方法：
Canvas.prototype = {
generate: function() {
//generate code
}
}
這裡的關鍵是要讓prototype的方法是通用的，但是數據是每個實例自己的，可以用“this”引用。
7. 使用 “this” 對象
通過使用“$this”，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要註意的是， $this 這個名字是可以改的，任意的變數名都可以。
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. 在每一個對象中保存設置
我一直在每一個對象中保存自己的設置，然後操作它自己的設置。這樣你就不用在不同的方法中傳遞很多參數。把這些變數放在對象中，也方便你在其他地方調用這些變數。
function Canvas(settings) {
this.settings = settings;
return this;
}
9. 分離你的Prototype方法邏輯
這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求?”或者“別人來寫這個方法有多困難?”。當然這是一個靈活性拿捏的問題。這裡列出了我的Color Picker jQuery Plugin 的方法，你可以參考一下：
generate() appendColors() colorSelect() colorHoverOn() colorHoverOff() appendToElement() showPalette() hidePalette()
10. 提供 Setter/Getter 選項
這一條不是必須的，但是我發現我所有的插件都包用到了這一條。因為它只需要一點點代碼，就能為別人提供一個他可能需要的功能。
基本上，我們只要讓開發者能夠設置或者獲取元素已經存在的值：
var lineWidth = $("#container").wPaint("lineWidth"); $("#container").wPaint("lineWidth", "5");
總結：以上十條基本上覆蓋了jQuery插件開發的核心，並且可以作為開發的模板。有一套基本的代碼可以極大的縮短你的開發時間，並且能夠讓你設計插件架構的時候更自信。
