何时调用 YUI 销毁？答案

【问题标题】：When to call YUI destroy?何时调用 YUI 销毁？
【发布时间】：2011-11-27 05:53:39
【问题描述】：

什么时候应该调用destroy？ YUI 生命周期是否会自动调用它？页面卸载是否会导致 YUI 生命周期对页面处理期间创建的所有对象调用销毁？我一直在假设我需要自己进行所有调用来销毁，但是当 ajax 调用替换我逐渐增强的代码部分时，这会变得很麻烦。例如：

<div id="replaceMe">
  <table>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </table>
  <script>
    YUI().use('my-lib', function(Y) {
      Y.mypackage.enhanceTable("replaceMe");
    });
  <script>
</div>

my-lib 模块基本上为每一行添加了一个点击处理程序和鼠标悬停：

YUI.add('my-lib', function(Y) { 
    function EnhancedTable(config) {
        EnhancedTable.superclass.constructor.apply(this, arguments);
    }
    EnhancedTable.NAME = "enhanced-table";
    EnhancedTable.ATTRS = {
        containerId : {},
        onClickHandler : {},
        onMouseoverHandler : {},
        onMouseoutHandler : {}
    };
    Y.extend(EnhancedTable, Y.Base, {
        _click : function(e) {
            //... submit action
        },
        destructor : function() {
            var onClickHandler = this.get("onClickHandler"),
            onMouseoverHandler = this.get("onMouseoverHandler"),
            onMouseoutHandler = this.get("onMouseoutHandler");

            onClickHandler && onClickHandler.detach();
            onMouseoverHandler && onMouseoverHandler.detach();
            onMouseoutHandler && onMouseoutHandler.detach();
        },
        initializer : function(config) {
            var container = Y.one("[id=" + this.get("containerId") + "]");

            this.set("container", container);
            this.set("onMouseoverHandler", container.delegate("mouseover",
                    this._mouseover, "tr", this ));
            this.set("onMouseoutHandler", container.delegate("mouseout",
                    this._mouseout, "tr", this ));
            this.set("onClickHandler", container.delegate("click", 
                    this._click, "tr", this ));
        },
        _mouseout : function(e) {
            e.currentTarget.removeClass("indicated");
        },
        _mouseover : function(e) {
            e.currentTarget.addClass("indicated");
        }
    });

    Y.namespace("mypackage");
    Y.mypackage.enhanceTable = function(containerId) {
        var enhancedTable new EnhancedTable({containerId:containerId});
    };
}, '0.0.1', {
    requires : [ 'base', 'node' ]
});

点击处理程序将向我的应用程序提交一个请求，该请求将更改页面。我是否需要记住所有增强表对象并让onunload 处理程序调用每个对象的销毁方法？还是 YUI 框架会处理这个问题？

这个问题的最后一部分是，我还有其他代码通过替换<div id="replaceMe"> 的内容来替换整个表。这样做时，脚本将重新运行并用新的EnhancedTable 扩充新的<table>。我是否需要记住旧表，并在新表破坏它之前将其销毁？

【问题讨论】：

标签： memory-leaks yui destroy

【解决方案1】：

我没有将处理程序设置为属性，而是将它们全部存储在一个数组中，如下所示：

this._handlers = [ 
    container.delegate("mouseover", this._mouseover, "tr", this ),
    container.delegate("mouseout", this._mouseout, "tr", this ),
    container.delegate("click", this._click, "tr", this )
];

然后添加执行以下操作的析构方法

destructor : function() {
    new Y.EventTarget(this._handlers).detach();
}

它可以完成同样的事情，但您的工作量要少得多！

理想情况下，不要对每个表运行此操作，而是将所有代表附加到 #replaceMe，这样每次更改内容时都不需要重新创建它，无论发生在哪里。

YUI 不会在卸载时自动调用.destroy()，但它会清理 DOM 订阅。以上是额外的功劳，仅当您要自己销毁对象时才真正需要。

【讨论】：