向库函数添加其他方法

时间:2018-03-23 09:20:57

标签: javascript jquery angular prototype golden-layout

我正在使用名为Golden Layout的库,它有一个名为destroy的函数,它将关闭所有应用程序窗口,关闭窗口或refesh

我需要在destroy函数中添加其他方法。我需要删除所有localstorage。

我该怎么做?请帮忙

以下是插件代码。

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

2 个答案:

答案 0 :(得分:1)

查看the documentation,GoldenLayout提供了一个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();

示例:

Range(ws.Cells(2, c), ws.Cells(ws.Rows.Count, c).End(xlUp)).ClearContents

答案 1 :(得分:1)

进入黄金布局是events的预期目的。

@T.J. Crowder简要地提到,itemDestroyed事件在布局中的某个项目被销毁时被调用。

您可以像这样监听此事件:

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

但是,每次任何内容被破坏时都会调用此事件,并且即使关闭选项卡,该事件也会在树中传播。这意味着,如果您在布局根目录上调用destroy,您将为每个RowOrColumnStackComponent

获得一个事件

我建议检查传递到事件中的项目,如果不是主窗口(root项目),则忽略该项目

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