JS模块化梳理

1. 模块化特性
   组织代码：将代码分成更小的部分，便于管理和理解。
   减少命名冲突：每个模块有自己的作用域，减少全局变量的使用。
   提高可重用性：模块可以被多个项目或文件重用。
   便于测试：模块化代码更易于进行单元测试。

2. CommonJS
   特点：最初用于 Node.js，采用同步加载模块。
   导出和导入：
   使用 module.exports 导出模块。
   使用 require 导入模块。

// math.js
const add = (a, b) => a + b;
module.exports = { add };

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 输出: 5

3. AMD（Asynchronous Module Definition）
   特点：用于浏览器环境，支持异步加载模块。
   导出和导入：
   使用 define 定义模块。
   使用 require 加载模块。

// math.js
define([], function() {
    const add = (a, b) => a + b;
    return { add };
});

// app.js
require(['math'], function(math) {
    console.log(math.add(2, 3)); // 输出: 5
});

4. ES6 模块（ESM）
   特点：现代 JavaScript 标准，支持静态分析，支持异步加载。
   导出和导入：
   使用 export 导出模块。
   使用 import 导入模块。

// math.js
export const add = (a, b) => a + b;

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5

5. 模块化的打包工具
   在使用模块化时，通常需要打包工具来处理模块的依赖关系和代码的优化。

Webpack：一个强大的打包工具，支持各种模块化方案和插件。
Rollup：专注于 ES6 模块的打包，适用于库的构建。
Parcel：零配置的打包工具，支持多种模块化方案。

6. 模块化的最佳实践
   保持单一职责：每个模块只负责特定的功能。
   命名规范：使用一致的命名规则，方便识别模块功能。
   避免全局变量：尽量将变量和函数封装在模块内部，减少对全局作用域的影响。
   使用 ES6 模块：尽可能使用现代的 ES6 模块，享受更好的静态分析和优化。