[jQuery] 自做 jQuery Plugin

有時候寫 jQuery 時，常會發現一些簡單的效果可以重複利用。只是每次用 Copy & Paste 大法似乎不是件好事，有沒有什麼方法可以讓我們把這些效果用到其他地方呢？

沒錯，就是用 jQuery 的 Plugin 機制。

不過 jQuery 的 Plugin 機制好像很難懂？其實一點也不。以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin 。

當然在此之前，你得先瞭解 JavaScript 的 class 、 object 、 variables scope 還有 anonymous function 等基礎，這些可以參考「JavaScript 大全」一書。

Plugin 樣版

寫 jQuery 的 Plugin 最快的方法就是拿現成的 Plugin 來改，只是在那麼多的 Plugin 中怎麼找到好的範例呢？別擔心，這邊我提供一個最簡單的範例樣版：

jQuery.fn.mytoolbox = function() {

return this.each(function() {

});

};

首先， mytoolbox 就是我們的 plugin 名稱，利用 jQuery.fn 我們可以將它註冊為 jQuery 的 plugin 。然後我們把 jQuery.fn.mytoolbox 指向一個匿名函式 (anonymous function) ，又稱為 callback ；而這個 callback 的內容很簡單，就是利用 jQuery 的 each 方法，來一一執行對應的動作。

特別要注意匿名函式裡的 this 關鍵字，它會指向一個 jQuery 物件；而這個 jQuery 物件則是我們要指定的，稍後我會再進一步說明。

使用 Plugin

現在將上面的樣版存成 mytoolbox.js ，和 jquery.js 放在一起。然後建立一個 HTML 測試檔案，內容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery TEST</title>

<style type="text/css">

.test {

border:1px solid #CCC;

cursor:pointer;

padding:3px;

}

</style>

</head>

<body>

<div id="test1" class="test">

點我！

</div>

<div id="test2" class="test">

點我！

</div>

<div id="debug"></div>

<script type="text/javascript" src="jquery/1.2.3.js"></script>

<script type="text/javascript" src="jquery/mytoolbox.js"></script>

<script type="text/javascript">

$(function () {

$('.test').mytoolbox();

});

</script>

</body>

</html>

首先 HTML 中引用了 jQuery 函式庫及我們寫的 Plugin 檔案，然後我在畫面上佈置了兩個 class 為 test 的 div 元素。接著我們用以下程式碼來呼叫我們的 Plugin ：

$(function () {

$('.test').mytoolbox();

});

這邊的用意就是將上面那兩個 div 套上 mytoolbox 這個 Plugin ，這樣 Plugin 就能動了，很簡單吧？

加入動作

當然，這個 Plugin 什麼事都還沒開始做，是個空骨架而已。現在我們要為它加血添肉，讓它動起來。

先簡單在 each 的 callback 裡加入一行：

jQuery.fn.mytoolbox = function() {

return this.each(function() {

alert(this.id); // 加入此行

});

};

再重新瀏覽測試用的 HTML 檔，你會發現頁面自動跳出了兩次訊息視窗，內容分別是 test1 和 test2 ；這證明了我們的 Plugin 的確有套用在 class 為 test 的兩個 div 上面。

不過現在有兩個 this ，它們是一樣的東西嗎？不，因為 scope 及觸發對象的不同，它們兩個是不同的東西。在外面的 this 是一個 jQuery 物件，指向我們指定的 $(’.test’) 這個物件；而 each callback 裡的 this 則是 div 元素，因為 each 是個 iterator function ，因此 alert(this.id) 會執行兩次。在第一次的 this 會指向 #test1 這個 div ，第二次則指向 #test2 這個 div 。

註：這裡我用 #test1 表示 id 為 test1 的元素。

現在我希望改成按下 div 元素後才會 alert 該元素的 id ，這要怎麼做呢？我們要改用 click 事件，做法如下：

jQuery.fn.mytoolbox = function() {

return this.each(function() {

jQuery(this).click(function () {

alert(this.id);

});

});

};

由於 each callback 裡的 this 是 DOM 元素，所以我們要用 jQuery() 把 this 包起來，這樣才能方便指定該元素的 click 事件。現在重新瀏覽頁面，點選任何一個 div ，應該就會跳出對應的訊息視窗了。

