Добавить дополнительные методы в библиотечную функцию

Question

Я использую библиотеку под названием Golden Layout, в ней есть функция destroy который закроет все окно приложения, при закрытии окна или рефеш

Мне нужно добавить дополнительный метод к destroy функция. Мне нужно удалить все местные хранилища.

Как мне это сделать? Пожалуйста помоги

Ниже приведен код плагина.

lm.LayoutManager = function( config, container ) {
....    
destroy: function() {
            if( this.isInitialised === false ) {
                return;
            }
            this._onUnload();
            $( window ).off( 'resize', this._resizeFunction );
            $( window ).off( 'unload beforeunload', this._unloadFunction );
            this.root.callDownwards( '_$destroy', [], true );
            this.root.contentItems = [];
            this.tabDropPlaceholder.remove();
            this.dropTargetIndicator.destroy();
            this.transitionIndicator.destroy();
            this.eventHub.destroy();

            this._dragSources.forEach( function( dragSource ) {
                dragSource._dragListener.destroy();
                dragSource._element = null;
                dragSource._itemConfig = null;
                dragSource._dragListener = null;
            } );
            this._dragSources = [];
        },

Я могу получить доступ к методу уничтожения в компоненте, как это

this.layout = new GoldenLayout(this.config, this.layoutElement.nativeElement);

this.layout.destroy();`

Мой код

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
  var originalDestroy = this.layout.destroy;
  this.layout.destroy = function() {
      // Call the original
      originalDestroy.apply(this, arguments);
        localStorage.clear();
  };
}

Answer 1

Глядя на документацию, GoldenLayout предлагает itemDestroyed событие, которое вы можете подключить, чтобы сделать свою собственную очистку Описание:

Выполняется всякий раз, когда предмет уничтожается.

Если по какой-то причине вы не можете, общий ответ таков: вы можете легко обернуть функцию:

var originalDestroy = this.layout.destroy;
this.layout.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
};

Вы можете сделать это для всех случаев, если необходимо, изменив GoldenLayout.prototype:

var originalDestroy = GoldenLayout.prototype.destroy;
GoldenLayout.prototype.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
};

Пример:

// Stand-in for golden laout
function GoldenLayout() {
}
GoldenLayout.prototype.destroy = function() {
    console.log("Standard functionality");
};

// Your override:
var originalDestroy = GoldenLayout.prototype.destroy;
GoldenLayout.prototype.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
    console.log("Custom functionality");
};

// Use
var layout = new GoldenLayout();
layout.destroy();

Answer 2

Привязка к золотой раскладке - это прямая цель мероприятий.

Как вкратце затронул T.J. Crowder, естьitemDestroyed событие, которое вызывается, когда элемент в макете уничтожается.

Вы можете просто прослушать это событие следующим образом:

this.layout.on('itemDestroyed', function() {
    localStorage.clear();
})

---

Однако это событие вызывается каждый раз, когда что-либо уничтожается, и распространяется вниз по дереву, даже при закрытии вкладки. Это означает, что если вы вызовете destroy в корне макета, вы получите событие для каждогоRowOrColumn, Stack а также Component

Я бы рекомендовал проверить элемент, переданный в событие, и игнорировать, если не главное окно (root пункт)

this.layout.on('itemDestroyed', function(item) {
    if (item.type === "root") {
        localStorage.clear();
    }
})