善用事件代理，警惕閉包的性能陷阱。

更新時間：2011年01月20日 22:31:11 作者：

關于JS性能優(yōu)化中的冰山一角：事件代理、警惕閉包。其實本文有一個文章已經(jīng)說到，閉包如何產(chǎn)生，閉包的作用；

簡言之，閉包是產(chǎn)生一個沒有被釋放資源的棧區(qū)。換言之，就是一個不可控的內(nèi)存空間占用，如果與事件相關聯(lián)，JS的垃圾回收機制也不會去觸碰該區(qū)域。
例如：我們有個項目需要實現(xiàn)在一個div中有上百個熱點區(qū)域（a標簽），類似淘寶店鋪廣告位自定義，那么按照傳統(tǒng)的做法，我們會如下做一個最典型的閉包使用的實例，目的是改變this的作用域，在其處理函數(shù)內(nèi)部調用其他屬于該作用域的方法或屬性。

復制代碼代碼如下:

 
var apply = function() { 
　　this.div = document.getElementById("div的id"); 
　　this.hot = this.div.getElementsByTagName("a"); 
　　for(var i=0; i<this.hot.length; i++) { 
　　　　this.hot[i].onclick = function(me) { 
　　　　　　return function() { 
　　　　　　　　me.edit(this); 
　　　　　　} 
　　　　}(this); 
　　} 
} 
apply.prototype = { 
　　edit: function(target) { 
　　} 
} 

這里產(chǎn)生的問題，就是每一次的循環(huán)，都會往內(nèi)存當中寫入一個如上所描述的不可控的內(nèi)存地址，當然，你找不到它，也沒辦法在不需要使用的時候清理它，js的回收機制也不知道他何時是無用的，產(chǎn)生垃圾地址。并且，當div內(nèi)的dom結構發(fā)生改變的時候，你又需要重新去找到這些a標簽然后給他綁定事件。
當然你也可以把this添加到一個局部變量：var me = this; 至少如此是你可以控制的，你可以隨時的將局部變量me置為null，js的垃圾回收機制會知道何時去清理掉這些無用的數(shù)據(jù)。但是這樣也不是最好的解決方案，并且估計很多人也不會喜歡這種并不美觀的編碼方式。
最好的解決辦法，當然還是并不需要去關心那些內(nèi)部的結構，也不為內(nèi)部的任何一個元素申明任何一個變量，那么就是事件代理的工作。何謂事件代理，即不需要為每一個子對象綁定事件，通過冒泡機制找到當前觸發(fā)事件的元素，并通過你自己的一系列規(guī)則找到最終的處理函數(shù)。
如果使用事件代理的模式，該如何實現(xiàn)如上描述的需求？如下：

復制代碼代碼如下:

 
var apply = function() { 
　　this.div = document.getElementById("div的id"); 
　　this.div.onclick = function(me) { 
　　　　return function() { 
　　　　　　var _event = arguments.callee.caller.arguments[0]; 
　　　　　　var target = _event.target || _event.srcElement; 
　　　　　　if(target.tagName == "a") 
　　　　　　　　me.edit(target); 
　　　　　　else 
　　　　　　　　return false; 
　　　　} 
　　}(this); 
} 
apply.prototype = { 
　　edit: function(target) { 
　　} 
} 

現(xiàn)在，我們只關心容器元素是何物，而不用關心他的內(nèi)部有多少個a，他們是否發(fā)生改變等。性能的差別是顯然的。
10來分鐘隨便寫寫，有點混亂，希望對一些朋友有用，如有差錯之處，還望各位指點。

auntion / 2011-11-15
mail Auntion@gmail.com
QQ 82874972
原創(chuàng)文章，轉載請留下此部分信息

您可能感興趣的文章: