1

什么时候应该调用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">. 这样做时，脚本将重新运行并<table>用新的EnhancedTable. 我是否需要记住旧表，并在新表破坏它之前将其销毁？

4

1 回答 1

4

我没有将处理程序设置为属性，而是将它们全部存储在这样的数组中：

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 潜艇。以上是额外的功劳，只有在您要自己破坏对象时才真正需要。

于 2011-09-28T22:01:51.383 回答