Question

何时应该召唤毁灭？它是否会被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框架会处理这个问题吗？

这个问题的最后一部分是，我还有一些代码，通过替换<div id="replaceMe">的内容来替换整个表。这样，脚本将重新运行并使用新的<table>扩充新的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潜艇。以上是额外的功劳，如果你要自己摧毁这个物体，这真的是必要的。

什么时候叫YUI毁灭？

1 个答案: