對jQuery的事件綁定的一些思考(補充)
更新時間：2013年04月20日 23:16:16 作者：
一般jquery事件綁定會帶來過多的事件綁定會損耗內(nèi)存，后期生成HTML會沒有事件綁定，需要重新綁定，語法過于繁雜等問題
首先我們看下面的一個很常見的事件綁定代碼：
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});
這段代碼在事件綁定處理上有一些缺陷：
過多的事件綁定會損耗內(nèi)存
后期生成HTML會沒有事件綁定，需要重新綁定
語法過于繁雜
解決方案
對于1、2兩點的解決方案，我們首先先了解一下jQuery的事件綁定
jQuery的事件綁定有多個方法可以調(diào)用，以click事件來舉例：
click方法
bind方法
delegate方法
on方法
不管你用的是（click / bind / delegate)之中那個方法，最終都是jQuery底層都是調(diào)用on方法來完成最終的事件綁定。因此從某種角度來講除了在書寫的方便程度及習(xí)慣上挑選，不如直接都采用on方法來的痛快和直接。
關(guān)于對方法的詳細解釋和用例，請直接訪問jQuery官網(wǎng)，在這里不一一說明。api.jquery.com
性能
首先我們需要先對不同的事件綁定方式之間的內(nèi)存占用差距有一個清晰的認識。
對于性能的分析將采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用這個工具我們可以看到Javascript所占用的內(nèi)存，能夠?qū)π阅軉栴}進行分析。
<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 無法將事件綁定到通過點擊button所新增DOM中來，而Method 2可以。
只要on的delegate對象是HTML頁面原有的元素，由于是事件的觸發(fā)是通過Javascript的事件冒泡機制來監(jiān)測，所以對于所有子元素（包括后期通過JS生成的元素）所有的事件監(jiān)測均能有效，且由于不用對多個元素進行事件綁定（在這個example中為2000+a標簽），能夠有效的節(jié)省內(nèi)存的損耗。
思考
代碼如詩，但很容易變成代碼如屎。如何提高代碼的優(yōu)雅程度也是一個很有意思的事情。
以下是一個很普通且普遍的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
*/
毫不夸張的說，當一個js文件上百行后，類似于上面的代碼，你很難從里面發(fā)現(xiàn)規(guī)律。
1、可能A喜歡寫#btn-add，而B喜歡寫.action-box #btn-add來作為選擇符。
2、堆砌著許多不同類型事件，沒有一個次序可言
3、沒有運用到我們剛剛所講的利用事件冒泡來做事件綁定
$('.action-box').on('click', '#btn-add', function(){
//do something
});
$('.action-box').on('click', '#btn-delete', function(){
//do something
});
$('.action-box').on('click', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add'){
//do something
} else{
//do something
}
});
/*bed css code*/
.action-box { width: 100%; color: #000; }
#btn-add { color: blue; }
#btn-delete { color: red; }
$('.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
}
}
});
$.fn.coffee = function(obj){
for(var eName in obj)
for(var selector in obj[eName])
$(this).on(eName, selector, obj[eName][selector]);
}
聊聊數(shù)行代碼，就可以做成一個很美妙的語法糖
復(fù)制代碼 代碼如下:
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});
這段代碼在事件綁定處理上有一些缺陷：
過多的事件綁定會損耗內(nèi)存
后期生成HTML會沒有事件綁定，需要重新綁定
語法過于繁雜
解決方案
對于1、2兩點的解決方案，我們首先先了解一下jQuery的事件綁定
jQuery的事件綁定有多個方法可以調(diào)用，以click事件來舉例：
click方法
bind方法
delegate方法
on方法
不管你用的是（click / bind / delegate)之中那個方法，最終都是jQuery底層都是調(diào)用on方法來完成最終的事件綁定。因此從某種角度來講除了在書寫的方便程度及習(xí)慣上挑選，不如直接都采用on方法來的痛快和直接。
關(guān)于對方法的詳細解釋和用例，請直接訪問jQuery官網(wǎng)，在這里不一一說明。api.jquery.com
性能
首先我們需要先對不同的事件綁定方式之間的內(nèi)存占用差距有一個清晰的認識。
對于性能的分析將采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用這個工具我們可以看到Javascript所占用的內(nèi)存，能夠?qū)π阅軉栴}進行分析。
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
$(function(){
$('.ul a').click(function(e){
alert('click event');
});
});
以下是Method 1的內(nèi)存分析圖
內(nèi)存占用約3.4M
復(fù)制代碼 代碼如下:
$(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 無法將事件綁定到通過點擊button所新增DOM中來，而Method 2可以。
只要on的delegate對象是HTML頁面原有的元素，由于是事件的觸發(fā)是通過Javascript的事件冒泡機制來監(jiān)測，所以對于所有子元素（包括后期通過JS生成的元素）所有的事件監(jiān)測均能有效，且由于不用對多個元素進行事件綁定（在這個example中為2000+a標簽），能夠有效的節(jié)省內(nèi)存的損耗。
思考
代碼如詩，但很容易變成代碼如屎。如何提高代碼的優(yōu)雅程度也是一個很有意思的事情。
以下是一個很普通且普遍的JS文件的代碼片段（用于一般網(wǎng)站）
復(fù)制代碼 代碼如下:
$('#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文件上百行后，類似于上面的代碼，你很難從里面發(fā)現(xiàn)規(guī)律。
1、可能A喜歡寫#btn-add，而B喜歡寫.action-box #btn-add來作為選擇符。
2、堆砌著許多不同類型事件，沒有一個次序可言
3、沒有運用到我們剛剛所講的利用事件冒泡來做事件綁定
改進
我們來一步步改進一下之前的JS代碼
Version 1
復(fù)制代碼 代碼如下:
$('.action-box').on('click', '#btn-add', function(){
//do something
});
$('.action-box').on('click', '#btn-delete', function(){
//do something
});
雖然運用了事件冒泡，不過感覺還是有點累贅，.action-box出現(xiàn)多次，感覺不舒服，讓我們繼續(xù)改進
Version 2
復(fù)制代碼 代碼如下:
$('.action-box').on('click', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add'){
//do something
} else{
//do something
}
});
感覺比剛剛好多了，不過還是需要判斷元素來做出相應(yīng)的處理，能接受，但不完美。
靈感
首先看一下css的增強版本sass對于css語法上面的改進
復(fù)制代碼 代碼如下:
/*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 下面有兩個button。
這是否能讓sass這種代碼結(jié)構(gòu)運用到j(luò)s中來呢？答案當然是可以。
復(fù)制代碼 代碼如下:
$('.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、運用事件冒泡，有效減少內(nèi)存的占用
3、第一級別用事件名稱來劃分
4、第二級別的屬性名相當于選擇符。
coffee函數(shù)的源碼
復(fù)制代碼 代碼如下:
$.fn.coffee = function(obj){
for(var eName in obj)
for(var selector in obj[eName])
$(this).on(eName, selector, obj[eName][selector]);
}
聊聊數(shù)行代碼，就可以做成一個很美妙的語法糖
Enjoy yourself ! ^_^
作者： CoffeeDeveloper
相關(guān)文章
頁面分頁對于程序員來說最熟悉不過，在WEB開發(fā)中經(jīng)常需要對頁面進行分頁，jQuery插件JQuery Pager分頁器能輕松實現(xiàn)javascript分頁功能，只需要幾行代碼，javascript分頁簡單搞定。2010-07-07
這篇文章主要介紹了jQuery獲取URL請求參數(shù)的方法,涉及jquery針對URL的獲取與字符串的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本篇文章主要是對JQuery中操作Css樣式的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本文將利用jquery實現(xiàn)頁面圖片等比例放大和縮小。說明: 頁面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個問題設(shè)計2014-02-02
本文主要介紹jQuery插件uploadify3.1的簡單使用，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
前一篇我們介紹了一種防SQL注入的終極方法，也就是最原始、最簡單、最有效也是最通用的方法，就是數(shù)據(jù)類型的檢查加單引號的處理，具體的內(nèi)容前面一篇已經(jīng)介紹過了，這里我就不重復(fù)了2008-12-12
表單提交的時候 ，是根據(jù)元素的name這個屬性來的，只要不加name屬性 就不會提交，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
本篇文章主要是對jquery獲取dom固定元素 添加樣式的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
JSON(JavaScript Object Notation)javscript對象標記，是一種輕量級的數(shù)據(jù)交換格式。具體的詳細基礎(chǔ)知識可以參考JSON官網(wǎng)http:/www.json.org/。不說太多廢話，直接說說我對JSON的理解吧。2014-11-11