91在线一级黄片|91视频在线观看18|成人夜间呦呦网站|91资源欧美日韩超碰|久久最新免费精品视频一区二区三区|国产探花视频在线观看|黄片真人免费三级片毛片|国产人无码视频在线|精品成人影视无码三区|久久视频爱久久免费精品

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
對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.過多的事件綁定會損耗內(nèi)存

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

3.語法過于繁雜

解決方案

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

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

·click方法

·bind方法

·delegate方法

·on方法

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

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

性能

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

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

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

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

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

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

結(jié)論

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

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

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

#p#

思考

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

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

 
 
 
 
    
  
  
  
  
  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.

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

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

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

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

改進(jìn)

我們來一步步改進(jìn)一下之前的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.

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

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.

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

靈感

首先看一下css的增強(qiáng)版本sass對于css語法上面的改進(jìn)

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

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

 
 
 
 
    
  
  
  
  
  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.

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

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

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

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

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

coffee函數(shù)的源碼

 
 
 
 
    
  
  
  
  
  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.

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


名稱欄目：對jQuery的事件綁定的一些思考
網(wǎng)站URL：http://m.jiaoqi3.com/article/dppjdps.html