10條建議讓你建立更好的jQuery外掛程式

標籤：off   預設值   驗證   containe   執行個體   from   ext   參考   set   

在開發過很多 jQuery 外掛程式以後，我慢慢的摸索出了一套開發jQuery外掛程式比較標準的結構和模式。這樣我就可以 copy & paste 大部分的代碼結構，只要專註最主要的邏輯代碼就行了。使用相同的設計模式和架構也讓修複bug或者二次開發更容易。一套經過驗證的架構可以保證我的外掛程式不出大的問題，不論外掛程式簡單還是複雜。我在這裡分享10條我總結的經驗。

　　1. 把你的代碼全部放在閉包裡面

　　這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。

　　不過你的外掛程式的代碼只為你自己的外掛程式服務，所以不存在這個問題，你可以把所有的代碼都放在閉包裡面。

　　而方法可能應該放在Prototype方法內部，。

123	(function($)  {      //code here  })(jQuery);

　　2. 提供外掛程式的預設選項

　　你的外掛程式應該會有一些選項是可以讓開發人員設定的，所以提供恢複預設選項是以有必要的。 你可以通過jQuery的extend功能來設定這些選項：

12345

var defaultSettings = {      mode            : ‘Pencil‘,                                  lineWidthMin    : ‘0‘,                                  lineWidthMax    : ‘10‘,                                   lineWidth       : ‘2‘ };   settings = $.extend({}, defaultSettings, settings || {});

　　3. 使用返回一個元素

　　JavaScript/jQuery有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery外掛程式中都遵守這一條。

123456

$.fn.wPaint = function(settings)  {      return this.each(function()  {          var elem = $(this);           //run some code here      }  }

　　4. 一次性代碼放在主迴圈以外

　　這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆預設值，只需要被執行個體化一次，而不是每次調用你外掛程式功能的時候都執行個體化，你應該把這段代碼放在外掛程式方法的外面。這樣可以讓你的外掛程式啟動並執行更高效，節省記憶體。

12345678910111213

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 外掛程式中，我是這麼寫的：

123456

function Canvas(settings)  {      this.settings = settings;      this.draw = false;      this.canvas = null;             this.ctx = null;       return this;  }

　　下面來添加全域的方法：

12345

Canvas.prototype =  {      generate: function() {          //generate code      }  }

　　這裡的關鍵是要讓prototype的方法是通用的，但是資料是每個執行個體自己的，可以用“this”引用。

　　7. 使用 “this” 對象

　　通過使用“$this”，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要注意的是， $this 這個名字是可以改的，任意的變數名都可以。

1234567891011121314151617

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. 在每一個對象中儲存設定

　　我一直在每一個對象中儲存自己的設定，然後操作它自己的設定。這樣你就不用在不同的方法中傳遞很多參數。把這些變數放在對象中，也方便你在其他地方調用這些變數。

1234	function Canvas(settings)  {      this.settings = settings;       return this;  }

　　9. 分離你的Prototype方法邏輯

　　這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求?”或者“別人來寫這個方法有多困難?”。當然這是一個靈活性拿捏的問題。這裡列出了我的Color Picker jQuery Plugin 的方法，你可以參考一下：

12345678

generate()  appendColors()  colorSelect()  colorHoverOn()  colorHoverOff() appendToElement() showPalette() hidePalette()

　　10. 提供 Setter/Getter 選項

　　這一條不是必須的，但是我發現我所有的外掛程式都包用到了這一條。因為它只需要一點點代碼，就能為別人提供一個他可能需要的功能。

　　基本上，我們只要讓開發人員能夠設定或者擷取元素已經存在的值：

1	var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");

　　總結：以上十條基本上覆蓋了jQuery外掛程式開發的核心，並且可以作為開發的模板。有一套基本的代碼可以極大的縮短你的開發時間，並且能夠讓你設計外掛程式架構的時候更自信。

10條建議讓你建立更好的jQuery外掛程式