10個建議幫助你創建更好的jQuery插件_jquery

本文總結了幫助你創建更好jQuery插件的10個建議。分享給大家供大家參考。具體說明如下：

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

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插件開發的核心，並且可以作為開發的模板。有一套基本的程式碼可以極大的縮短你的開發時間，並且能夠讓你設計插件架構的時候更有自信。

希望本文所述對大家的jquery程式設計有所幫助。