所属板块：5. ES6+ 高频新特性
记录日期：2026-03-xx
更新：遇到模块化或 Tree-Shaking 相关题时补充
1. 前端模块化的演进简史
- 早期：IIFE（立即执行函数）手动封装
- 中期：AMD（RequireJS） / CMD（SeaJS）
- Node 时代：CommonJS（require/module.exports）
- 现代标准：ES Module（import/export）——浏览器和 Node 最终统一的标准
ES Module 的出现，让前端终于拥有了原生静态模块化能力。
2. import 与 export 基本语法
导出：
// 命名导出（可多个）
export const name = "张三";
export function say() {}
// 默认导出（一个模块只能有一个）
export default { name: "张三" };
导入：
import { name, say } from './module.js'; // 命名导入
import MyModule from './module.js'; // 默认导入
import * as All from './module.js'; // 全部导入
动态导入（import()）——返回 Promise，用于按需加载：
button.addEventListener('click', async () => {
const module = await import('./heavyModule.js');
module.init();
});
3. ES Module vs CommonJS 终极对比（面试八股文重灾区）
| 维度 | CommonJS (require) | ES Module (import/export) | 实际影响 |
|---|---|---|---|
| 加载时机 | 运行时加载 （执行完整个模块才返回） | 静态编译时加载 （代码解析阶段就确定依赖） | ES Module 支持 Tree-Shaking |
| 输出类型 | 值拷贝（浅拷贝） | 只读引用 （模块内部变化会同步） | CommonJS 修改不影响外部 |
| 顶层 this | 指向当前模块 | 指向 undefined | ES Module 更严格 |
| 循环依赖 | 能部分处理 （返回已执行部分） | 静态分析，更容易报错 | ES Module 更规范 |
| 异步支持 | 无原生支持 | 原生支持 import() | 代码分割更方便 |
Tree-Shaking 的前提正是 ES Module 的静态分析能力（Webpack/Vite/Rollup 都能摇掉未使用的 export）。
4. 实际开发中的注意点
- Node.js 中使用 ES Module：
- 文件后缀
.mjs或package.json中设置"type": "module"
- 文件后缀
- 浏览器中直接使用：
<script type="module" src="app.js"></script>
- 动态导入是实现路由懒加载、组件按需加载的核心手段
5. 小结 & 第五板块完结
- ES Module 带来了静态分析 + Tree-Shaking + 动态加载三大工程化红利
- [5-1] 数据结构 + [5-2] 函数 + [5-3] 对象扩展 + 本文的模块化，共同构成了 ES6+ 的完整现代化工具链
第五板块（ES6+ 高频新特性）到此全部结束。
这些特性几乎每天都在你的 React/Vue 项目中出现，彻底掌握后写代码效率和源码阅读能力都会上一个台阶。
接下来是第六大板块：DOM/BOM 与浏览器机制（事件流、存储、跨域、重绘回流等）——这是 JS 在宿主环境中的最后一块拼图。
返回总目录：戳这里
