什么时候调用YUI destroy？

Question

什么时候应该调用 destroy ？ YUI 生命周期是否会自动调用它？页面卸载是否会导致 YUI 生命周期对页面处理期间创建的所有对象调用 destroy ？我一直在假设我需要自己进行所有调用来销毁，但是当 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' ]
});

单击处理程序将向我的应用程序提交一个请求，该请求将更改页面。我是否需要记住所有的enhancedTable对象并让一个onunload处理程序调用每个对象的destroy方法？或者 YUI 框架会处理这个问题吗？

这个问题的最后一部分是，我还有在此之外的代码，通过替换

的内容来替换整个表。这样做时，脚本将重新运行并使用新的 EnhancedTable 扩充新的 。我是否需要记住旧表，并在新表破坏它之前销毁它？

Answer 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 subs。以上是额外的功劳，只有当您要自己销毁该物体时才需要这样做。