javascript - 每次导出const时es6 harmony export 都会创建实例吗？

Question

我正在尝试用 es6 编写一个简单的 WebGL 程序。这是一个文件，无论何时将其导入文件，它都应该引入 canvas 上下文。这个想法是创建一次 context 并跨文件共享它。

import { getDisplay } from './get-display'; // document.getElementById('my canvas')
import { getWebGLContext } from './get-webgl-context'; // canvas.getContext('webgl')
/** 
 * Gets the WebGL Contexts and exports the reference
*/
export const gl = getWebGLContext(getDisplay());

问题是 gl = getWebGLContext(getDisplay()) 这句话是否会在每次导入时执行？或者它是否被评估一次并以 DI 方式注入(inject)？ Harmony 导入/导出如何工作？

Answer 1

不，gl = getWebGLContext(getDisplay()) 将在评估模块时执行一次；每个导入它的模块都会收到一个绑定(bind)到相同的 gl 常量。

事实上，如果 gl 是一个变量，而不是常量，那么您的模块对它所做的更改将对导入它的其他模块可见；导入的绑定(bind)是实时的。例如，给定这个模块:

foo.js:

export let answer = 42;
export const doubleAnswer = () => answer *= 2;

和使用它的bar.js:

import { answer } from './foo.js';

export const showAnswer = () => {
    console.log("showing", answer);
};

和一个同时使用两者的主模块:

import { answer, doubleAnswer } from './foo.js';
import { showAnswer } from './bar.js';

console.log("a", answer);
showAnswer();
doubleAnswer();
console.log("b", answer);
showAnswer();

运行该主模块时的输出是:

a 42showing 42b 84showing 84

请注意主模块和 bar.js 如何看到 foo.js 中的代码对 answer 所做的更改。

关于模块的更多信息:

• 在 MDN 上 - import , export
• 在 Axel Rauschmayer 的 Exploring ES6