DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 善用事件代理,警惕閉包的性能陷阱。
善用事件代理,警惕閉包的性能陷阱。
編輯:關於JavaScript     
簡言之,閉包是產生一個沒有被釋放資源的棧區。換言之,就是一個不可控的內存空間占用,如果與事件相關聯,JS的垃圾回收機制也不會去觸碰該區域。
例如:我們有個項目需要實現在一個div中有上百個熱點區域(a標簽),類似淘寶店鋪廣告位自定義,那麼按照傳統的做法,我們會如下做一個最典型的閉包使用的實例,目的是改變this的作用域,在其處理函數內部調用其他屬於該作用域的方法或屬性。
復制代碼 代碼如下:
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) {
  }
}

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

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

auntion / 2011-11-15
mail Auntion@gmail.com
QQ 82874972
原創文章,轉載請留下此部分信息
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved