JavaScript中的模块化

以下是关于 JavaScript 模块化 的系统梳理，涵盖核心概念、演进历程、现代方案及实际开发中的关键注意事项，帮助我们深入理解模块化设计模式及其底层原理：

---

一、模块化演进历史

1. 无模块化时代（全局污染）

• 问题：变量/函数直接挂载到 window，导致命名冲突。
• 解决方式：通过 IIFE（立即执行函数） 隔离作用域。

  // math.js
  (function (global) {
       
    function add(a, b) {
        return a + b; }
    global.math = {
        add };
  })(window);
  
  // 使用
  window.math.add(1, 2);
  

2. CommonJS（Node.js 模块化标准）

• 特点：同步加载，适用于服务端。
• 语法：

  // math.js
  exports.add = (a, b) => a + b;
  // 或
  module.exports = {
        add: (a, b) => a + b };
  
  // 使用
  const math = require('./math.js');
  

3. AMD（异步模块定义）

• 特点：异步加载，适用于浏览器（Require.js）。
• 语法：

  define(['dep1', 'dep2'], function (dep1, dep2) {
       
    return {
        add: