如何寫乙個jQuery外掛程式

jquery 的外掛程式開發模式主要有三種：

這裡我們選用第二種：

$.fn.myplugin = functin()

因為這種方法是加在jquery物件上，可以在jquery選擇器選擇元素後直接呼叫：

$('body').myplugin();

若對其他兩種方法有興趣，請自行檢視jquery 官方文件。

改變元素的背景顏色外掛程式：

$.fn.tinyplugin = function()

這樣寫的話，顏色不能使用時定義，修改一下：

$.fn.tinyplugin = function(bg)

以上是乙個jquery外掛程式的基本結構。但編寫更複雜的jquery外掛程式，借助物件導向的思想可以使外掛程式具有更好的擴充套件性、可維護性。

1.建立myplugin建構函式

2.定義myplugin的方法

3.新增到jquery物件中

首先將**放到乙個自執行的匿名函式中，防止全域性物件汙染：

根據上面的步驟，基本結構大致如下：

// 定義建構函式
function myplugin($element,options)
// 新增方法
myplugin.prototype = ,
method2: function()
};// 新增到jquery物件中
$.fn.myplugin = function(options)

後面將在這個結構上進行完善：

放到匿名函式內部的主要作用是隔離作用域，避免變數汙染，而自執行可以返回需要的函式或物件，而不需要每次通過條件判斷為處理，只需要在首次載入的時候賦值給某個變數。更詳細的資訊參見知乎上的這個問題。

;(function($))(jquery);

留意到上面，函式前還加了分號，這是由於自執行函式前省略分號的表示式時，某些情況下會報錯，可以看這裡。

在匿名函式裡面還傳入了jquery物件，這樣做的好處是美元符號$在內部是乙個私有變數，僅代表jquery，可以防止和其他使用$的庫衝突。

有的自執行函式還將window物件、undefined物件傳入，具體作用可以看這裡。

options是提供給使用者定義的引數。乙個好的外掛程式，應該提供必要的引數給使用者，並且提供好預設的引數，因為很多情況下不是每個引數都需要自定義。之前在專案中寫了乙個載入更多loadmore外掛程式，就以這個外掛程式為例：

function loadmore($element,options)
this.options = $.extend({},this._defaults,options||{}); // 合併引數
}

一般外掛程式都會有乙個init()方法，呼叫外掛程式時做一些初始化操作：

function myplugin($element,options)
// 新增方法
myplugin.prototype = 
};

為了防止使用者多次在同乙個元素上呼叫外掛程式，有必要加一些已初始化的判斷。通過在該元素上用data()方法快取外掛程式的例項物件，每次例項化時判斷該快取物件即可。

$.fn.myplugin = function(options)
}

$選擇器返回的有可能是多個元素，因此需要返回的所有元素新增外掛程式，直接使用jquery自帶的each()方法：

$.fn.myplugin = function(options)
});}

注意這裡的this是jquery物件，而不是原生js物件。所以可以直接使用this.each()。

由於jquery有個鏈式操作的特性，在每個方法呼叫後都會返回該物件，因此只需要return該物件即可保持鏈式操作：

$.fn.myplugin = function(options));
}

外掛程式不僅有可配置的引數，很多時候還需要呼叫方法。比如說「載入更多」外掛程式，可能需要知道現在載入到第幾頁，或者是否已經全部載入完畢。此時就需要呼叫方法來獲得結果。

在前面我們知道是在prototype定義方法：

loadmore.prototype = ,
reload: function(){},
// 開始載入
startload: function(){},
// 本次載入完成
loadover: function(){},
// 全部載入完畢
allloadover: function(){},
// 插入內容
insert: function(content){}
}

方法名可以通過options引數傳入，只需在內部做字串判斷：

$.fn.loadmore = function(options,para)
// 如果是字串則呼叫方法
if($.type(options) === 'string') 
return this; // 保持鏈式
}

因此我們呼叫方法可以像下面這樣：

$('#list').loadmore('startload');

但是，當呼叫的方法需要傳參怎麼辦？很簡單，那就再加乙個引數para：

$.fn.loadmore = function(options,para)
return this; // 保持鏈式
}

呼叫帶引數的方法：

$('#list').loadmore('insert','這是待插入的內容');

這裡如果要使用**函式，和上面也是一樣的道理，只需在內部加個函式判斷。不詳述。若有更多的引數，請使用物件{}。

在寫loadmore外掛程式的過程中，還發現需要使用事件，比如說滾動到某個位置時，執行某些操作。也很簡單，事件我們可以直接寫在配置引數 options 中：

this._defaults =

然後在內部init()函式中呼叫前判斷：

init: function()
});}

現在流行模組化開發，amd是require.js在推廣過程中的規範化產出，amd說明見這裡。

下面的**可以使你的外掛程式相容amd規範，可以在require.js中直接呼叫，當然，沒有使用require.js直接引入也是可以的。

// amd support
(function(factory)else 
}(function($);
// 這裡寫外掛程式**
return exports;
}));

上面的前一段是判斷是否有define函式，有則呼叫define方法定義乙個模組，否則直接執行。後一段的exports物件是模組的返回物件，模組對外的介面。關於amd規範的具體資訊，可參考阮一峰的這篇文章。

如何寫乙個jQuery外掛程式

如何寫乙個jquery外掛程式

如何去寫乙個jquery外掛程式

如何寫乙個Stack？

如何寫乙個jQuery外掛程式

如何寫乙個jquery外掛程式

如何去寫乙個jquery外掛程式

如何寫乙個Stack？

相關推薦