對jQuery的事件綁定的一些思考(補充)_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

複製程式碼 程式碼

複製程式碼

程式碼
🎜>




Create Element

• text



• text

Method 1 複製程式碼

程式碼如下:


$(function(){


$(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
});
/**
**更多相同代碼
*/

毫不誇張的說，當一個js檔案上百行後，類似於上面的程式碼，你很難從裡面發現規律。

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出現多次，感覺不舒服，讓我們繼續改進

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 {  >  }  #btn-delete {    color: red;  }}

我們可以在 good css code 和 sass code 從中可以很清楚了然的看到文件結構：.action-box 下面有兩個button。

這是否能讓sass這種程式碼結構運用到js中呢？答案當然是可以。





複製程式碼


程式碼如下:


$('.action-box').coffee( {
  click: {

    '#btn-add': function(){      //do something

    },  //do something    '#btn-delete': function(){      //do something

    }

  //do something
    }
'#btn-sort': function(){
      //do something

    }

  }
});

喜歡這種結構嗎？

1、清楚明了的文檔結構
2、運用事件冒泡，有效減少記憶體的佔用
3、第一級用事件名稱來分割
4、第二層的屬性名相當於選擇符。

coffee函數的原始碼

複製程式碼

程式碼如下: 程式碼如下:$.c. = function(obj){  for(var eName in obj)    for(var selector in obj[eName])      $(this).on(eName, selector, objselName][ );}聊聊數行程式碼，就可以做成一個很美妙的語法糖 Enjoy yourself !  ^_^作者： CoffeeDeveloper