javascript - 传递全局变量来导入 JS 模块

Question

假设我有两个使用 webpack 导入的 JS 文件。我想创建可以在整个应用程序中使用的全局变量。问题是，经过多次错误尝试后，我无法做到这一点。我见过类似的问题，但这种情况是独一无二的(加上答案不起作用)

我已将其缩小为最简单的形式，应该可以解释我正在尝试执行的操作。

one.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

two.js

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

index.js

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

一如既往，提前致谢。

Answer 1

您可以将您的值存储为 OneJS 上的实例属性，并利用构造函数注入(inject)将 oneJs 实例注入(inject)到需要访问相同值的所有其他类实例，例如

one.js

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

two.js

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

index.js

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);