製作自己的 jQuery Plugin

寫了一陣子 jQuery 之後，可能會發現自己時常用到某些功能或結構。

這時候不妨花一點時間將這些程式碼整理成一個 plugin，不只在未來開發時自己可以使用以提升開發效率，也可以分享給同事，甚至上傳到網路社群上分享給全世界的人。

所謂的 jQuery plugin 指的是，將用 jquery 開發的某個功能的程式封裝起來，以供重複使用。

以下介紹如何自製 jQuery plugin。

Plugin 命名

取一個自己高興的名字，不過當然最好是能夠看的出來 plugin 功能的名稱。建議格式為 jquery.[自訂的 plugin 名稱].js。
如，jquery.foobar.js。

自訂方法

擴充 jQuery 物件，建立一個或多個 plugin 方法 (method)，如：
Create one or more plugin methods by extending the jQuery object, eg.:

jQuery.fn.foobar = function() {
   // do something
 };

建立以上的方法後，我們將可以這樣存取這個方法：

$(...).foobar();

預設設定

建立一些可讓使用者自訂的預設設定：

jQuery.fn.foobar = function(options) {
   var settings = jQuery.extend({
     value: 5, name: "pete", bar: 655
   }, options);
 };

我們將可以不做任何設定 (使用預設值) 來呼叫這個方法：

$("...").foobar();

或者可以設定 value、name、bar 這三個選項中任意個的值：

$("...").foobar({ value: 123, bar: 9 });

文件

如果打算將自己做的 plugin 發佈出去給別人使用，最好可以提供一些使用例子和說明文件，這樣可以幫助別人理解 plugin 的功能與用法。

實例

舉一個 checkbox 的例子。

我們在做表單時，時常會使用到 checkbox 或 radio button，然後我們可能會希望在某個事件發生時，其可以被選取或者被不選取。

先將這個例子簡化，假設我們要做一個可以選取 checkbox 的 plugin：

jQuery.fn.check = function() {
   return this.each(function() {
     this.checked = true;
   });
 };

注意上例中的 this 指的是所選取的元素 (element)，此 plugin 可以這樣使用：

$(":checkbox").check();

這時候 this 所指的就是文件中所有 checkbox。

接著我們利用上面這個 plugin 來延伸出反選取和切換選取的功能(選取切換成未選取，以及反之)。

jQuery.fn.check = function(mode) {
   // 如果沒有傳入 mode 參數，則預設使用 on
   var mode = mode || 'on';
   
   return this.each(function() {
     switch(mode) {
       case 'on':
         this.checked = true;
         break;
       case 'off':
         this.checked = false;
         break;
       case 'toggle':
         this.checked = !this.checked;
         break;
     }
   });
 };

用法如下：

$(":checkbox").check();
 $(":checkbox").check('on');
 $(":checkbox").check('off');
 $(":checkbox").check('toggle');

當然上述都是很簡單的例子，因此可能看不出製作成 plugin 的好處，但是較為複雜卻常用的功能，只要多花一點點時間改寫為 plugin，就可以節省很多重複開發的時間了。