JavaScript模块化将复杂软件分解为独立模块，提高代码可读、维护、复用和扩展性。

模块化（Modularization）是一种软件工程实践，旨在将大型、复杂的系统分割成一系列松散耦合、功能独立且具有明确定义接口的模块。每个模块都专注于完成一个特定的任务，并且可以单独编写、测试和维护，然后通过指定的方式与其他模块连接，共同组成整个应用程序。模块化有助于提高代码的可读性、可维护性、可复用性和可扩展性，减少命名冲突，避免全局变量污染，并能更好地管理代码间的依赖关系。

在JavaScript中，模块化经历了多个发展阶段，形成了不同的模块化规范和实现方式：

1. 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
     

2. 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
     });
     

3. 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模块，还能处理老版本浏览器不兼容的问题，通过转译和打包将模块化代码转换为可在任何环境下运行的代码。