消毒除蟲專業團隊完整服務,專業害蟲防治
病媒防治、環境消毒定期維護,免費現場勘查
窗簾專業搬家公司服務,正派經營
損壞理賠契約,保障您權益

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 自製 jQuery Plugin

房東:雪妹
發表時間:2011-06-13
[檢舉]


有時候寫 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 測試檔案,內容如下:





<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 可以接受一個 settings 物件:




$.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 + \'
\'
);
}
});
});



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


修改觸發事件


假設現在我們不想用 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 + \'
\'
);
}
});
});



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


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


請觀賞 Part 2



http://www.jaceju.net/blog/archives/336



  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: