閱讀306 返回首頁    go 小米 go 小米5

對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. <html> 
    2. 

  2. 
  <head> 

    3. 

  3. 
    <script type="text/javascript"> 

    4. 

  4.       $(function(){  
    5. 

  5.         $('#btn-add').click(function(){  
    6. 

  6. 
          $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  

    7. 

  7.         });  
    8. 

  8.       });  
    9. 

  9. 
    </script> 

    10. 

  10. 
  </head> 

    11. 

  11. 
  <body> 

    12. 

  12. 
    <button id="btn-add">Create Element</button> 

    13. 

  13. 
    <ul class="ul"> 

    14. 

  14. 
      <li><a href="javascript:;">text</a></li> 

    15. 

  15. 
      <!-- 2000 line... --> 

    16. 

  16. 
      <li><a href="javascript:;">text</a></li> 

    17. 

  17. 
    </ul> 

    18. 

  18. 
  </body> 

    19. 

  19. 
</html> 

    20. 




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頁麵原有的元素，由於是事件的觸發是通過Javascript的事件冒泡機製來監測，所以對於所有子元素（包括後期通過JS生成的元素）所有的事件監測均能有效，且由於不用對多個元素進行事件綁定（在這個example中為2000+a標簽），能夠有效的節省內存的損耗。







問題



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




    

  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. <html> 
    2. 

  2. 
  <head> 

    3. 

  3. 
    <script type="text/javascript"> 

    4. 

  4.       $(function(){  
    5. 

  5.         $('#btn-add').click(function(){  
    6. 

  6. 
          $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  

    7. 

  7.         });  
    8. 

  8.       });  
    9. 

  9. 
    </script> 

    10. 

  10. 
  </head> 

    11. 

  11. 
  <body> 

    12. 

  12. 
    <button id="btn-add">Create Element</button> 

    13. 

  13. 
    <ul class="ul"> 

    14. 

  14. 
      <li><a href="javascript:;">text</a></li> 

    15. 

  15. 
      <!-- 2000 line... --> 

    16. 

  16. 
      <li><a href="javascript:;">text</a></li> 

    17. 

  17. 
    </ul> 

    18. 

  18. 
  </body> 

    19. 

  19. 
</html> 

    20. 




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頁麵原有的元素，由於是事件的觸發是通過Javascript的事件冒泡機製來監測，所以對於所有子元素（包括後期通過JS生成的元素）所有的事件監測均能有效，且由於不用對多個元素進行事件綁定（在這個example中為2000+a標簽），能夠有效的節省內存的損耗。




最後更新：2017-04-03 20:43:08
  上一篇：go 京東 vs 蘇寧：兩個窮人的流血戰爭
  下一篇：go 雷軍VS黃章：現實主義和夢幻主義的商業對決