js 模块化：ESM ,CJS, AMD, UMD

JavaScript 模块化有多种规范，包括 CommonJS (CJS)、ES Modules (ESM)、AMD、UMD 等。

1. CommonJS (CJS)：同步加载模块，通常在服务器端使用，如 Node.js。

// math.js
exports.add = function(a, b) {
    return a + b;
};
 
// 使用模块
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出: 3

2. ES Modules (ESM)：异步加载模块，是现代浏览器和服务器端的主要模块解决方案。

// math.js
export function add(a, b) {
    return a + b;
}
 
// 使用模块
import { add } from './math.js';
console.log(add(1, 2)); // 输出: 3

3. AMD (Asynchronous Module Definition)：异步模块定义，主要用于浏览器环境，如 RequireJS。

// math.js
define(function() {
    return {
        add: function(a, b) {
            return a + b;
        }
    };
});
 
// 使用模块
require(['./math'], function(math) {
    console.log(math.add(1, 2)); // 输出: 3
});

4. UMD (Universal Module Definition)：兼容 CommonJS 和 AMD 的模块定义，可以同时在这两个环境中工作。

(function(factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量
        window.myModule = factory(window.jQuery);
    }
}(function($) {
    // 模块代码
    function myFunc() {
        // ...
    }
 
    return myFunc;
}));

在现代前端开发中，通常使用 ES Modules，因为它是官方标准，并且是异步加载的，非常适合现代浏览器和服务器端。