再包一層

如果在 each 的 callback 裡會呼叫到多次的 jQuery 的話，一直寫 jQuery 這幾個字實在是很累人的一件事；而且 jQuery 不是可以簡寫成 $ 號嗎？不能直接用嗎？當然可以，只是這樣可能會和其他 JavaScript Library 發生衝突；所以我們要改用以下的方式來包覆我們的 Plugin ：

;(function($) {

$.fn.mytoolbox = function() {

return this.each(function() {

$(this).click(function () {

alert(this.id);

});

});

};

})(jQuery);

JavaScript 可以直接用一組小括號 [()] 包覆一個匿名函式，然後後面再接一組小括號 [()] 表示呼叫這個匿名函式；而第二組小括號中就可以放置這個匿名函式的參數。所以在上面的程式碼中，我們把 Plugin 的程式碼用一個匿名函式包覆起來，然後參數就用我們常用的 $ 符號；接著在利用前述的原理，將 jQuery 這個類別導入給我們的 Plugin ，這樣我們就可以很快樂地在 Plugin 中使用我們熟悉的 $ 符號了。至於最前面的分號 (;) ，主要是考慮這個 Plugin 檔案會和其他 JS 檔合併壓縮而放進來的。

註： $ 在 JavaScript 裡是合法的變數名稱。

後面的說明我會略過這個包覆動作，在實際檔案中請別忘了加。

加入選項設定

接下來我希望讓 each 的 callback 函式能讓使用者自訂，因此我需要一個讓使用者能設定的選項。就像其他的 Plugin 一樣，我們讓我們的 mytoolbox 可以接受一個 JSON 物件：

$.fn.mytoolbox = function(settings) {

var _defaultSettings = {

callback: function () {

alert(this.id);

}

};

var _settings = $.extend(_defaultSettings, settings);

return this.each(function() {

$(this).click(_settings.callback);

});

};

首先我們為 Plugin 加入 settings 參數，也就是一般 Plugin 常見的設定值。然後則是 _defaultSettings ，它能幫我們在使用者沒有指定任何設定值給 settings 時，還能夠提供預設的設定值。

接著我用 jQuery 提供的 extend 方法，將 settings 中有設定的值覆蓋掉 _defaultSettings 所設定的預設值，再把結果存放在 _settings 這個變數中；後面我們就會用新的 _settings 變數當做我們的設定值。

現在我們在 _settings 中指定了一個 callback 項目 (預設是用 alert ) ，然後將它指定給 div 元素的 click 觸發器。現在我要在 HTML 頁面中更改這個事件處理器，使它不再使用 alert ，而是把結果顯示在 div#debug 裡。程式如下：

$(function () {

var debug = $('#debug');

$('.test').mytoolbox({

callback: function () {

debug.html(debug.html() + this.id + '<br />');

}

});

});

再重新瀏覽一次頁面，看看效果是不是依照我們想像的完成呢？

修改觸發事件

假設現在我們不想用 click ，而是想讓滑鼠移過就觸發 callback 呢？這時就要借重 jQuery 的 bind 方法了：

$.fn.mytoolbox = function(settings) {

var _defaultSettings = {

bind: 'click',

callback: function () {

alert(this.id);

}

};

var _settings = $.extend(_defaultSettings, settings);

return this.each(function() {

$(this).bind(_settings.bind, _settings.callback);

});

};

這裡我加入一個 bind 設定項目，預設是用 click 事件觸發。回到 HTML 頁面，我們改用 mouseover 來觸發 callback ：

$(function () {

var debug = $('#debug');

$('.test').mytoolbox({

bind: 'mouseover',

callback: function () {

debug.html(debug.html() + this.id + '<br />');

}

});

});

重新瀏覽 HTML 頁面，當滑鼠移過 div 元素時，是不是會出現對應的 id 呢？

到這裡，相信大家都應該大致瞭解如何建立一個 jQuery Plugin 了吧？接下來，我將透過實際的例子為大家介紹更多自製 jQuery Plugin 所需要注意的地方。