3

我正在使用一个名为 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 = [];
        },

我可以像这样访问组件中的destroy方法

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();
  };
}
4

2 回答 2

2

查看文档，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();

于 2018-03-23T09:22:41.983 回答
2

挂钩黄金布局是活动的预期目的。

正如@TJ 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();
    }
})
于 2020-01-17T17:27:16.530 回答