ExtJS等架構記憶體整理的注意事項

    我們以ExtJS架構為例其他架構雷同，因為這是JavaScript語言的共性問題。

    ExtJS的經典應用是Tree與TabPlane的配合，點選左側樹節點動态下載下傳頁面代碼建立表現層，然後通過一個新Tab展示。關閉Tab時 ExtJS會将依附于改Tab的元件徹底清除。但這個看似很完美的應用可能會耗盡你的記憶體。

    問題在于某些與Tab上下文無關的獨立變量，例如建立頁面時存在此類代碼：“var win = new Ext.Window();”，他有自己獨立的存放空間不依附于Tab。每次開關Tab便會重建且舊變量不被消除，最緻命的是Ext.Window建立的 HTML代碼會不斷累積，造成Ext的Dom查詢會以幾何速度變慢。

    如何解決這類問題？答案是利用析構事件完成獨立變量的銷毀工作。我們為Tab中寫一個listeners，監聽beforedestroy并寫入如下代碼

listeners: {beforedestroy: function() {

    win.destroy();

    win = null;

    delete win;

    return true;

}}

這樣win對象和win對象建立的html代碼便會在關閉tab時被清理掉。

如果需要清理大量對象，我們可以通過一個對應表進行批量操作。

var win = new Ext.Window;

var win2 = new Ext.Window;

var win3 = new Ext.Window;

var test = [1,2, 3,4, 5];

var hxr = new window.HTTPXMLRequest();

var destroys = [win, win2, win3, test, hxr]; //對應表

listeners: {beforedestroy: function() { //批量清除

    for (k in destroys) {

        if (destroys[k].destroy)

            destroys[k].destroy();

        destroys[k] = null;

        delete destroys[k];

    }

    destroys = null

    delete destroys;

    return true;

}}