jQuery的事件綁定
問題
首先我們看下面的一個很常見的事件綁定代碼：
//example $('#dom').click(function(e){ //do something }); $('#dom2').click(function(e){ //do something });
這段代碼在事件綁定處理上有一些缺陷：
- 過多的事件綁定會損耗內存
- 后期生成HTML會沒有事件綁定，需要重新綁定
- 語法過於繁雜
解決方案
對於1、2兩點的解決方案，我們首先先了解一下jQuery的事件綁定
jQuery的事件綁定有多個方法可以調用，以click事件來舉例：
- click方法
- bind方法
- delegate方法
- on方法
不管你用的是（click / bind / delegate)之中那個方法，最終都是jQuery底層都是調用on方法來完成最終的事件綁定。因此從某種角度來講除了在書寫的方便程度及習慣上挑選，不如直接都采用on方法來的痛快和直接。
關於對方法的詳細解釋和用例，請直接訪問jQuery官網，在這里不一一說明。api.jquery.com
性能
首先我們需要先對不同的事件綁定方式之間的內存占用差距有一個清晰的認識。
對於性能的分析將采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用這個工具我們可以看到Javascript所占用的內存，能夠對性能問題進行分析。
DEMO HTML
<html> <head> <script type="text/javascript"> $(function(){ $('#btn-add').click(function(){ $('.ul').prepend('<li><a href="javascript:;">text</a></li>'); }); }); </script> </head> <body> <button id="btn-add">Create Element</button> <ul class="ul"> <li><a href="javascript:;">text</a></li> <!-- 2000 line... --> <li><a href="javascript:;">text</a></li> </ul> </body> </html>
Method 1
$(function(){ $('.ul a').click(function(e){ alert('click event'); }); });
以下是Method 1的內存分析圖
- 內存占用約3.4M
Method 2
$(function(){ $('.ul').on('click', 'a', function(e){ alert('click event'); }); });
以下是Method 2的內存分析圖
- 內存占用約2.0M
結論
- Method 1 明顯比 Method 2 多耗1.4M的內存
- Method 1 無法將事件綁定到通過點擊button所新增DOM中來，而Method 2可以。
只要on的delegate對象是HTML頁面原有的元素，由於是事件的觸發是通過Javascript的事件冒泡機制來監測，所以對於所有子元素（包括后期通過JS生成的元素）所有的事件監測均能有效，且由於不用對多個元素進行事件綁定（在這個example中為2000+a標簽），能夠有效的節省內存的損耗。
思考
代碼如詩，但很容易變成代碼如屎。如何提高代碼的優雅程度也是一個很有意思的事情。
以下是一個很普通且普遍的JS文件的代碼片段（用於一般網站）
$('#btn-add').click(function(){
//do something
});
$('.action-box #btn-delete').click(function(){
//do something
});
$('.action-box #btn-sort').mouseenter(function(){
//do something
});
/**
**more same code
*/
毫不誇張的說，當一個js文件上百行后，類似於上面的代碼，你很難從里面發現規律。
- 可能A喜歡寫#btn-add，而B喜歡寫.action-box #btn-add來作為選擇符。
- 堆砌着許多不同類型事件，沒有一個次序可言
- 沒有運用到我們剛剛所講的利用事件冒泡來做事件綁定
改進
我們來一步步改進一下之前的JS代碼
Version 1
$('.action-box').on('click', '#btn-add', function(){
//do something
});
$('.action-box').on('click', '#btn-delete', function(){
//do something
});
雖然運用了事件冒泡，不過感覺還是有點累贅，.action-box出現多次，感覺不舒服，讓我們繼續改進
Version 2
$('.action-box').on('click', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add'){
//do something
} else{
//do something
}
});
感覺比剛剛好多了，不過還是需要判斷元素來做出相應的處理，能接受，但不完美。
靈感
首先看一下css的增強版本sass對於css語法上面的改進
/*bed css code*/ .action-box { width: 100%; color: #000; } #btn-add { color: blue; } #btn-delete { color: red; } /*good css code*/ .action-box { width: 100%; color: #000; } .action-box #btn-add { color: blue; } .action-box #btn-delete { color: red; } /*sass code*/ .action-box { width: 100%; color: #000; #btn-add { color: blue; } #btn-delete { color: red; } }
我們可以在 good css code 和 sass code 從中可以可以很清晰了然的看到文檔結構：.action-box 下面有兩個button。
這是否能讓sass這種代碼結構運用到js中來呢？答案當然是可以。
$('.action-box').coffee({
click: {
'#btn-add': function(){
//do something
},
//這是是支持jQuery的':last / [attr] / :eq(0)'等方法的
'#btn-delete': function(){
//do something
}
},
mouseenter: {
'#btn-sort': function(){
//do something
}
}
});
喜歡這種結構嗎？
- 清晰明了的文檔結構
- 運用事件冒泡，有效減少內存的占用
- 第一級別用事件名稱來划分
- 第二級別的屬性名相當於選擇符。
coffee函數的源碼
$.fn.coffee = function(obj){ for(var eName in obj) for(var selector in obj[eName]) $(this).on(eName, selector, obj[eName][selector]); }
聊聊數行代碼，就可以做成一個很美妙的語法糖
Enjoy yourself ! ^_^
如果你覺得這篇文章還不錯，請幫忙點擊一下推薦，謝謝！