首頁 > 開發者 > JavaScript

對jQuery的事件綁定的一些思考(補充)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

複製代碼 代碼如下:
//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檔案上百行後，類似於上面的代碼，你很難從裡面發現規律。

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 {
    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
    }
  }
});

喜歡這種結構嗎？

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

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 !  ^_^

作者： CoffeeDeveloper

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More