1

destroy はいつ呼び出す必要がありますか? YUI ライフサイクルによって自動的に呼び出されることはありますか? ページのアンロードにより、YUI ライフサイクルは、ページ処理中に作成されたすべてのオブジェクトに対して destroy を呼び出しますか? 私は、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">. そうすることで、スクリプトが再実行され、 new が new で拡張され<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 に答える