在開發(fā)過(guò)很多 jQuery 插件以后，我慢慢的摸索出了一套開發(fā)jQuery插件比較標(biāo)準(zhǔn)的結(jié)構(gòu)和模式。這樣我就可以復(fù)制并粘貼大部分的代碼結(jié)構(gòu)，只要專注最主要的邏輯代碼就行了。 使用相同的設(shè)計(jì)模式和架構(gòu)也讓修復(fù)bug或者二次開發(fā)更容易。一套經(jīng)過(guò)驗(yàn)證的架構(gòu)可以保證我的插件不出大的問(wèn)題，不論插件簡(jiǎn)單還是復(fù)雜。我在這里分享10條我總結(jié)的經(jīng)驗(yàn)。

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

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

/* 腳本之家 www.dbjr.com.cn */
(function($)  
 {  
 //code here  
 })(jQuery); 

2. 提供插件的默認(rèn)選項(xiàng)

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

/* 腳本之家 www.dbjr.com.cn */
var defaultSettings = {  
  mode      : 'Pencil',  
  lineWidthMin  : '0',  
  lineWidthMax  : '10',  
  lineWidth    : '2' 
};  
  
settings = $.extend({}, defaultSettings, settings || {});

3. 使用返回一個(gè)元素

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

$.fn.wPaint = function(settings)  
 {  
  return this.each(function()  
  {  
    var elem = $(this);  
  
    //run some code here  腳本之家 www.dbjr.com.cn
  }  
}

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

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

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 腳本之家 www.dbjr.com.cn 
   }  
}

你可以注意到，上面代碼中的“defaultSettings”是完全在插件方法外面的，由于這些代碼是在閉包里面，我們不用擔(dān)心這些變量被重寫。

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

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

▲它可以節(jié)省很多內(nèi)存，因?yàn)榭梢圆挥弥貜?fù)創(chuàng)建這些方法。

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

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

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

設(shè)置一個(gè) prototype 方法有兩個(gè)部分。首先我們需要?jiǎng)?chuàng)建我們最初的類定義，在多數(shù)情況下這就意味著創(chuàng)建一個(gè)對(duì)象。這個(gè)定義包含了每一個(gè)對(duì)象實(shí)例都不同的部分。在我的 Paint jQuery Plugin 插件中，我是這么寫的：

/* 腳本之家 www.dbjr.com.cn */
function Canvas(settings)  
{  
  this.settings = settings;  
  this.draw = false;  
  this.canvas = null;     
  this.ctx = null;  
  
  return this;  
}

下面來(lái)添加全局的方法：

/* 腳本之家 www.dbjr.com.cn */
Canvas.prototype =  
{  
 generate: function()  
 {  
    //generate code  
 }  
}

這里的關(guān)鍵是要讓prototype的方法是通用的，但是數(shù)據(jù)是每個(gè)實(shí)例自己的，可以用“this”引用。

7. 使用 “this” 對(duì)象

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

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  
  }  
}  /* 腳本之家 www.dbjr.com.cn */

8. 在每一個(gè)對(duì)象中保存設(shè)置

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

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

9. 分離你的Prototype方法邏輯

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

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

10. 提供 Setter/Getter 選項(xiàng)

這一條不是必須的，但是我發(fā)現(xiàn)我所有的插件都包用到了這一條。因?yàn)樗恍枰稽c(diǎn)點(diǎn)代碼，就能為別人提供一個(gè)他可能需要的功能。

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

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

首先我們要把元素和對(duì)象關(guān)聯(lián)起來(lái)，然后我們就可以引用它。我們?cè)诜祷卦刂白鋈缦虏僮鳎?/p>

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  
  }  
}  /* 腳本之家 www.dbjr.com.cn */

以上十條基本上覆蓋了jQuery插件開發(fā)的核心，并且可以作為開發(fā)的模板。有一套基本的代碼可以極大的縮短你的開發(fā)時(shí)間，并且能夠讓你設(shè)計(jì)插件架構(gòu)的時(shí)候更自信。

以上這篇jQuery使用經(jīng)驗(yàn)小技巧(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論