劉哇勇的部落格要說jQuery 最成功的地方，我認(rèn)為是它的可擴(kuò)展性吸引了眾多開發(fā)者為其開發(fā)插件，從而建立起了一個生態(tài)系統(tǒng)。這好比大公司們爭相做平臺一樣，得平臺者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平臺及生態(tài)圈。

學(xué)會使用jQuery并不難，因為它簡單易學(xué)，并且相信你接觸jQuery后肯定也使用或熟悉了不少其插件。如果要將能力上升一個臺階，編寫一個屬于自己的插件是個不錯的選擇。

本教程可能不是最精品的，但一定是最細(xì)致的。

jQuery插件開發(fā)模式

軟件開發(fā)過程中是需要一定的設(shè)計模式來指導(dǎo)開發(fā)的，有了模式，我們就能更好地組織我們的代碼，并且從這些前人總結(jié)出來的模式中學(xué)到很多好的實(shí)踐。

根據(jù)《jQuery高級編程》的描述，jQuery插件開發(fā)方式主要有三種：

通過$.extend()來擴(kuò)展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
通常我們使用第二種方法來進(jìn)行簡單插件開發(fā)，說簡單是相對于第三種方式。第三種方式是用來開發(fā)更高級jQuery部件的，該模式開發(fā)出來的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動保存，各種關(guān)于插件的常用方法等，非常貼心，這里不細(xì)說。

而第一種方式又太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態(tài)方法而以。所以我們調(diào)用通過$.extend()添加的函數(shù)時直接通過$符號調(diào)用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())。請看下面的例子。

$.extend({
  sayHello: function(name) {
    console.log('Hello,' + (name ? name : 'Dude') + '!');
  }
})
$.sayHello(); //調(diào)用
$.sayHello('Wayou'); //帶參調(diào)用

 運(yùn)行結(jié)果：

 上面代碼中，通過$.extend()向jQuery添加了一個sayHello函數(shù)，然后通過$直接調(diào)用。到此你可以認(rèn)為我們已經(jīng)完成了一個簡單的jQuery插件了。

但如你所見，這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console，輸出特定格式的信息，定義一次后可以通過jQuery在程序中任何需要的地方調(diào)用它。 

$.extend({
  log: function(message) {
    var now = new Date(),
      y = now.getFullYear(),
      m = now.getMonth() + 1, //！JavaScript中月分是從0開始的
      d = now.getDate(),
      h = now.getHours(),
      min = now.getMinutes(),
      s = now.getSeconds(),
      time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
    console.log(time + ' My App: ' + message);
  }
})
$.log('initializing...'); //調(diào)用

但這種方式無法利用jQuery強(qiáng)大的選擇器帶來的便利，要處理DOM元素以及將插件更好地運(yùn)用于所選擇的元素身上，還是需要使用第二種開發(fā)方式。你所見到或使用的插件也大多是通過此種方式開發(fā)。

插件開發(fā)

下面我們就來看第二種方式的jQuery插件開發(fā)。

基本方法

先看一下它的基本格式：

$.fn.pluginName = function() {
  //your code goes here
}

基本上就是往$.fn上面添加一個方法，名字是我們的插件名稱。然后我們的插件代碼在這個方法里面展開。

比如我們將頁面上所有鏈接顏色轉(zhuǎn)成紅色，則可以這樣寫這個插件：

$.fn.myPlugin = function() {
  //在這里面,this指的是用jQuery選中的元素
  //example :$('a'),則this=$('a')
  this.css('color', 'red');
}

在插件名字定義的這個函數(shù)內(nèi)部，this指代的是我們在調(diào)用該插件時，用jQuery選擇器選中的元素，一般是一個jQuery類型的集合。比如$('a')返回的是頁面上所有a標(biāo)簽的集合，且這個集合已經(jīng)是jQuery包裝類型了，也就是說，在對其進(jìn)行操作的時候可以直接調(diào)用jQuery的其他方法而不需要再用美元符號來包裝一下。

所以在上面插件代碼中，我們在this身上調(diào)用jQuery的css()方法，也就相當(dāng)于在調(diào)用 $('a').css()。

