當我們在jQuery UI中發佈銷燬方法時發生了什麼

Question

當我們在destroy jQuery ui小部件的幕後發生了什麼。

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

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

窗口小部件由原型的內部方法_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; 
},