對(duì)jQuery的事件綁定的一些思考(補(bǔ)充)
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});
這段代碼在事件綁定處理上有一些缺陷：
過(guò)多的事件綁定會(huì)損耗內(nèi)存
后期生成HTML會(huì)沒(méi)有事件綁定，需要重新綁定
語(yǔ)法過(guò)于繁雜
解決方案
對(duì)于1、2兩點(diǎn)的解決方案，我們首先先了解一下jQuery的事件綁定
jQuery的事件綁定有多個(gè)方法可以調(diào)用，以click事件來(lái)舉例：
click方法
bind方法
delegate方法
on方法
不管你用的是（click / bind / delegate)之中那個(gè)方法，最終都是jQuery底層都是調(diào)用on方法來(lái)完成最終的事件綁定。因此從某種角度來(lái)講除了在書寫的方便程度及習(xí)慣上挑選，不如直接都采用on方法來(lái)的痛快和直接。
關(guān)于對(duì)方法的詳細(xì)解釋和用例，請(qǐng)直接訪問(wèn)jQuery官網(wǎng)，在這里不一一說(shuō)明。api.jquery.com
性能
首先我們需要先對(duì)不同的事件綁定方式之間的內(nèi)存占用差距有一個(gè)清晰的認(rèn)識(shí)。
對(duì)于性能的分析將采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用這個(gè)工具我們可以看到Javascript所占用的內(nèi)存，能夠?qū)π阅軉?wèn)題進(jìn)行分析。
<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的內(nèi)存分析圖
內(nèi)存占用約3.4M
$(function(){
$('.ul').on('click', 'a', function(e){
alert('click event');
});
});
以下是Method 2的內(nèi)存分析圖
內(nèi)存占用約2.0M
Method 1 明顯比 Method 2 多耗1.4M的內(nèi)存
Method 1 無(wú)法將事件綁定到通過(guò)點(diǎn)擊button所新增DOM中來(lái)，而Method 2可以。
只要on的delegate對(duì)象是HTML頁(yè)面原有的元素，由于是事件的觸發(fā)是通過(guò)Javascript的事件冒泡機(jī)制來(lái)監(jiān)測(cè)，所以對(duì)于所有子元素（包括后期通過(guò)JS生成的元素）所有的事件監(jiān)測(cè)均能有效，且由于不用對(duì)多個(gè)元素進(jìn)行事件綁定（在這個(gè)example中為2000+a標(biāo)簽），能夠有效的節(jié)省內(nèi)存的損耗。
思考
代碼如詩(shī)，但很容易變成代碼如屎。如何提高代碼的優(yōu)雅程度也是一個(gè)很有意思的事情。
以下是一個(gè)很普通且普遍的JS文件的代碼片段（用于一般網(wǎng)站）
$('#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
*/
毫不夸張的說(shuō)，當(dāng)一個(gè)js文件上百行后，類似于上面的代碼，你很難從里面發(fā)現(xiàn)規(guī)律。
1、可能A喜歡寫#btn-add，而B(niǎo)喜歡寫.action-box #btn-add來(lái)作為選擇符。
2、堆砌著許多不同類型事件，沒(méi)有一個(gè)次序可言
3、沒(méi)有運(yùn)用到我們剛剛所講的利用事件冒泡來(lái)做事件綁定
改進(jìn)
我們來(lái)一步步改進(jìn)一下之前的JS代碼
Version 1
$('.action-box').on('click', '#btn-add', function(){
//do something
});
$('.action-box').on('click', '#btn-delete', function(){
//do something
});
雖然運(yùn)用了事件冒泡，不過(guò)感覺(jué)還是有點(diǎn)累贅，.action-box出現(xiàn)多次，感覺(jué)不舒服，讓我們繼續(xù)改進(jìn)
Version 2
$('.action-box').on('click', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add'){
//do something
} else{
//do something
}
});
感覺(jué)比剛剛好多了，不過(guò)還是需要判斷元素來(lái)做出相應(yīng)的處理，能接受，但不完美。
靈感
首先看一下css的增強(qiáng)版本sass對(duì)于css語(yǔ)法上面的改進(jìn)
/*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 從中可以可以很清晰了然的看到文檔結(jié)構(gòu)：.action-box 下面有兩個(gè)button。
這是否能讓sass這種代碼結(jié)構(gòu)運(yùn)用到j(luò)s中來(lái)呢？答案當(dāng)然是可以。
$('.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
}
}
});
喜歡這種結(jié)構(gòu)嗎？
1、清晰明了的文檔結(jié)構(gòu)
2、運(yùn)用事件冒泡，有效減少內(nèi)存的占用
3、第一級(jí)別用事件名稱來(lái)劃分
4、第二級(jí)別的屬性名相當(dāng)于選擇符。
coffee函數(shù)的源碼
$.fn.coffee = function(obj){
for(var eName in obj)
for(var selector in obj[eName])
$(this).on(eName, selector, obj[eName][selector]);
}
聊聊數(shù)行代碼，就可以做成一個(gè)很美妙的語(yǔ)法糖
Enjoy yourself ! ^_^
作者： CoffeeDeveloper
相關(guān)文章
首次接觸jQuery是在2008年，上地的一家小公司。當(dāng)時(shí)的版本是1.1，在此之前我僅接觸過(guò)Prototype.js。2011-06-06
jQuery-Easyui 1.2 實(shí)現(xiàn)多層菜單效果的代碼
早上打開(kāi)郵箱，一位朋友問(wèn)我之前JQuery-Easyui 怎么做可以實(shí)現(xiàn)多級(jí)菜單2012-01-01
jQuery Form 表單提交插件之formSerialize，fieldSerialize，fieldValue，r
這篇文章主要介紹了jQuery Form 表單提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的代碼
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的實(shí)現(xiàn)方法，需要的朋友可以參考下。2010-11-11
Jquery Ajax學(xué)習(xí)實(shí)例 向頁(yè)面發(fā)出請(qǐng)求，返回XML格式數(shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例 向頁(yè)面發(fā)出請(qǐng)求，返回XML格式數(shù)據(jù)的代碼2010-03-03
jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03
jQuery模板技術(shù)和數(shù)據(jù)綁定實(shí)現(xiàn)代碼
如果你用過(guò)ASP.NET的數(shù)據(jù)綁定控件，也用過(guò)ASP或者JSP里那種通過(guò)輸出HTML元素在頁(yè)面上顯示數(shù)據(jù)的方法，你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實(shí)現(xiàn)，那該是多少美妙的事情。2010-05-05
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
jQuery初識(shí)之設(shè)計(jì)思想方法函數(shù)示例
這篇文章主要為大家介紹了jQuery初識(shí)之設(shè)計(jì)思想及方法函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)?lái)一篇jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05