JavaScript 模块

JavaScript 模块是用于把程序代码分离为逻辑上相互独立的单元的一种机制。通过模块化，程序员将代码分割成一些独立的和可复用的部分，使得代码更加容易维护、扩展和测试。

CommonJS 模块

CommonJS 是 Node.js 中使用的模块方案。通过 require 函数来导入模块，通过 module.exports 对象来导出模块。

示例：

// 导入模块
const math = require('./math.js');

// 使用导入的模块
console.log(math.add(1, 2)); // 输出: 3

// 导出模块
exports.add = function(a, b) {
    return a + b;
};

ES6 模块

ES6 模块是 ECMAScript 6 标准中引入的模块方案。与 CommonJS 不同，ES6 模块是通过 import 和 export 关键字实现的。

示例：

// 导入模块
import { add } from './math.js';

// 使用导入的模块
console.log(add(1, 2)); // 输出: 3

// 导出模块
export function add(a, b) {
    return a + b;
}

需要注意的是，ES6 模块的导入和导出是静态的，这就意味着在编译时，模块的依赖关系就已经确定。这个特性使得编译器可以对模块进行静态分析和优化，从而提高代码执行效率。

AMD 模块

AMD（Asynchronous Module Definition）是一种异步加载模块的方案，它的设计目标是在浏览器环境下实现模块化。与 CommonJS 和 ES6 模块不同，AMD 模块不是通过代码的静态分析来确定模块之间的依赖关系，而是在运行时动态加载模块，从而实现异步加载。

示例：

// 定义模块
define(['./math.js'], function(math) {
    console.log(math.add(1, 2)); // 输出: 3
});

// 加载模块
require(['./math.js'], function(math) {
    console.log(math.add(1, 2)); // 输出: 3
});

// 导出模块
define(function() {
    return {
        add: function(a, b) {
            return a + b;
        }
    };
});

UMD 模块

UMD（Universal Module Definition）模块是一种兼容多种模块系统的方案。UMD 模块首先检测是否支持 AMD，如果支持则采用 AMD 方式加载，否则检测是否支持 CommonJS，如果支持则采用 CommonJS 方式加载，否则直接将模块导出到全局对象上。

示例：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['./math.js'], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory(require('./math.js'));
    } else {
        root.returnExports = factory(root.math);
    }
}(typeof self !== 'undefined' ? self : this, function (math) {
    console.log(math.add(1, 2)); // 输出: 3
    
    return {
        add: math.add
    };
}));

总结

JavaScript 模块化是提高程序可维护性、可扩展性和可测试性的重要手段。通过了解 CommonJS、ES6、AMD 和 UMD 等多种模块化方案，程序员可以根据项目需求选择适合自己的模块化方案。