模块化(Modularization)是一种软件工程实践,旨在将大型、复杂的系统分割成一系列松散耦合、功能独立且具有明确定义接口的模块。每个模块都专注于完成一个特定的任务,并且可以单独编写、测试和维护,然后通过指定的方式与其他模块连接,共同组成整个应用程序。模块化有助于提高代码的可读性、可维护性、可复用性和可扩展性,减少命名冲突,避免全局变量污染,并能更好地管理代码间的依赖关系。
在JavaScript中,模块化经历了多个发展阶段,形成了不同的模块化规范和实现方式:
CommonJS
- CommonJS是一种广泛应用于服务器端JavaScript(如Node.js)的模块化规范。它允许通过
require()
函数导入模块,模块自身则通过module.exports
或exports
来导出公共接口。 示例:
// 导出模块 module.exports = function add(a, b) { return a + b; }; // 导入模块 var addModule = require('./add'); console.log(addModule(2, 3)); // 输出 5
- CommonJS是一种广泛应用于服务器端JavaScript(如Node.js)的模块化规范。它允许通过
AMD (Asynchronous Module Definition)
- AMD主要由RequireJS推广,适用于浏览器环境,它支持异步加载模块,使用
define()
定义模块,require()
加载模块。 示例:
// 定义AMD模块 define('add', function() { return function add(a, b) { return a + b; }; }); // 异步加载并使用模块 require(['add'], function(add) { console.log(add(2, 3)); // 输出 5 });
- AMD主要由RequireJS推广,适用于浏览器环境,它支持异步加载模块,使用
ES6 Modules (ECMAScript 2015)
- ES6模块是JavaScript官方标准的一部分,现在大部分现代浏览器及Node.js(从v14开始默认支持,v12及以上版本可通过设置启用)均支持。
- 使用
import
关键字导入模块,export
关键字导出模块成员。 示例:
// 导出模块 // add.js 文件 export default function add(a, b) { return a + b; } // 导入模块 // main.js 文件 import add from './add'; console.log(add(2, 3)); // 输出 5
除了以上标准,早期JavaScript中还存在一些非正式的模块化模式,如通过闭包、IIFE(Immediately Invoked Function Expression,立即执行函数表达式)等方式模拟模块隔离效果。随着工具的发展,诸如Webpack、Rollup等打包工具也提供了模块化解决方案,它们不仅支持ES6模块,还能处理老版本浏览器不兼容的问题,通过转译和打包将模块化代码转换为可在任何环境下运行的代码。