时间戳

首页 > 解决方案 > 使用汇总捆绑访问整个 ES6 模块中的对象实例

javascript - 使用汇总捆绑访问整个 ES6 模块中的对象实例

问题描述

我有点卡在这里，希望能在这件事上得到一些帮助。

我正在开发 Web 应用程序的一部分。代码主要以 OOP 风格编写。代码由模块组成，每个模块都包含一个实例化为对象的类（侧边栏、顶部导航、搜索栏……），主要是单例（不是我的选择，但我们开始吧）。

模块将使用 rollup.js 进行捆绑。测试通过 QUnit 和 Karma 运行。

我遇到的问题是我需要一些对象可以全局访问-例如，如果mainmenu对象检测到sidebar对象已折叠，则 mainmenu 对象会执行其方法mainmenu.doThis()甚至sidebar.doThat().

export class Sidebar {
    static initialize(ctx) {
        let elem = $('#sidebar-element', ctx);
        return new Sidebar(elem);
    }
    constructor(elem) {
        this.elem = elem;
        this.collapsed = false;

        this._toggle = this.toggle_this.bind(this);
        $('#button').on('click', this._toggle);
    }
    toggle_this() {
        this.collapsed = !this.collapsed;
    }
}

在不同的模块中：

export class Mainmenu {
    static initialize(ctx) {
        let elem = $('#mm-element', ctx);
        return new Mainmenu(elem);
    }
    constructor(elem) {
        this.elem = elem;
        if( sidebar_instance.collapsed === true ) {
             do_that();
        }
    }
    do_that() {
        console.log('I did that!');
    }
}

在拆分为模块之前，所有实例都保存在一个全局命名空间中——所以namespace.sidebar，namespace.mainmenu你可以命名它。如果一个对象不存在，它被定义为null。

我想知道在使用 ES6 模块时实现此类目标的“最佳实践”方法是什么。

到目前为止我想出了什么：

我还没有设法找到一个合适的解决方案，让我可以在不修改基本代码的情况下轻松测试，但也有一个“足够干净”的方法。

标签： javascriptkarma-runneres6-modulesqunitrollupjs

解决方案

推荐阅读