ES6模块化通过export和import实现静态分析与编译时加载，支持默认和命名导出，采用早绑定与单例共享机制，确保依赖清晰、性能优化，并通过type="module"在浏览器中启用，提升代码可维护性。
ES6模块化是现代JavaScript开发的核心特性之一。它提供了一种标准化的方式来组织和复用代码，解决了早期脚本拼接、全局污染和依赖管理混乱的问题。与CommonJS或AMD等模块方案不同，ES6模块是语言层面的原生支持，具备静态分析、编译时加载和高效tree-shaking能力。
ES6模块的基本语法
ES6模块使用 export 和 import 关键字来实现模块的导出与引入。
- 使用 export 可以导出变量、函数、类或对象
- 使用 import 可以从其他模块中导入所需内容
例如：
// math.js
export const PI = 3.14;
export function add(a, b) {
return a + b;
}
// main.js
import { PI, add } from './math.js';
console.log(add(PI, 1));
也可以使用默认导出（export default），每个模块最多一个：
立即学习“Java免费学习笔记（深入）”；
// utils.js
export default function() {
return "Hello";
}
// main.js
import myFunc from './utils.js';
myFunc();
模块的静态结构与编译时解析
ES6模块最大的特点是**静态性**。这意味着 import 和 export 必须位于模块顶层，不能在条件语句或函数内部使用。
- 这种设计使得工具可以在不执行代码的情况下分析模块依赖关系
- 支持静态分析，有利于构建工具进行优化（如删除未使用的导出）
- 确保模块结构在编译阶段就已确定
正因为如此，以下写法是非法的：
if (true) {
import { foo } from 'module'; // SyntaxError
}
模块的加载机制：早绑定与单例共享
ES6模块采用“早绑定”策略。模块在被引入时会先建立引用连接，而不是复制值。
- 所有导入的绑定都是对原始值的只读引用，不是拷贝
- 如果导出的是一个变量，其他模块看到的是该变量的实时状态
- 模块在整个应用中是单例的——无论被导入多少次，都指向同一个实例
示例说明动态绑定：
// counter.js
export let count = 0;
export function increment() {
count++;
}
// moduleA.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
console.log(count); // 1
// moduleB.js
import { count } from './counter.js';
console.log(count); // 1，反映最新状态
浏览器中的模块加载流程
在浏览器中，要使用ES6模块，需在 script 标签中添加 type="module" 属性：
<script type="module" src="main.js"></script>
模块加载过程如下：
- 浏览器解析HTML，遇到模块脚本后开始下载
- 模块按依赖关系进行递归加载（通过相对或绝对路径）
- 模块代码只执行一次，后续导入共享同一实例
- 模块自动运行在严格模式下，无需显式声明 "use strict"
- 模块具有自己的作用域，不会污染全局环境
此外，模块支持 import() 动态导入语法，用于按需加载：
button.addEventListener('click', async () => {
const module = await import('./lazyModule.js');
module.doSomething();
});
基本上就这些。理解ES6模块的静态性、引用机制和加载行为，有助于写出更清晰、可维护和高效的代码。模块化不仅是语法改进，更是工程化思维的体现。
