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;
}}