引言：随着前端工程的复杂化，模块化已成为现代开发的基石。本文将深度剖析ES Modules和CommonJS两大模块体系，从语法差异到实战应用，帮助你彻底掌握前端模块化的核心知识。
一、模块化学习
1. 问题引入
1）js 文件代码行数掌控
- 代码量过多的影响：
-
- 阅读性差：需要频繁使用滚动条定位代码位置
- 功能混杂：多个功能混杂在同一个文件中难以区分和维护
- 维护困难：代码量越大越难进行修改和调试
2) 代码文件数量多的问题及影响
- 解决方案：将大型项目拆分为多个小文件
- 拆分优势：
-
- 每个文件专注单一功能
- 便于团队协作开发
- 降低单个文件的复杂度
- 拆分后新问题：
-
- 全局变量污染
- 依赖关系混乱
3）全局变量污染问题
- 定义：多个JS文件共享同一全局命名空间导致的变量/函数命名冲突
- 示例：
-
- 文件A定义全局函数getRandom(min, max)
- 文件B也定义同名全局函数getRandom
- 后加载的文件会覆盖先加载的同名函数
- 影响：
-
- 开发者不敢随意定义全局变量
- 团队协作时难以管理全局命名空间
- 第三方库可能引入不可预见的命名冲突
4）依赖混乱问题
- 表现：
-
- 文件之间存在复杂的依赖关系（如B依赖A，C依赖B等）
- 需要手动维护正确的加载顺序
- 实际困难：
-
- 大型项目可能有上百个JS文件
- 依赖链可能非常深（多层嵌套依赖）
- 新增文件时难以确定正确的插入位置
- 后果：
-
- 导致前端程序复杂度受限
- 难以开发大型复杂应用
5）模块化的出现与意义
- 核心价值：
-
- 解决全局污染：每个模块有独立作用域
- 解决依赖混乱：提供明确的依赖声明机制
- 开发优势：
-
- 支持代码细分为多个小文件
- 每个文件专注单一功能
- 便于团队分工协作
- 历史意义：
-
- 突破了前端开发的规模限制
- 使大型复杂应用的前端开发成为可能
2. 前端模块化的标准
1）模块化的标准
- 前端模块化标准
-
- CommonJS
-
-
- 定义: 简称CMJ，是一种社区制定的模块化标准
- 产生背景:
-
-
-
-
- 由于ES官方早期未推出模块化标准
- 前端社区为解决实际问题自发形成
-
-
-
-
- 现状:
-
-
-
-
- 目前仍被约10%的项目使用
- 面试中考察频率较高
- 是Node.js默认采用的模块系统
-
-
-
-
- 特点:
-
-
-
-
- 出现时间早于ES Module
- 采用同步加载方式
- 使用require()导入，module.exports导出
-
-
-
- ES Module
-
-
- 定义: 简称ESM，是ECMAScript官方模块标准
- 特点:
-
-
-
-
- 采用import/export语法
- 支持静态分析和tree shaking
- 使用异步加载机制
-
-
-
-
- 市场占比:
-
-
-
-
- 约占当前项目使用量的90%
- 是现代前端开发的主流选择
-
-
-
-
- 与CMJ区别:
-
-
-
-
- 官方标准vs社区标准
- 静态分析vs动态加载
- 异步vs同步
- 浏览器原生支持vs需要打包工具处理
-
-
2）CommonJS如何实现模块化
- node 环境
-
- node 环境支持 CommonJS
-
-
- 环境限制：CommonJS 是社区规范，仅能在 node 环境中使用，浏览器环境不支持。
- 与ESM区别：ES Module(ESM)是官方标准，浏览器和node环境都支持，但CommonJS出现更早
-
二、ESM 导出导入语法
- 核心机制：模块最终合并为一个对象导出，包含default默认导出和具名导出两种属性
-
- 具名导出：
-
-
- 直接导出：export const a=1 或 export function b(){}，变量名即导出名
- 后置导出：先定义const d=2，再通过export {d}导出
- 重命名导出：export {k as temp} 将变量k以temp名称导出
-
-
- 默认导出：
-
-
- 单次限制：每个模块只能有一个export default
- 语法变体：export default 3 或 export default function(){}
- 等效写法：const e=4; export {e as default}
-
-
- 混合导出:
-
-
- 两种导出方式可共存，最终合并为单个导出对象
-
javascript
export const a = 1; // 具名，常用
export function b() {}; // 具名
export const c = ()=>{} // 具名
const d =2;
export {d} // 具名
const k = 10;
export {d as tem} // 具名
export default = 3 // 默认
export default function() {} // 默认
const f= 4,g=5,h=6
export {f,g,h as default} // + 默认
// 以上代码将导出下面的对象
{
a:1
b:fn
c:fn
d:2
tem:10
f:4
g:5
default:6
}1）静态依赖和动态依赖
- 静态导入语法：
-
- import c from "模块路径"：导入默认导出(default)到变量c
- import c, {a,b} from "模块路径"：同时导入默认导出和具名导出
- import * as obj from "模块路径"：将整个模块对象导入到变量obj
- import {a as temp1, b as temp2} from "模块路径"：导入具名导出并重命名
- import {default as a} from "模块路径"：导入默认导出必须使用别名
- 动态导入：
-
- import("模块路径")：返回Promise，模块对象在resolve时获取，为什么返回Promise，因为要加载文件需要时间
- 特点：可在代码块中执行，不要求顶级作用域
- 静态依赖特点
-
- 代码位置限制：必须写在模块顶级作用域，不能放入判断/循环/函数等代码块中
- 原因：需要在代码运行前分析出所有依赖关系
- 分析时机：代码未运行时就要确定模块间的依赖关系
- 动态依赖特点
-
- CommonJS特性：
-
-
- 使用require()函数动态导入
- 依赖关系在代码运行时才能确定
- 可放入条件判断、循环等代码块中执行
-
-
- 与ESM区别：
-
-
- 静态依赖：编译时分析依赖
- 动态依赖：运行时确定依赖
-
- 导出语法
-
- 具名导出：
-
-
- export const a = 1
- export function b(){}
- 可导出多个，需使用{}导入
-
-
- 默认导出：
-
-
- export default {...}
- 只能导出一个，可直接导入
-
-
- 混合导出：可同时使用两种导出方式，最终合并为一个对象
- 注意事项
-
- 导出限制：导出代码必须为顶级代码，不可放入代码块
- 特殊导入：
-
-
- import "模块路径"：仅执行模块，不导入任何内容
- import()函数：ES2020新增的动态导入方式
-
-
- 默认导出处理：
-
-
- default是关键字，不能直接作为变量名
- 必须使用import {default as 别名}语法
-
2）动态导入
- 动态导入的概念 29:36
-
- 静态导入限制：ES Module的静态导入必须放在代码顶端，不能放入代码块中，否则会报语法错误。
- 动态导入优势：ES Module标准更新后支持动态导入，允许在代码块中按需加载模块，解决了静态导入的位置限制问题。
- 动态导入的Promise返回 30:10
-
- 异步特性：动态导入返回一个Promise对象，因为需要异步加载模块文件。
- 模块对象获取：Promise完成时返回的是整个模块对象，包含所有导出内容。
- 与Node.js区别：浏览器环境下必须异步加载，而Node.js在服务器环境可以同步加载。
- 动态导入的then回调
-
- 基本用法：
- 模块对象结构：通过m.default访问默认导出内容，其他具名导出可通过m.导出名访问。
- 动态导入的await用法
-
- 异步函数中使用：
- 注意事项：使用await必须将外层函数标记为async，否则会报语法错误。
- 静态导入的位置要求
-
- 规范要求：静态导入必须写在代码最顶部，不能放入任何代码块中。
- 浏览器纠错：虽然放到非顶部位置浏览器可能不会报错（会自动提升到顶部），但这是不符合规范的写法。
- 最佳实践：所有静态导入语句集中放在文件开头，保持代码规范性。
- 导入符号的常量性
-
- 不可变性：通过import导入的符号都是常量，不能重新赋值。
- 错误示例：
- 设计原理：这种限制保证了模块导入的稳定性和可预测性，避免意外修改导致的错误。
三、 学习小结
| 知识点 | 核心内容 | 考试重点/易混淆点 | 难度系数 |
|---|---|---|---|
| 模块化概念 | 将代码分割成独立功能单元（模块）解决代码维护难题 | 模块化与工程化的关系 | ⭐⭐ |
| CommonJS规范 | Node.js实现的社区模块标准： - module.exports导出; - require导入; - 模块缓存机制 | 路径必须以./或../开头 | ⭐⭐⭐ |
| 全局污染问题 | 传统JS多文件开发存在的： 1. 全局变量命名冲突; 2. 复杂依赖关系管理 | 模块作用域隔离原理 | ⭐⭐ |
| 模块导出实践 | 导出对象包含工具函数： javascript; module.exports = {; isOdd,; sum; }; | 单一导出 vs 多属性导出 | ⭐⭐ |
| 模块导入实践 | 通过路径引用模块： javascript; const math = require('./math'); | 缓存机制导致的单例模式 | ⭐⭐⭐ |
| 工程化基础 | 模块化是学习框架的前提条件，重点掌握： 1. 模块化标准; 2. 包管理器 | 开发环境(Node)与生产环境的差异 | ⭐⭐⭐⭐ |
| 综合案例 | 多模块协作实现动态打印效果： - config模块（配置）; - delay模块（异步控制）; - print模块（功能实现） | 模块职责划分原则 | ⭐⭐⭐ |
| 知识点 | 核心内容 | 考试重点/易混淆点 | 难度系数 |
|---|---|---|---|
| 模块化概念 | 将复杂系统分解为小模块，提高代码复用性和工程可控性 | 模块化 vs 非模块化的区别 | ⭐⭐ |
| CommonJS规范 | Node.js环境支持的社区模块化标准，使用module.exports和require | 动态依赖特性，可在代码块中导入导出 | ⭐⭐ |
| ES Module规范 | 官方模块化标准，随ES6发布，使用export和import语法 | 静态依赖要求顶级代码，默认导出与具名导出的区别 | ⭐⭐⭐⭐ |
| 导出方式对比 | 具名导出(多)、默认导出(单)，支持export default和export {x as y} | 默认导出必须用default关键字，具名导出绑定不可修改 | ⭐⭐⭐ |
| 导入方式对比 | 支持具名导入、默认导入、混合导入和动态import()函数 | 动态导入返回Promise，需配合async/await使用 | ⭐⭐⭐ |
| 模块化实战 | 登录功能案例展示模块划分：API模块、DOM模块、业务逻辑模块 | 模块间依赖关系管理，防止全局污染的实现 | ⭐⭐⭐⭐ |
| 浏览器支持 | 需添加type="module"属性，2015年后主流浏览器兼容 | 必须写完整文件后缀.js，与CommonJS不同 | ⭐⭐ |
| 开发优势 | 代码组织更清晰，复用性提升，维护成本降低 | 需要合理规划模块边界和依赖关系 | ⭐⭐⭐ |
四、总结
模块化是前端工程化的基石，理解ESM和CommonJS的本质差异能帮助我们在不同场景做出合理选择。ESM是未来，CommonJS是过去，掌握静态动态导入之别，方能在模块化浪潮中游刃有余。随着ECMAScript标准的演进，动态导入等新特性正在改变我们的代码组织方式。
"模块化不是选择而是必然，理解其本质方能写出可持续演进的代码"