有幸拜讀了自製 jQuery Plugin – Part 1一文，讓初出茅廬的我，也寫出了一些小型的plugin。
但對於plugin的樣板還是有些疑惑。
以下是plugin的樣板:
jQuery.fn.mytoolbox = function() {
return this.each(function() {
});
};
為何在樣板內要加個return呢?在翻查jQuery官網的文件及自己實際測試後，找到答案了!
原因是因為要維持jQuery物件的鏈結性(Maintaining Chainability)。
底下我寫了一段plugin:
test.js:
jQuery.fn.mytoolbox = function() {
return this.each(function() {
$(this).css('background-color','red');
});
};
HTML:
<html><head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#div1').mytoolbox().css('color','white');
})
</script></head><body>
<div id="div1">文字一</div>
</body></html>
執行測試後，div標籤的背景被改為紅色，字體改為白色。但如果把return this.each(function() {...
中的return拿掉呢?div標籤背景仍維持紅色，然而字體並無改變成白色了。
由此可知，把return拿掉的話，.mytoolbox()無法傳回本身的JQuery object，後面再鏈結css('color','white')
也就無意義了。
而return this.each(function() { 中的this，表示傳入到mytoolbox命名空間的元素(element)，
此例就是div標籤。再用$()包起來，則就變成了JQuery的物件了。所以執行
$(this).css('background-color','red')
就改變了div的css樣式了。
留言列表
前端網頁相關技術 (5)
