日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
對jQuery的事件綁定的一些思考

問題

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

 
 
 
 
    
  
  
  
  
  1. //example  
    2. 
  
  
  
  
  2. $('#dom').click(function(e){  
    3. 
  
  
  
  
  3.   //do something  
    4. 
  
  
  
  
  4. });  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. $('#dom2').click(function(e){  
    7. 
  
  
  
  
  7.   //do something  
    8. 
  
  
  
  
  8. }); 
    9.

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

1.過多的事件綁定會損耗內存

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

3.語法過于繁雜

解決方案

對于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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.     Create Element 
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.       
  9. text
    10.  
  
  
  
  
  10.        
    11. 
  
  
  
  
  11.       
  12. text
    13.  
  
  
  
  
  13.      
    14. 
  
  
  
  
  14.    
    15. 
  
  
  
  
  15.  
    16.

Method 1

 
 
 
 
    
  
  
  
  
  1. $(function(){  
    2. 
  
  
  
  
  2.     $('.ul a').click(function(e){  
    3. 
  
  
  
  
  3.         alert('click event');  
    4. 
  
  
  
  
  4.     });  
    5. 
  
  
  
  
  5. }); 
    6.

以下是Method 1的內存分析圖

內存占用約3.4M

Method 2

 
 
 
 
    
  
  
  
  
  1. $(function(){  
    2. 
  
  
  
  
  2.     $('.ul').on('click', 'a', function(e){  
    3. 
  
  
  
  
  3.         alert('click event');  
    4. 
  
  
  
  
  4.     });  
    5. 
  
  
  
  
  5. }); 
    6.

以下是Method 2的內存分析圖

內存占用約2.0M

結論

1.Method 1 明顯比 Method 2 多耗1.4M的內存

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

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

#p#

思考

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

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

 
 
 
 
    
  
  
  
  
  1. $('#btn-add').click(function(){  
    2. 
  
  
  
  
  2.   //do something  
    3. 
  
  
  
  
  3. });  
    4. 
  
  
  
  
  4. $('.action-box #btn-delete').click(function(){  
    5. 
  
  
  
  
  5.   //do something  
    6. 
  
  
  
  
  6. });  
    7. 
  
  
  
  
  7. $('.action-box #btn-sort').mouseenter(function(){  
    8. 
  
  
  
  
  8.   //do something  
    9. 
  
  
  
  
  9. });  
    10. 
  
  
  
  
  10. /**  
    11. 
  
  
  
  
  11. **more same code  
    12. 
  
  
  
  
  12. */ 
    13.

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

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

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

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

改進

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

Version 1

 
 
 
 
    
  
  
  
  
  1. $('.action-box').on('click', '#btn-add', function(){  
    2. 
  
  
  
  
  2.   //do something  
    3. 
  
  
  
  
  3. });  
    4. 
  
  
  
  
  4. $('.action-box').on('click', '#btn-delete', function(){  
    5. 
  
  
  
  
  5.   //do something  
    6. 
  
  
  
  
  6. }); 
    7.

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

Version 2

 
 
 
 
    
  
  
  
  
  1. $('.action-box').on('click', '#btn-add， #btn-delete', function(){  
    2. 
  
  
  
  
  2.   if($(this).attr('id') == 'btn-add'){  
    3. 
  
  
  
  
  3.     //do something  
    4. 
  
  
  
  
  4.   } else{  
    5. 
  
  
  
  
  5.     //do something  
    6. 
  
  
  
  
  6.   }  
    7. 
  
  
  
  
  7. }); 
    8.

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

靈感

首先看一下css的增強版本sass對于css語法上面的改進

 
 
 
 
    
  
  
  
  
  1. /*bed css code*/ 
    2. 
  
  
  
  
  2. .action-box { width: 100%; color: #000; }  
    3. 
  
  
  
  
  3. #btn-add { color: blue; }  
    4. 
  
  
  
  
  4. #btn-delete { color: red; }  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. /*good css code*/ 
    7. 
  
  
  
  
  7. .action-box { width: 100%; color: #000; }  
    8. 
  
  
  
  
  8.   .action-box #btn-add { color: blue; }  
    9. 
  
  
  
  
  9.   .action-box #btn-delete { color: red; }  
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. /*sass code*/ 
    12. 
  
  
  
  
  12. .action-box {  
    13. 
  
  
  
  
  13.   width: 100%;  
    14. 
  
  
  
  
  14.   color: #000;  
    15. 
  
  
  
  
  15.   #btn-add {  
    16. 
  
  
  
  
  16.     color: blue;  
    17. 
  
  
  
  
  17.   }  
    18. 
  
  
  
  
  18.   #btn-delete {  
    19. 
  
  
  
  
  19.     color: red;  
    20. 
  
  
  
  
  20.   }  
    21. 
  
  
  
  
  21. } 
    22.

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

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

 
 
 
 
    
  
  
  
  
  1. $('.action-box').coffee({  
    2. 
  
  
  
  
  2.   click: {  
    3. 
  
  
  
  
  3.     '#btn-add': function(){  
    4. 
  
  
  
  
  4.       //do something  
    5. 
  
  
  
  
  5.     },  
    6. 
  
  
  
  
  6.     //這是是支持jQuery的':last / [attr] / :eq(0)'等方法的   
    7. 
  
  
  
  
  7.     '#btn-delete': function(){  
    8. 
  
  
  
  
  8.       //do something  
    9. 
  
  
  
  
  9.     }  
    10. 
  
  
  
  
  10.   },  
    11. 
  
  
  
  
  11.   mouseenter: {  
    12. 
  
  
  
  
  12.     '#btn-sort': function(){  
    13. 
  
  
  
  
  13.       //do something  
    14. 
  
  
  
  
  14.     }  
    15. 
  
  
  
  
  15.   }  
    16. 
  
  
  
  
  16. }); 
    17.

喜歡這種結構嗎？

1.清晰明了的文檔結構

2.運用事件冒泡，有效減少內存的占用

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

4.第二級別的屬性名相當于選擇符。

coffee函數的源碼

 
 
 
 
    
  
  
  
  
  1. $.fn.coffee = function(obj){  
    2. 
  
  
  
  
  2.   for(var eName in obj)  
    3. 
  
  
  
  
  3.     for(var selector in obj[eName])  
    4. 
  
  
  
  
  4.       $(this).on(eName, selector, obj[eName][selector]);  
    5. 
  
  
  
  
  5. } 
    6.

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


新聞標題：對jQuery的事件綁定的一些思考
文章源于：http://www.5511xx.com/article/dppjdps.html