|
7. 冒泡
除非在特殊情況下, 否則每一個js事件(例如:click, mouseover, 等.)都會冒泡到父級節(jié)點. 當我們需要給多個元素調(diào)用同個函數(shù)時這點會很有用.
代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點綁定一次, 并且可以計算出哪個節(jié)點觸發(fā)了事件.
例如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class
像這樣綁定事件是低效的: $(‘#entryform input).bind(’focus‘, function(){
$(this).addClass(’selected‘);
}).bind(’blur‘, function(){
$(this).removeClass(’selected‘);
});
我們需要在父級監(jiān)聽獲取焦點和失去焦點的事件:
$(‘#entryform’).bind(‘focus’, function(e){
var cell = $(e.target); // e.target grabs the node that triggered the event.
cell.addClass(’selected’);
}).bind(‘blur’, function(e){
var cell = $(e.target);
cell.removeClass(’selected’);
});
父級元素扮演了一個調(diào)度員的角色, 它可以基于目標元素綁定事件. 如果你發(fā)現(xiàn)你給很多元素綁定了同一個事件監(jiān)聽, 那么你肯定哪里做錯了.
8.消除無效查詢
盡管jquery可以很優(yōu)雅的處理沒有匹配元素的情況, 但它還是需要花費時間去尋找. 如果你整站只有一個全局js, 那么極有可能把所有的jquery函數(shù)塞進$(document)ready(function(){//所有你引以為傲的代碼})里.
只運行在頁面里用到的函數(shù). 大多數(shù)有效的方法就是使用行內(nèi)初始化函數(shù), 這樣你的模板就能準確的控制何時何處該執(zhí)行js.
例如, 你的”文章”頁面模板, 你可能會引用如下的代碼在body結(jié)束處: <script type=“text/javascript>
mylib.article.init();
</script>
</body>
如果你的頁面模板包含一些多變的模塊可能不會出現(xiàn)在頁面中, 或者為了視覺呈現(xiàn)的原因你需要它們能夠快速加載, 你可以將初始化函數(shù)緊跟在模塊之后. <ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“l(fā)ight” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“l(fā)ight” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“l(fā)ight” value=“green” /> Green</li>
</ul>
<script type=“text/javascript>
mylib.traffic_light.init();
</script>
你的全局js庫可能會是這樣子的:
var mylib =
{
article_page :
{
init : function()
{
// Article 特有的jQuery函數(shù).
}
},
traffic_light :
{
init : function()
{
// Traffic light 特有的jQuery函數(shù).
}
}
}
出處：Time Machine
責任編輯：moby
上一頁 jQuery性能優(yōu)化指南 [4] 下一頁 jQuery性能優(yōu)化指南 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 jQuery性能優(yōu)化指南 [5]
