JavaScript 模块化 (Modularization)

随着前端应用日益复杂，代码组织和管理变得至关重要。模块化开发能将代码分割成独立的、可复用的单元。

主要模块化规范

1. CommonJS (CJS)

• 环境: 主要用于 Node.js 服务器端。
• 特点: 同步加载。
• 语法: module.exports, require().
• 加载机制: 运行时加载，拷贝值（基本类型）或引用值（对象）。

2. ES Modules (ESM)

• 环境: 现代浏览器和 Node.js (新版)。
• 特点: 静态分析，支持 Tree Shaking (摇树优化)。
• 语法: export, import.
• 加载机制: 编译时输出接口，引用依然指向原来的值（动态绑定）。

3. AMD (Asynchronous Module Definition)

• 环境: 浏览器端（旧）。
• 代表: RequireJS。
• 特点: 异步加载，前置依赖。
• 语法: define, require.

4. UMD (Universal Module Definition)

• 环境: 跨平台（兼容 CommonJS, AMD 和 全局变量）。
• 特点: 一段包装代码，先判断环境再导出。

目录说明

以下为各类模块化规范的代码示例。

代码示例

1. CommonJS (Node.js)

math.js (导出)

const PI = 3.14;

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

// 导出对象
module.exports = {
  add,
  sub,
  PI
};
// 也可以单独导出: exports.add = add;

index.js (导入)

const math = require('./math');

console.log('PI:', math.PI); // 3.14
console.log('Add:', math.add(1, 2)); // 3

2. ES Modules (Modern JS)

math.js (导出)

export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

// 默认导出
export default function multiply(a, b) {
  return a * b;
}

index.js (导入)

import multiply, { add, PI } from './math.js';

console.log('PI:', PI);
console.log('Add:', add(5, 3));
console.log('Multiply:', multiply(2, 4));

3. UMD (Universal Module Definition)

UMD 旨在兼容 AMD、CommonJS 和 浏览器全局变量。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // 1. AMD 环境
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // 2. CommonJS 环境 (Node.js)
        module.exports = factory(require('jquery'));
    } else {
        // 3. 浏览器全局变量 (root is window)
        root.MyCustomModule = factory(root.jQuery);
    }
}(typeof self !== 'undefined' ? self : this, function ($) {
    // 模块核心代码在这里
    function sayHello() {
        console.log('Hello from UMD module!');
    }
    return {
        sayHello: sayHello
    };
}));