jQuery 插件通常分兩類。

1.     基于選擇器的插件（支持鏈式操作）
2.     不基于選擇器的插件（不支持鏈式操作）

前段時間簡單學習了 jQuery 插件開發，開發了兩個簡單的插件，在此對兩種插件的開發模式做簡要總結。
基于選擇器的插件

通常開發模式如下：

(function($, window, undefined) { $.fn.PluginName = function(opts) { var defaults = {  // 插件自定義選項的默認值 }; // 以用戶的自定義選項覆蓋默認選項 var options = $.extend(defaults, opts || {}); return this.each(function() { // 讓插件支持鏈式操作  // 在這里編寫插件功能代碼 }); };})(jQuery, window);

首先，創建一個匿名的自執行函數，形參為 $ 、 window 和 undefined，實參為 jQuery 和 window。

嗯？為什么沒有為 undefined 對應地傳入一個實參呢？這是一個小技巧，考慮到 undefined 這個變量名可能在其它地方的 JavaScript 代碼賦過值，失去了它真正的意義，所以這里干脆不傳入這個參數，以確保它在那個匿名自執行函數中是真正的 undefined。

jQuery 傳入后對應為 $，這樣可以保證插件內調用的 $ 一定是 jQuery 而非 Prototype 之類的庫。

此類插件的調用方式一般為 $(selector).PluginName(); 這種形式。

此類具體示例可參考 https://github.com/libuchao/KTwitter
不基于選擇器的插件

由于此類插件不依賴于選擇器，所以也無鏈式操作一說。一般開發模式如下：

(function($, window, undefined) { $.PluginName = function(opts) { var defaults = {  // 插件自定義選項的默認值 }; // 以用戶的自定義選項覆蓋默認選項 var options = $.extend(defaults, opts || {}); // 在這里編寫插件功能代碼 };})(jQuery, window);

此類插件的調用形式一般為 $(selector).PluginName(); 這種形式。