首先我們看下面的一個很常見的事件綁定代碼：
//example$('#dom').click(function(e){ //do something});$('#dom2').click(function(e){ //do something});
這段代碼在事件綁定處理上有一些缺陷：
對於1、2兩點的解決方案，我們首先先瞭解一下jQuery的事件綁定
jQuery的事件綁定有多個方法可以調用，以click事件來舉例：
不管你用的是（click / bind / delegate)之中那個方法，最終都是jQuery底層都是調用on方法來完成最終的事件綁定。因此從某種角度來講除了在書寫的方便程度及習慣上挑選，不如直接都採用on方法來的痛快和直接。
效能關於對方法的詳細解釋和用例，請直接存取jQuery官網，在這裡不一一說明。api.jquery.com
首先我們需要先對不同的事件綁定方式之間的記憶體佔用差距有一個清晰的認識。
對於效能的分析將採用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用這個工具我們可以看到Javascript所佔用的記憶體，能夠對效能問題進行分析。
<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的記憶體分析圖
$(function(){ $('.ul').on('click', 'a', function(e){ alert('click event'); });});
以下是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檔案上百行後，類似於上面的代碼，你很難從裡面發現規律。
我們來一步步改進一下之前的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 } }});
喜歡這種結構嗎？
$.fn.coffee = function(obj){ for(var eName in obj) for(var selector in obj[eName]) $(this).on(eName, selector, obj[eName][selector]);}
聊聊數行代碼，就可以做成一個很美妙的文法糖
Enjoy yourself ! ^_^
如果你覺得這篇文章還不錯，請幫忙點擊一下推薦，謝謝！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