理解this在這個地方的含義很重要。這樣你才知道為什么可以直接商用jQuery方法同時在其他地方this指代不同時我們又需要用jQuery重新包裝才能調(diào)用，下面會講到。初學(xué)容易被this的值整暈，但理解了就不難。

現(xiàn)在就可以去頁面試試我們的代碼了，在頁面上放幾個鏈接，調(diào)用插件后鏈接字體變成紅色。

<ul>
	<li>
		<a >我的微博</a>
	</li>
	<li>
		<a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
	</li>
	<li>
		<a >我的小站</a>
	</li>
</ul>
<p>這是p標(biāo)簽不是a標(biāo)簽，我不會受影響</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
	$(function(){
		$('a').myPlugin();
	})
</script>

運(yùn)行結(jié)果：

下面進(jìn)一步，在插件代碼里處理每個具體的元素，而不是對一個集合進(jìn)行處理，這樣我們就可以針對每個元素進(jìn)行相應(yīng)操作。

我們已經(jīng)知道this指代jQuery選擇器返回的集合，那么通過調(diào)用jQuery的.each()方法就可以處理合集中的每個元素了，但此刻要注意的是，在each方法內(nèi)部，this指帶的是普通的DOM元素了，如果需要調(diào)用jQuery的方法那就需要用$來重新包裝一下。

比如現(xiàn)在我們要在每個鏈接顯示鏈接的真實(shí)地址，首先通過each遍歷所有a標(biāo)簽，然后獲取href屬性的值再加到鏈接文本后面。

更改后我們的插件代碼為：

$.fn.myPlugin = function() {
  //在這里面,this指的是用jQuery選中的元素
  this.css('color', 'red');
  this.each(function() {
    //對每個元素進(jìn)行操作
    $(this).append(' ' + $(this).attr('href'));
  }))
}

調(diào)用代碼還是一樣的，我們通過選中頁面所有的a標(biāo)簽來調(diào)用這個插件

運(yùn)行結(jié)果：

到此，你已經(jīng)可以編寫功能簡單的jQuery插件了。是不是也沒那么難。

下面開始jQuery插件編寫中一個重要的部分，參數(shù)的接收。

支持鏈?zhǔn)秸{(diào)用

我們都知道jQuery一個時常優(yōu)雅的特性是支持鏈?zhǔn)秸{(diào)用，選擇好DOM元素后可以不斷地調(diào)用其他方法。

要讓插件不打破這種鏈?zhǔn)秸{(diào)用，只需return一下即可。

$.fn.myPlugin = function() {
  //在這里面,this指的是用jQuery選中的元素
  this.css('color', 'red');
  return this.each(function() {
    //對每個元素進(jìn)行操作
    $(this).append(' ' + $(this).attr('href'));
  }))
}

讓插件接收參數(shù)

一個強(qiáng)勁的插件是可以讓使用者隨意定制的，這要求我們提供在編寫插件時就要考慮得全面些，盡量提供合適的參數(shù)。

比如現(xiàn)在我們不想讓鏈接只變成紅色，我們讓插件的使用者自己定義顯示什么顏色，要做到這一點(diǎn)很方便，只需要使用者在調(diào)用的時候傳入一個參數(shù)即可。同時我們在插件的代碼里面接收。另一方面，為了靈活，使用者可以不傳遞參數(shù)，插件里面會給出參數(shù)的默認(rèn)值。

在處理插件參數(shù)的接收上，通常使用jQuery的extend方法，上面也提到過，但那是給extend方法傳遞單個對象的情況下，這個對象會合并到j(luò)Query身上，所以我們就可以在jQuery身上調(diào)用新合并對象里包含的方法了，像上面的例子。當(dāng)給extend方法傳遞一個以上的參數(shù)時，它會將所有參數(shù)對象合并到第一個里。同時，如果對象中有同名屬性時，合并的時候后面的會覆蓋前面的。

利用這一點(diǎn)，我們可以在插件里定義一個保存插件參數(shù)默認(rèn)值的對象，同時將接收來的參數(shù)對象合并到默認(rèn)對象上，最后就實(shí)現(xiàn)了用戶指定了值的參數(shù)使用指定的值，未指定的參數(shù)使用插件默認(rèn)值。

