ES6模块系统通过export和import实现静态模块化，支持命名导出、默认导出及动态导入import()，具备单例执行、严格模式和依赖预解析特性，是现代前端代码组织的标准方案。
ES6 模块系统是 JavaScript 官方标准的模块化解决方案，彻底改变了前端开发中组织和管理代码的方式。它提供了简洁、静态、可预测的语法，让开发者能更高效地拆分逻辑、复用代码，并提升项目可维护性。
1. ES6 模块的基本语法
ES6 模块使用 export 和 import 关键字来导出和导入功能。这种语法是静态的，意味着模块依赖关系在编译时就已确定，有利于工具进行优化和检查。
导出（export）：可以导出变量、函数或类。
// math.js export const PI = 3.14159;export function add(a, b) {
return a + b;
}
export class Calculator {
multiply(x, y) {
return x * y;
}
}
也可以使用 export default 导出默认值，每个模块最多一个默认导出。
立即学习“Java免费学习笔记（深入）”；
// utils.js export default function() { console.log("这是默认导出函数"); }导入（import）：根据导出方式选择对应的导入语法。
// main.js import { PI, add, Calculator } from './math.js'; import myFunc from './utils.js'; // 默认导入，无需大括号console.log(add(PI, 2));
myFunc();
支持重命名导入导出，避免命名冲突。
import { add as sum } from './math.js'; console.log(sum(1, 2)); // 32. 默认导出与命名导出的区别
理解默认导出（default export）和命名导出（named export）的差异对正确使用模块至关重要。
- 一个模块可以有多个命名导出，但只能有一个默认导出
- 命名导入需使用大括号 {}，默认导入则不需要
- 默认导出更便于模块的主要功能快速被引用
- 命名导出更适合导出多个辅助工具或常量
混合导出示例：
// api.js export default function fetchUser() { // 主要功能 }export const API_URL = '/api/user';
export function validateUser(user) { / ... / }
对应导入方式：
import fetchUser, { API_URL, validateUser } from './api.js';
3. 模块的加载与执行机制
ES6 模块是单例的，且具有“只执行一次”的特性。无论被多少个文件导入，模块中的代码只会执行一遍。
模块在解析时会建立静态依赖图，所有 import 都会被提升到文件顶部（类似变量提升），因此导入顺序不影响执行结果。
浏览器中使用模块需在 script 标签中添加 type="module"：
<script type="module" src="main.js"></script>模块默认启用严格模式，无需手动写 "use strict"；同时支持相对路径和绝对路径导入，但本地文件需通过服务器访问（因 CORS 限制）。
4. 动态导入：import() 表达式
虽然 import 语句是静态的，但 ES6 后续引入了动态导入 import()，返回 Promise，适用于按需加载场景。
例如实现懒加载组件：
button.addEventListener('click', () => { import('./heavyModule.js') .then(module => { module.render(); }) .catch(err => { console.error("加载失败", err); }); });动态导入可用于条件加载、代码分割、错误处理等更灵活的场景。
基本上就这些。ES6 模块系统设计清晰，结合现代构建工具（如 Webpack、Vite），已成为前端开发的标准实践。掌握其核心语法和行为特点，能显著提升代码组织能力。不复杂但容易忽略细节，建议在实际项目中多加练习。
