哪10條建議能創(chuàng)建更好的jQuery插件

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)哪10條建議能創(chuàng)建更好的jQuery插件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在開發(fā)過很多 jQuery 插件以后，我慢慢的摸索出了一套開發(fā)jQuery插件比較標準的結(jié)構(gòu)和模式。這樣我就可以 copy & paste 大部分的代碼結(jié)構(gòu)，只要專注最主要的邏輯代碼就行了。

使用相同的設(shè)計模式和架構(gòu)也讓修復(fù)bug或者二次開發(fā)更容易。一套經(jīng)過驗證的架構(gòu)可以保證我的插件不出大的問題，不論插件簡單還是復(fù)雜。

我在這里分享10條我總結(jié)的經(jīng)驗。

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

這是我用的最多的一條。但是有時候在閉包外面的方法會不能調(diào)用。不過你的插件的代碼只為你自己的插件服務(wù)，所以不存在這個問題，你可以把所有的代碼都放在閉包里面。而方法可能應(yīng)該放在Prototype方法內(nèi)部，我們后面會講到這一點。

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

2. 提供插件的默認選項

你的插件應(yīng)該會有一些選項是可以讓開發(fā)者設(shè)置的，所以提供恢復(fù)默認選項是以有必要的。你可以通過jQuery的extend功能來設(shè)置這些選項：

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

3. 使用返回一個元素

JavaScript/jQuery有一個很好的特點就是可以進行方法級聯(lián)，所以我們不應(yīng)該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery插件中都遵守這一條。

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

4. 一次性代碼放在主循環(huán)以外

這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認值，只需要被實例化一次，而不是每次調(diào)用你插件功能的時候都實例化，你應(yīng)該把這段代碼放在插件方法的外面。這樣可以讓你的插件運行的更高效，節(jié)省內(nèi)存。我們將會在后面討論prototype的時候，看這個方法在實際中的運用。

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”是完全在插件方法外面的，由于這些代碼是在閉包里面，我們不用擔(dān)心這些變量被重寫。

5. 為什么要設(shè)置 Class Prototyping

作為你代碼的血與肉，方法和函數(shù)應(yīng)該放在prototype函數(shù)內(nèi)。有兩個原因：

◆ 它可以節(jié)省很多內(nèi)存，因為可以不用重復(fù)創(chuàng)建這些方法。

◆ 引用一個現(xiàn)成的方法比重新創(chuàng)建一個好快很多。

簡單的說，prototype就是擴展了一個對象，為它提供方法，而不用在每一個對象中實例化這些方法。這也讓你的代碼更有條理和高效。一旦你習(xí)慣這種開發(fā)方式，你會發(fā)現(xiàn)它在你將來的項目中為你節(jié)省了很多時間。

6. 如何設(shè)置 Class Prototyping

設(shè)置一個 prototype 方法有兩個部分。首先我們需要創(chuàng)建我們最初的類定義，在多數(shù)情況下這就意味著創(chuàng)建一個對象。這個定義包含了每一個對象實例都不同的部分。在我的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      }  }

這里的關(guān)鍵是要讓prototype的方法是通用的，但是數(shù)據(jù)是每個實例自己的，可以用“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. 在每一個對象中保存設(shè)置

我一直在每一個對象中保存自己的設(shè)置，然后操作它自己的設(shè)置。這樣你就不用在不同的方法中傳遞很多參數(shù)。把這些變量放在對象中，也方便你在其他地方調(diào)用這些變量。

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

9. 分離你的Prototype方法邏輯

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

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

10. 提供 Setter/Getter 選項

這一條不是必須的，但是我發(fā)現(xiàn)我所有的插件都包用到了這一條。因為它只需要一點點代碼，就能為別人提供一個他可能需要的功能。

基本上，我們只要讓開發(fā)者能夠設(shè)置或者獲取元素已經(jīng)存在的值：

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

首先我們要把元素和對象關(guān)聯(lián)起來，然后我們就可以引用它。我們在返回元素之前做如下操作：

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插件開發(fā)的核心，并且可以作為開發(fā)的模板。有一套基本的代碼可以極大的縮短你的開發(fā)時間，并且能夠讓你設(shè)計插件架構(gòu)的時候更自信。

上述就是小編為大家分享的哪10條建議能創(chuàng)建更好的jQuery插件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。