為了演示方便，再指定一個參數(shù)fontSize，允許調(diào)用插件的時候設(shè)置字體大小。

$.fn.myPlugin = function(options) {
  var defaults = {
    'color': 'red',
    'fontSize': '12px'
  };
  var settings = $.extend(defaults, options);
  return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
  });
}

現(xiàn)在，我們調(diào)用的時候指定顏色，字體大小未指定，會運(yùn)用插件里的默認(rèn)值12px。

$('a').myPlugin({
  'color': '#2C9929'
});

運(yùn)行結(jié)果：

同時指定顏色與字體大小：

$('a').myPlugin({
  'color': '#2C9929',
  'fontSize': '20px'
});

保護(hù)好默認(rèn)參數(shù)

注意到上面代碼調(diào)用extend時會將defaults的值改變，這樣不好，因為它作為插件因有的一些東西應(yīng)該維持原樣，另外就是如果你在后續(xù)代碼中還要使用這些默認(rèn)值的話，當(dāng)你再次訪問它時它已經(jīng)被用戶傳進(jìn)來的參數(shù)更改了。

一個好的做法是將一個新的空對象做為$.extend的第一個參數(shù)，defaults和用戶傳遞的參數(shù)對象緊隨其后，這樣做的好處是所有值被合并到這個空對象上，保護(hù)了插件里面的默認(rèn)值。

$.fn.myPlugin = function(options) {
  var defaults = {
    'color': 'red',
    'fontSize': '12px'
  };
  var settings = $.extend({},defaults, options);//將一個空對象做為第一個參數(shù)
  return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
  });
}

到此，插件可以接收和處理參數(shù)后，就可以編寫出更健壯而靈活的插件了。若要編寫一個復(fù)雜的插件，代碼量會很大，如何組織代碼就成了一個需要面臨的問題，沒有一個好的方式來組織這些代碼，整體感覺會雜亂無章，同時也不好維護(hù)，所以將插件的所有方法屬性包裝到一個對象上，用面向?qū)ο蟮乃季S來進(jìn)行開發(fā)，無疑會使工作輕松很多。

面向?qū)ο蟮牟寮_發(fā)

為什么要有面向?qū)ο蟮乃季S，因為如果不這樣，你可能需要一個方法的時候就去定義一個function，當(dāng)需要另外一個方法的時候，再去隨便定義一個function，同樣，需要一個變量的時候，毫無規(guī)則地定義一些散落在代碼各處的變量。

還是老問題，不方便維護(hù)，也不夠清晰。當(dāng)然，這些問題在代碼規(guī)模較小時是體現(xiàn)不出來的。

如果將需要的重要變量定義到對象的屬性上，函數(shù)變成對象的方法，當(dāng)我們需要的時候通過對象來獲取，一來方便管理，二來不會影響外部命名空間，因為所有這些變量名還有方法名都是在對象內(nèi)部。

接著上面的例子，我們可以把這個插件抽象成一個美化頁面的對象，因為他的功能是設(shè)置顏色啊字體啊什么的，當(dāng)然我們還可以加入其他功能比如設(shè)置下劃線啊什么的。當(dāng)然對于這個例子抽象成對象有點(diǎn)小題大做，這里僅作演示用。以后我可能會介紹我編寫的一個jQuery插件SlipHover,其中代碼就比較多，這樣的模式就用得上了。

所以我們新建一個對象命名為Beautifier，然后我們在插件里使用這個對象來編碼。

//定義Beautifier的構(gòu)造函數(shù)
var Beautifier = function(ele, opt) {
  this.$element = ele,
  this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration':'none'
  },
  this.options = $.extend({}, this.defaults, opt)
}
//定義Beautifier的方法
Beautifier.prototype = {
  beautify: function() {
    return this.$element.css({
      'color': this.options.color,
      'fontSize': this.options.fontSize,
      'textDecoration': this.options.textDecoration
    });
  }
}
//在插件中使用Beautifier對象
$.fn.myPlugin = function(options) {
  //創(chuàng)建Beautifier的實(shí)體
  var beautifier = new Beautifier(this, options);
  //調(diào)用其方法
  return beautifier.beautify();
}

通過上面這樣一改造，我們的代碼變得更面向?qū)ο罅?，也更好維護(hù)和理解，以后要加新功能新方法，只需向?qū)ο筇砑有伦兞考胺椒纯?，然后在插件里?shí)例化后即可調(diào)用新添加的東西。

插件的調(diào)用還是一樣的，我們對代碼的改動并不影響插件其他地方，只是將代碼的組織結(jié)構(gòu)改動了而以。

$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
  });
})

指定文字帶下劃線（我們在Beautifier對象中新加的功能，默認(rèn)不帶下劃線，如上面的例子）的調(diào)用：

$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px',
    'textDecoration': 'underline'
  });
})

到這里，你可以更好地編寫復(fù)雜的插件同時很好地組織代碼了。當(dāng)我們回頭去看上面的代碼時，其實(shí)也還是有改進(jìn)空間的。也就是下面介紹的關(guān)于命名空間及變量各什么的，一些雜項。

關(guān)于命名空間

不僅僅是jQuery插件的開發(fā)，我們在寫任何JS代碼時都應(yīng)該注意的一點(diǎn)是不要污染全局命名空間。因為隨著你代碼的增多，如果有意無意在全局范圍內(nèi)定義一些變量的話，最后很難維護(hù)，也容易跟別人寫的代碼有沖突。

比如你在代碼中向全局window對象添加了一個變量status用于存放狀態(tài)，同時頁面中引用了另一個別人寫的庫，也向全局添加了這樣一個同名變量，最后的結(jié)果肯定不是你想要的。所以不到萬不得已，一般我們不會將變量定義成全局的。

一個好的做法是始終用自調(diào)用匿名函數(shù)包裹你的代碼，這樣就可以完全放心，安全地將它用于任何地方了，絕對沒有沖突。

用自調(diào)用匿名函數(shù)包裹你的代碼

我們知道JavaScript中無法用花括號方便地創(chuàng)建作用域，但函數(shù)卻可以形成一個作用域，域內(nèi)的代碼是無法被外界訪問的。如果我們將自己的代碼放入一個函數(shù)中，那么就不會污染全局命名空間，同時不會和別的代碼沖突。

如上面我們定義了一個Beautifier全局變量，它會被附到全局的window對象上，為了防止這種事情發(fā)生，你或許會說，把所有代碼放到j(luò)Query的插件定義代碼里面去啊，也就是放到$.fn.myPlugin里面。這樣做倒也是種選擇。但會讓我們實(shí)際跟插件定義有關(guān)的代碼變得臃腫，而在$.fn.myPlugin里面我們其實(shí)應(yīng)該更專注于插件的調(diào)用，以及如何與jQuery互動。

所以保持原來的代碼不變，我們將所有代碼用自調(diào)用匿名函數(shù)包裹。

(function() {
  //定義Beautifier的構(gòu)造函數(shù)
  var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
      'color': 'red',
      'fontSize': '12px',
      'textDecoration': 'none'
    },
    this.options = $.extend({}, this.defaults, opt)
  }
  //定義Beautifier的方法
  Beautifier.prototype = {
    beautify: function() {
      return this.$element.css({
        'color': this.options.color,
        'fontSize': this.options.fontSize,
        'textDecoration': this.options.textDecoration
      });
    }
  }
  //在插件中使用Beautifier對象
  $.fn.myPlugin = function(options) {
    //創(chuàng)建Beautifier的實(shí)體
    var beautifier = new Beautifier(this, options);
    //調(diào)用其方法
    return beautifier.beautify();
  }
})();

這樣做的好處，也就是上面所闡述的那樣。另外還有一個好處就是，自調(diào)用匿名函數(shù)里面的代碼會在第一時間執(zhí)行，頁面準(zhǔn)備好過后，上面的代碼就將插件準(zhǔn)備好了，以方便在后面的代碼中使用插件。

目前為止似乎接近完美了。如果再考慮到其他一些因素，比如我們將這段代碼放到頁面后，前面別人寫的代碼沒有用分號結(jié)尾，或者前面的代碼將window, undefined等這些系統(tǒng)變量或者關(guān)鍵字修改掉了，正好我們又在自己的代碼里面進(jìn)行了使用，那結(jié)果也是不可預(yù)測的，這不是 我們想要的。我知道其實(shí)你還沒太明白，下面詳細(xì)介紹。

將系統(tǒng)變量以變量形式傳遞到插件內(nèi)部

來看下面的代碼，你猜他會出現(xiàn)什么結(jié)果？

var foo=function(){
  //別人的代碼
}//注意這里沒有用分號結(jié)尾

//開始我們的代碼。。。
(function(){
  //我們的代碼。。
  alert('Hello!');
})();

本來別人的代碼也正常工作，只是最后定義的那個函數(shù)沒有用分號結(jié)尾而以，然后當(dāng)頁面中引入我們的插件時，報錯了，我們的代碼無法正常執(zhí)行。

原因是我們用來充當(dāng)自調(diào)用匿名函數(shù)的第一對括號與上面別人定義的函數(shù)相連，因為中間沒有分號嘛，總之我們的代碼無法正常解析了，所以報錯。

所以好的做法是我們在代碼開頭加一個分號，這在任何時候都是一個好的習(xí)慣。

var foo=function(){
  //別人的代碼
}//注意這里沒有用分號結(jié)尾

//開始我們的代碼。。。
;(function(){
  //我們的代碼。。
  alert('Hello!');
})();

同時，將系統(tǒng)變量以參數(shù)形式傳遞到插件內(nèi)部也是個不錯的實(shí)踐。

當(dāng)我們這樣做之后，window等系統(tǒng)變量在插件內(nèi)部就有了一個局部的引用，可以提高訪問速度，會有些許性能的提升

最后我們得到一個非常安全結(jié)構(gòu)良好的代碼：

;(function($,window,document,undefined){
  //我們的代碼。。
  //blah blah blah...
})(jQuery,window,document);

而至于這個undefined，稍微有意思一點(diǎn)，為了得到?jīng)]有被修改的undefined，我們并沒有傳遞這個參數(shù)，但卻在接收時接收了它，因為實(shí)際并沒有傳，所以‘undefined'那個位置接收到的就是真實(shí)的'undefined'了。是不是有點(diǎn)hack的味道，值得細(xì)細(xì)體會的技術(shù)，當(dāng)然不是我發(fā)明的，都是從前人的經(jīng)驗中學(xué)習(xí)。

所以最后我們的插件成了這樣：

;(function($, window, document,undefined) {
  //定義Beautifier的構(gòu)造函數(shù)
  var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
      'color': 'red',
      'fontSize': '12px',
      'textDecoration': 'none'
    },
    this.options = $.extend({}, this.defaults, opt)
  }
  //定義Beautifier的方法
  Beautifier.prototype = {
    beautify: function() {
      return this.$element.css({
        'color': this.options.color,
        'fontSize': this.options.fontSize,
        'textDecoration': this.options.textDecoration
      });
    }
  }
  //在插件中使用Beautifier對象
  $.fn.myPlugin = function(options) {
    //創(chuàng)建Beautifier的實(shí)體
    var beautifier = new Beautifier(this, options);
    //調(diào)用其方法
    return beautifier.beautify();
  }
})(jQuery, window, document);

一個安全，結(jié)構(gòu)良好，組織有序的插件編寫完成。

關(guān)于變量定義及命名

現(xiàn)在談?wù)勱P(guān)于變量及方法等的命名，沒有硬性規(guī)定，但為了規(guī)范，遵循一些約定還是很有必要的。

變量定義：好的做法是把將要使用的變量名用一個var關(guān)鍵字一并定義在代碼開頭，變量名間用逗號隔開。原因有二：

一是便于理解，知道下面的代碼會用到哪些變量，同時代碼顯得整潔且有規(guī)律，也方便管理，變量定義與邏輯代碼分開；
二是因為JavaScript中所有變量及函數(shù)名會自動提升，也稱之為JavaScript的Hoist特性，即使你將變量的定義穿插在邏輯代碼中，在代碼解析運(yùn)行期間，這些變量的聲明還是被提升到了當(dāng)前作用域最頂端的，所以我們將變量定義在一個作用域的開頭是更符合邏輯的一種做法。當(dāng)然，再次說明這只是一種約定，不是必需的。

 變量及函數(shù)命名 一般使用

引號的使用：既然都扯了這些與插件主題無關(guān)的了，這里再多說一句，一般HTML代碼里面使用雙引號，而在JavaScript中多用單引號，比如下面代碼所示：

var name = 'Wayou';
document.getElementById(‘example').innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號，JavaScript中保持單引號

所使用的工具推崇的是Google開發(fā)的Closure Compiler。該工具需要Java環(huán)境的支持，所以使用前你可能需要先在機(jī)子上裝JRE, 然后再獲取Closure進(jìn)行使用。

同時也有很朋在線的代碼混淆壓縮工具，用起來也很方便。這些工具都是一搜一大把的。

插件發(fā)布

這一步不是必需的，但本著把事情做完整的態(tài)度，同時你也許也希望有更多人看到或使用你的插件吧。

首先你需要將插件代碼放到GitHub上創(chuàng)建一個Service Hook，這樣做的目的是你以后更新的插件后，jQuery可以自動去獲取新版本的信息然后展示在插件中心的頁面上。關(guān)于如何傳代碼到GitHub，你去下載GitHub 提供的客戶端工具，就會知道如何操作了，非常方便。關(guān)于在GitHub創(chuàng)建Service Hook，也只是點(diǎn)幾下而以的事情。下面會截圖介紹。
然后需要制作一個JSON格式的清單文件，其中包括關(guān)于插件的基本信息，具體格式及參數(shù)可以在jQuery官網(wǎng)插件發(fā)布指南頁面了解到，這里提供一個示例文件，是我之前寫的一個jQuery插件SlipHover：

{
  "name": "sliphover",
  "title": "SlipHover",
  "description": "Apply direction aware 2D/3D hover effect to images",
  "keywords": [
    "direction-aware",
    "animation",
    "effect",
    "hover",
    "image",
    "overlay",
    "gallery"
  ],
  "version": "1.1.1",
  "author": {
    "name": "Wayou",
    "email": "liuwayong@gmail.com",
    "url": "https://github.com/Wayou"
  },
  "maintainers": [
    {
      "name": "Wayou",
      "email": "liuwayong@gmail.com",
      "url": "https://github.com/Wayou"
    }
  ],
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
    }
  ],
  "bugs": "https://github.com/Wayou/sliphover/issues",
  "homepage": "http://wayou.github.io/SlipHover/",
  "docs": "http://wayou.github.io/SlipHover/",
  "demo":"http://wayou.github.io/SlipHover/",
  "download": "https://github.com/Wayou/SlipHover/zipball/master",
  "dependencies": {
    "jquery": ">=1.5"
  }
}

然后就可以在插件的根目錄執(zhí)行現(xiàn)行g(shù)it代碼來發(fā)布插件了。其中0.1.0是版本號，以后每次你的插件有新版本發(fā)布只需更新上面命令中的版本，創(chuàng)建新的tag，這樣jQuery插件中心就會自動獲取到新版本信息了

$ git tag 0.1.0
$ git push origin --tags

GitHub Service Hook

1 點(diǎn)擊項目右邊菜單的設(shè)置

2進(jìn)入設(shè)置頁面后點(diǎn)擊'Webhooks & Services '

3然后點(diǎn)擊右邊主頁面上的'Configure services' 按鈕

4這時出現(xiàn)一個很長的列表，向下找到j(luò)Query Plugins 點(diǎn)擊

5點(diǎn)擊選中框后點(diǎn)擊'更新設(shè)置'按鈕

到此就設(shè)置完成了。

Reference:

1. jQuery官網(wǎng)學(xué)習(xí)中心關(guān)于插件開發(fā)的文章： http://learn.jquery.com/plugins/
2. jQuery官網(wǎng)插件中心：http://plugins.jquery.com/
3. jQuery官網(wǎng)插件發(fā)布指南：http://plugins.jquery.com/docs/publish/
4. JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
5. Google Web Developer Tool : https://developers.google.com/closure/ 

原文：劉哇勇的部落格