当我们在 jQuery UI 中发出 destroy 方法时会发生什么答案

【问题标题】：What happens when we issue a destroy method in jQuery UI当我们在 jQuery UI 中发出 destroy 方法时会发生什么
【发布时间】：2011-04-26 06:58:52
【问题描述】：

当我们destroy 一个 jQuery ui 小部件时，幕后发生了什么。

例如：$('#test').tabs('destroy')

【问题讨论】：

标签： jquery jquery-ui widget destroy

【解决方案1】：

如果您查看小部件工厂的源代码，您会注意到发生的情况是，它将删除小部件首次初始化时添加到 DOM 的多余元素、类和绑定事件。简而言之，它将有效地将目标元素恢复到其原始状态。

这是line 188 of the widget factory的摘录：

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" );
},

小部件通过对 internal 方法 _destroy 进行原型设计来实现自己的清理例程（这是工厂中的无操作方法，即它不做任何事情；您可以看到它在destroy 方法的开头调用）。 line 466 of the Tabs widget 的摘录如下所示：

_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;
},

【讨论】：