ES6 Harmony导出const是否每次导入生成实例？WebGL上下文共享疑问

嘿，我来帮你理清这些ES6模块相关的问题，刚好和你做WebGL的场景非常贴合～

1. 你的WebGL上下文语句会执行几次？ #

直接给你结论：只会执行一次。ES6模块天生是单例模式的——不管你在多少个文件里导入这个模块，模块顶层的代码只会在第一次被导入时执行一次，之后所有的导入操作都会直接复用已经初始化好的模块实例。

举个具体的例子，假设你把这段逻辑放在webgl-context.js里：

const canvas = getDisplay();
const gl = getWebGLContext(canvas);
export default gl;

不管你在renderer.js、shader-loader.js里多少次写import gl from './webgl-context.js'，getDisplay()和getWebGLContext()都只会跑一次，所有导入的地方拿到的都是同一个gl上下文实例，完全符合你“仅创建一次并在多文件共享”的需求。

2. ES6 Harmony（标准ES6模块）的导入/导出机制到底是怎样的？ #

我用几个关键特性来拆解：

• 单例缓存：模块一旦被加载并初始化，就会被浏览器/Node.js缓存起来，后续的导入请求都会直接复用这个缓存的实例，不会重新执行模块代码。
• 顶层代码仅初始化一次：模块里的顶层变量、函数、类等声明，都是在模块第一次被导入时完成初始化的，之后不会重复执行初始化逻辑。
• 绑定引用而非拷贝：导入的变量本质是对模块内导出变量的实时引用，不是拷贝一份新值。比如如果模块里的导出变量（非const）后续被修改，所有导入该变量的地方都会同步看到变化。
• 静态编译分析：ES6模块的导入导出是在编译阶段就确定好的，不能动态修改（比如不能在if语句里写导入导出），这也是它和CommonJS模块的核心区别之一。

3. 导出const时，每次导入会不会创建新实例？ #

不会，同样遵循模块单例的规则：

• 如果导出的是原始值const（比如export const PI = 3.14），这个值在模块初始化时就被确定，所有导入的地方拿到的都是同一个值的绑定（因为原始值不可变，看起来像是拷贝，但本质是引用绑定）。
• 如果导出的是引用类型的const（比如你的gl上下文对象），这个const变量保存的是对象的引用，所有导入的地方共享同一个引用，也就是同一个实例。

举个直观的例子验证：

// module.js
const obj = { name: "webgl" };
export default obj;

// file1.js
import obj from './module.js';
obj.name = "updated-webgl";

// file2.js
import obj from './module.js';
console.log(obj.name); // 会输出"updated-webgl"，说明是同一个实例

针对你的WebGL场景的最佳实践 #

你完全可以放心地把创建WebGL上下文的逻辑封装在单独的模块里，导出这个上下文实例，其他业务模块直接导入使用即可——ES6模块本身就自带了这种“单例共享”的特性，不需要额外依赖注入框架就能满足你的需求。

内容的提问来源于stack exchange，提问作者sabithpocker