JavaScript的jQuery庫外掛程式的簡要開發指南_jquery

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(); 這種形式。