JavaScript模块化是一种代码组织方式，它将大型的JavaScript程序拆分成多个独立的小文件，每个文件就是一个模块，模块内部可以封装自己的变量、函数和逻辑，只对外暴露需要被其他模块使用的部分，从而实现代码的隔离与复用。
为什么需要JavaScript模块化
在早期的JavaScript开发中，所有代码都写在一个或多个全局脚本文件里，很容易出现全局变量冲突、代码依赖关系混乱、可维护性差等问题。模块化的出现就是为了解决这些痛点，它的核心优势包括：
- 避免全局作用域污染，每个模块有独立的作用域
- 明确模块之间的依赖关系，提升代码的可读性
- 支持代码复用，减少重复开发工作
- 便于团队协作，不同开发者可以并行开发不同模块
常见的JavaScript模块化规范
1. CommonJS规范
CommonJS是Node.js默认的模块化规范，主要用于服务器端JavaScript开发，它的特点是同步加载模块，适合运行在本地文件系统的环境。
CommonJS使用require函数导入模块，使用module.exports或者exports导出模块内容：
// math.js 导出模块
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
// 导出两个函数
module.exports = {
add,
subtract
};
// main.js 导入模块
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出3
console.log(math.subtract(5, 3)); // 输出2
2. AMD规范
AMD（Asynchronous Module Definition）是异步模块定义规范，主要用于浏览器端的模块化开发，它的特点是异步加载模块，不会阻塞页面渲染。
AMD使用define函数定义模块，使用require函数加载模块，常见的实现库是RequireJS：
// 定义模块，依赖jquery
define(['jquery'], function($) {
// 模块内部逻辑
function init() {
$('#app').text('AMD模块加载完成');
}
// 导出init方法
return {
init
};
});
// 加载模块
require(['myModule'], function(myModule) {
myModule.init();
});
3. ES Module规范
ES Module是ECMAScript官方推出的模块化规范，目前已经被现代浏览器和Node.js新版本支持，是未来JavaScript模块化的主流标准。
ES Module使用import关键字导入模块，使用export关键字导出模块内容，支持静态分析，还可以实现按需加载：
// utils.js 导出模块
export const PI = 3.1415926;
export function multiply(x, y) {
return x * y;
}
// 默认导出
export default function greet(name) {
return `Hello ${name}`;
}
// app.js 导入模块
import greet, { PI, multiply } from './utils.js';
console.log(PI); // 输出3.1415926
console.log(multiply(2, 3)); // 输出6
console.log(greet('张三')); // 输出Hello 张三
不同模块化规范的对比
我们可以通过下面的表格直观了解不同规范的特点：
| 规范名称 | 运行环境 | 加载方式 | 导出关键字 | 导入关键字 |
|---|---|---|---|---|
| CommonJS | Node.js、服务器端 | 同步加载 | module.exports、exports | require |
| AMD | 浏览器端 | 异步加载 | return返回值 | define、require |
| ES Module | 现代浏览器、Node.js新版本 | 静态/动态加载 | export | import |
模块化的最佳实践
在实际开发中，建议优先使用ES Module规范，因为它是官方标准，兼容性也在不断提升。如果项目需要兼容旧环境，可以通过打包工具如Webpack、Vite将ES Module代码转换为兼容旧环境的代码。同时，模块拆分要遵循单一职责原则，每个模块只负责一个独立的功能，避免模块过于庞大复杂。
注意：在HTML中使用ES Module时，需要将<script>标签的type属性设置为module，否则浏览器无法识别模块化语法。<!-- 正确引入ES Module的方式 --> <script type="module" src="./app.js"></script>
JavaScript模块化CommonJSES_moduleAMD修改时间：2026-07-20 18:48:21