外观
模块化
模块化是将复杂程序拆分为独立、可复用模块的软件开发方法。在前端领域，模块化经历了从简单脚本到标准化模块系统的演进过程，是现代前端工程化的基石。
什么是模块化？
模块化是一种代码组织方式，它允许开发者将大型程序分解为相互独立的小型模块，每个模块专注于单一功能，通过明确的接口进行通信。
非模块化代码:
[一个巨大的JS文件]
├── 功能A代码
├── 功能B代码
├── 功能C代码
└── 全局变量污染
模块化代码:
[模块A] -> [导出接口] -> [模块B] -> [导出接口] -> [模块C]
| | | | |
独立开发 明确依赖 独立测试 明确依赖 独立维护模块化演进历程
全局函数时代
最早的前端代码采用简单的函数组织方式。
// 全局命名空间污染
function util1() { ... }
function util2() { ... }
function main() { ... }
问题示意图:
[script1.js] -> [全局变量A]
[script2.js] -> [全局变量A] // 冲突!
[script3.js] -> [使用变量A] // 不确定来自哪个文件命名空间模式
通过对象封装减少全局变量。
// 创建命名空间
var MyApp = {
utils: {
function1: function() { ... },
function2: function() { ... }
},
components: {
// ...
}
};
结构示意图:
[全局作用域]
|
+-- MyApp
|
+-- utils
| +-- function1
| +-- function2
|
+-- componentsIIFE 模式
使用立即执行函数表达式创建私有作用域。
// 模块模式
var Module = (function() {
var privateVar = 'private'; // 私有变量
function privateFunction() {
// 私有方法
}
return {
publicMethod: function() {
// 公开接口
}
};
})();
作用域示意图:
[IIFE] -> [创建闭包] -> [私有变量] -> [返回公共接口]
| | | |
隔离作用域 数据封装 信息隐藏 明确API主流模块化规范
CommonJS
Node.js 采用的同步模块加载规范。
// 模块定义
// math.js
exports.add = function(a, b) {
return a + b;
};
// 模块使用
// main.js
var math = require('./math.js');
math.add(1, 2);
加载流程:
[require调用] -> [同步加载文件] -> [执行模块代码] -> [返回exports对象]
| | | |
阻塞执行 读取文件 初始化模块 获得模块接口AMD (Asynchronous Module Definition)
浏览器端的异步模块定义规范。
// AMD 模块定义
define(['dependency1', 'dependency2'], function(dep1, dep2) {
return {
exportFunction: function() {
// 使用 dep1, dep2
}
};
});
// AMD 模块使用
require(['moduleA', 'moduleB'], function(moduleA, moduleB) {
// 回调中使用模块
});
异步加载示意图:
[require调用] -> [分析依赖] -> [并行下载依赖] -> [所有依赖就绪] -> [执行回调]
| | | | |
非阻塞 解析模块列表 同时下载多个文件 等待完成 初始化应用ES6 Modules
JavaScript 语言层面的模块标准。
// 模块导出
// utils.js
export function formatDate(date) { ... }
export const API_URL = '...';
export default class Utils { ... }
// 模块导入
// main.js
import Utils, { formatDate, API_URL } from './utils.js';
编译时加载示意图:
[import语句] -> [编译时分析] -> [构建依赖图] -> [静态检查] -> [运行时报错预防]
| | | | |
声明式导入 提前解析 优化打包 类型检查 更少运行时错误模块化的核心概念
导出与导入
模块通过导出暴露接口，通过导入使用其他模块。
导出方式:
命名导出: export function foo() {}
默认导出: export default class Bar {}
混合导出: export { foo, bar }; export default baz;
导入方式:
// 命名导入
import { foo, bar } from './module.js';
// 默认导入
import Baz from './module.js';
// 混合导入
import Baz, { foo, bar } from './module.js';
// 命名空间导入
import * as Module from './module.js';依赖关系
模块之间形成清晰的依赖图谱。
依赖图谱示例:
[主模块]
|
+-- import --> [工具模块]
| |
| +-- import --> [工具模块]
|
+-- import --> [UI组件模块]
|
+-- import --> [样式模块]
|
+-- import --> [工具模块]循环依赖
模块之间相互引用形成的复杂关系。
循环依赖示例:
[模块A] <-- import --> [模块B]
| |
+-- import --> [模块C] <-- import --+
处理方式:
- CommonJS: 动态解析，可能得到未完全初始化的模块
- ES6: 静态分析，创建绑定引用，支持循环依赖模块化的优势
代码组织
模块化使代码结构清晰，易于理解和维护。
非模块化 vs 模块化:
非模块化: [一个巨大文件] -> 难以定位 -> 修改风险高
模块化: [模块A] [模块B] [模块C] -> 明确职责 -> 安全修改
| | |
独立文件 独立功能 独立测试依赖管理
明确的依赖声明避免隐式依赖问题。
隐式依赖 vs 显式依赖:
隐式依赖: [模块使用全局变量] -> 依赖不明确 -> 运行时错误
显式依赖: [import { dep } from '...'] -> 依赖明确 -> 编译时检查作用域隔离
每个模块拥有独立作用域，避免命名冲突。
作用域对比:
全局作用域: [所有变量都在全局] -> 命名冲突 -> 意外覆盖
模块作用域: [每个模块独立作用域] -> 无冲突 -> 安全封装
| | |
模块A变量 模块B变量 互不影响可测试性
独立的模块更容易进行单元测试。
测试示意图:
[测试框架] -> [导入被测模块] -> [模拟依赖] -> [执行测试] -> [验证结果]
| | | | |
快速运行 隔离测试 控制环境 专注功能 可靠断言团队协作
模块化支持多人并行开发。
团队开发流程:
开发者A -> [开发模块X] -> [定义接口] -> [提交]
开发者B -> [开发模块Y] -> [依赖模块X接口] -> [并行开发]
| | | |
独立工作 明确契约 无需等待 高效协作现代模块系统实践
模块打包
使用构建工具将模块打包为浏览器可执行文件。
打包流程:
[ES6模块] -> [打包工具] -> [分析依赖] -> [合并代码] -> [优化输出] -> [浏览器脚本]
| | | | | |
源代码 webpack 构建依赖图 代码合并 压缩优化 可直接运行代码分割
按需加载模块，优化首屏加载性能。
代码分割效果:
初始加载: [主包] + [必要模块] -> 快速首屏
动态加载: [用户交互] -> [按需加载模块] -> 优化体验
| | |
较小初始包 延迟加载 减少带宽Tree Shaking
消除未使用的代码，减少打包体积。
Tree Shaking 过程:
[源代码] -> [静态分析] -> [标记使用代码] -> [移除死代码] -> [优化包]
| | | | |
所有导出 识别import 确定使用部分 删除未使用 更小体积