對jQuery的事件綁定的一些思考

作者：CoffeeDeveloper 2013-04-19 10:01:19

不管你用的是（click / bind / delegate)之中那個方法，最終都是jQuery底層都是調(diào)用on方法來完成最終的事件綁定。因此從某種角度來講除了在書寫的方便程度及習(xí)慣上挑選，不如直接都采用on方法來的痛快和直接。

問題

首先我們看下面的一個很常見的事件綁定代碼：

//example  
$('#dom').click(function(e){  
  //do something  
});  
 
$('#dom2').click(function(e){  
  //do something  
});

這段代碼在事件綁定處理上有一些缺陷：

1.過多的事件綁定會損耗內(nèi)存

2.后期生成HTML會沒有事件綁定，需要重新綁定

3.語法過于繁雜

解決方案

對于1、2兩點的解決方案，我們首先先了解一下jQuery的事件綁定

jQuery的事件綁定有多個方法可以調(diào)用，以click事件來舉例：

·click方法

·bind方法

·delegate方法

·on方法

關(guān)于對方法的詳細解釋和用例，請直接訪問jQuery官網(wǎng)，在這里不一一說明。api.jquery.com

性能

首先我們需要先對不同的事件綁定方式之間的內(nèi)存占用差距有一個清晰的認識。

對于性能的分析將采用Chrome的Developer Tools。

Profiles --> Take Heap Snapshot，用這個工具我們可以看到Javascript所占用的內(nèi)存，能夠?qū)π阅軉栴}進行分析。

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的內(nèi)存分析圖

內(nèi)存占用約3.4M

Method 2

$(function(){  
    $('.ul').on('click', 'a', function(e){  
        alert('click event');  
    });  
});

以下是Method 2的內(nèi)存分析圖

內(nèi)存占用約2.0M

結(jié)論

1.Method 1 明顯比 Method 2 多耗1.4M的內(nèi)存

2.Method 1 無法將事件綁定到通過點擊button所新增DOM中來，而Method 2可以。

只要on的delegate對象是HTML頁面原有的元素，由于是事件的觸發(fā)是通過Javascript的事件冒泡機制來監(jiān)測，所以對于所有子元素（包括后期通過JS生成的元素）所有的事件監(jiān)測均能有效，且由于不用對多個元素進行事件綁定（在這個example中為2000+a標(biāo)簽），能夠有效的節(jié)省內(nèi)存的損耗。

#p#

思考

代碼如詩，但很容易變成代碼如屎。如何提高代碼的優(yōu)雅程度也是一個很有意思的事情。

以下是一個很普通且普遍的JS文件的代碼片段（用于一般網(wǎng)站）

$('#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  
*/

毫不夸張的說，當(dāng)一個js文件上百行后，類似于上面的代碼，你很難從里面發(fā)現(xiàn)規(guī)律。

1.可能A喜歡寫#btn-add，而B喜歡寫.action-box #btn-add來作為選擇符。

2.堆砌著許多不同類型事件，沒有一個次序可言

3.沒有運用到我們剛剛所講的利用事件冒泡來做事件綁定

改進

我們來一步步改進一下之前的JS代碼

Version 1

$('.action-box').on('click', '#btn-add', function(){  
  //do something  
});  
$('.action-box').on('click', '#btn-delete', function(){  
  //do something  
});

雖然運用了事件冒泡，不過感覺還是有點累贅，.action-box出現(xiàn)多次，感覺不舒服，讓我們繼續(xù)改進

Version 2

$('.action-box').on('click', '#btn-add， #btn-delete', function(){  
  if($(this).attr('id') == 'btn-add'){  
    //do something  
  } else{  
    //do something  
  }  
});

感覺比剛剛好多了，不過還是需要判斷元素來做出相應(yīng)的處理，能接受，但不***。

靈感

首先看一下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 從中可以可以很清晰了然的看到文檔結(jié)構(gòu)：.action-box 下面有兩個button。

這是否能讓sass這種代碼結(jié)構(gòu)運用到j(luò)s中來呢？答案當(dāng)然是可以。

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

喜歡這種結(jié)構(gòu)嗎？

1.清晰明了的文檔結(jié)構(gòu)

2.運用事件冒泡，有效減少內(nèi)存的占用

3.***級別用事件名稱來劃分

4.第二級別的屬性名相當(dāng)于選擇符。

coffee函數(shù)的源碼

$.fn.coffee = function(obj){  
  for(var eName in obj)  
    for(var selector in obj[eName])  
      $(this).on(eName, selector, obj[eName][selector]);  
}

聊聊數(shù)行代碼，就可以做成一個很美妙的語法糖

責(zé)任編輯：張偉來源：博客園

jQuery JS

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

對jQuery的事件綁定的一些思考