jquery - jQuery UI で destroy メソッドを発行するとどうなるか

Question

destroyjQuery ui ウィジェットの舞台裏で何が起こっているのか。

元：$('#test').tabs('destroy')

Answer 1

ウィジェットファクトリのソースコードを見ると、ウィジェットが最初に初期化されたときにDOMに追加された余分な要素、クラス、およびバインドされたイベントが削除されることがわかります。つまり、ターゲット要素を効果的に元の状態に復元します。

これは、ウィジェットファクトリの188行目からの抜粋です。

destroy: function() {
    this._destroy();
    // we can probably remove the unbind calls in 2.0
    // all event bindings should go through this._bind()
    this.element
        .unbind( "." + this.widgetName )
        .removeData( this.widgetName );
    this.widget()
        .unbind( "." + this.widgetName )
        .removeAttr( "aria-disabled" )
        .removeClass(
            this.widgetBaseClass + "-disabled " +
            "ui-state-disabled" );

    // clean up events and states
    this.bindings.unbind( "." + this.widgetName );
    this.hoverable.removeClass( "ui-state-hover" );
    this.focusable.removeClass( "ui-state-focus" );
},

ウィジェットは、内部メソッドのプロトタイプを作成することにより、独自のクリーンアップルーチンを実装します_destroy（これは、ファクトリではno-opメソッドです。つまり、何も実行しませんdestroy。メソッドの開始時に呼び出されることがわかります）。タブウィジェットの466行目からの抜粋は次のようになります。

_destroy: function() {
    var o = this.options;

    if ( this.xhr ) {
        this.xhr.abort();
    }

    this.element.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" );

    this.list.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );

    this.anchors.each(function() {
        var $this = $( this ).unbind( ".tabs" );
        $.each( [ "href", "load" ], function( i, prefix ) {
            $this.removeData( prefix + ".tabs" );
        });
    });

    this.lis.unbind( ".tabs" ).add( this.panels ).each(function() {
        if ( $.data( this, "destroy.tabs" ) ) {
            $( this ).remove();
        } else {
            $( this ).removeClass([
                "ui-state-default",
                "ui-corner-top",
                "ui-tabs-active",
                "ui-state-active",
                "ui-state-disabled",
                "ui-tabs-panel",
                "ui-widget-content",
                "ui-corner-bottom"
            ].join( " " ) );
        }
    });

    return this;
},