JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6
2026-03-09 16:17:37
JavaScript模块化：CommonJS、AMD、CMD、UMD、ES6
JavaScript模块化是解决JS早期使用script标签引入JS所带来的问题的一种有效方式。模块化开发可以避免加载阻塞、全局变量污染、依赖关系复杂以及代码不易管理等问题。以下是JavaScript模块化的几种主要规范：CommonJS、AMD、CMD、UMD以及ES6模块。
一、CommonJS规范
CommonJS是一种服务器端规范，Node.js推广使用。其核心是允许模块使用require方法来同步加载所依赖的其他模块，并通过exports或module.exports导出需要暴露的接口。
特点：
一个模块是一个文件。
使用module.exports或exports导出模块。
使用require加载模块，且加载是同步的。
为什么不适合浏览器：CommonJS规范是同步加载模块，这在服务器端从本地硬盘加载时速度很快，但在浏览器端需要请求服务器，涉及网速和代理问题，可能导致浏览器“假死”。
二、AMD规范
AMD（Asynchronous Module Definition）是异步模块定义，客户端规范。它采用异步方式加载模块，模块加载不影响后续语句的执行。AMD是require.js在推广使用过程中对模块定义规范化的产物。
- 特点：
使用define()定义模块，可以指定模块名称、依赖和工场函数。
使用require()加载模块，并指定回调函数。
依赖前置，即在定义模块时就声明依赖。
三、CMD规范
CMD（Common Module Definition）是通用模块定义，异步加载模块。CMD是sea.js在推广过程中对模块定义的规范化产物。
- 特点：
使用define()定义模块，使用require()加载模块。
CMD推崇就近依赖，即需要用到某个模块时才进行require加载。
使用seajs.use()加载使用模块。
四、UMD规范
UMD（Universal Module Definition）是通用模块定义，旨在兼容AMD、CMD和无模块化开发规范。
- 特点：
使用一个自执行的函数来判断当前环境，并根据环境选择相应的模块定义方式。
可以同时支持AMD、CommonJS和浏览器全局变量三种方式。
五、ES6模块
ES6通过import和export实现模块的输入与输出。import命令用于输入其他模块提供的功能，export命令用于规定模块对外的接口。
- 特点：
使用export导出模块，可以导出变量、函数、类等。
使用import导入模块，可以导入默认模块、指定模块或全部模块。
支持模块的静态分析和优化，如树摇（tree shaking）等。
模块的加载是异步的，但可以通过async/await等语法实现同步效果（在浏览器环境中，模块的加载实际上是由HTML中的<script type="module">标签控制的，它们默认是异步加载的）。
总结：
JavaScript模块化是解决JS早期问题的重要手段。CommonJS、AMD、CMD、UMD和ES6模块是几种主要的模块化规范。它们各有特点，适用于不同的环境和场景。在实际开发中，应根据项目需求选择合适的模块化规范。随着ES6的普及，越来越多的项目开始采用ES6模块规范，因为它提供了更简洁、更强大的模块定义和加载方式。
热门标签
