浏览器端模块化难题

1.浏览器中使用 CommonJS 的挑战

1. 同步加载：CommonJS 使用同步的方式加载模块，而浏览器中的网络请求是异步的。这意味着你不能简单地将 CommonJS 模块代码放到浏览器环境中执行，否则会导致页面阻塞。

2. 缺少 require 和 module.exports 支持：浏览器没有内置对 require 和 module.exports 的支持，因此无法直接解析和执行 CommonJS 模块。

3. 跨域问题：如果尝试从不同域名加载模块，可能会遇到跨域资源共享 (CORS) 问题。

4. 性能考虑：直接加载多个单独的 JavaScript 文件会增加 HTTP 请求次数，影响页面加载速度。

2.新的规范（ES Module 出现前）

在 ES Module 规范广泛支持之前，开发者们为了解决 CommonJS 在浏览器环境中的问题，引入了多种模块化规范和解决方案。这些方案旨在提供一种方式来组织 JavaScript 代码，并确保其能够在浏览器中正确加载和执行。

2.1.AMD (Asynchronous Module Definition)

背景：[AMD] 是由 RequireJS 提出的一种异步模块定义格式，它特别适合浏览器端使用。AMD 允许按需加载模块，解决了 CommonJS 同步加载带来的性能问题。

特点：

• 异步加载依赖项。
• 支持匿名定义模块。
• 更加灵活地处理模块之间的依赖关系。

示例：

// 定义一个 AMD 模块
define(["dependency1", "dependency2"], function (dep1, dep2) {
  return {
    someMethod: function () {
      /* ... */
    },
  };
});

// 使用 AMD 加载模块
require(["module1", "module2"], function (mod1, mod2) {
  // 使用 mod1 和 mod2
});

2.2.UMD (Universal Module Definition)

背景：UMD 是为了兼容多种模块系统而设计的一种封装模式，包括 CommonJS、AMD 和全局变量（即非模块化的脚本）。UMD 的目标是编写一次代码，可以在任何环境中使用。

特点：

• 可以被 RequireJS 或其他 AMD 加载器加载。
• 可以作为 Node.js 中的 CommonJS 模块使用。
• 如果没有模块加载器，则会暴露为全局变量。

示例：

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD
    define(["dependency"], factory);
  } else if (typeof module === "object" && module.exports) {
    // Node.js/CommonJS
    module.exports = factory(require("dependency"));
  } else {
    // Browser globals
    root.returnExports = factory(root.dependency);
  }
})(this, function (dependency) {
  // 模块实现
});

2.3.CMD (Common Module Definition)

背景：[CMD] 是 SeaJS 提出的一种模块定义规范，它强调按需加载、惰性执行，即只在需要的时候才去加载和执行模块。这种模式有助于优化资源加载顺序，减少不必要的请求，从而提升页面性能。

特点：

• 按需加载依赖。
• 惰性执行模块代码。
• 更符合直觉的 API 设计。

示例：

// 定义一个 CMD 模块
define(function (require, exports, module) {
  var dep = require("./dependency");
  exports.someMethod = function () {
    /* ... */
  };
});

// 使用 CMD 加载模块
seajs.use(["module1", "module2"], function (mod1, mod2) {
  // 使用 mod1 和 mod2
});

3.ES Module 出现

随着 ES Modules (ESM) 规范的出现，JavaScript 社区迎来了一个标准化的模块系统，它不仅解决了 CommonJS 在浏览器环境中遇到的问题，还提供了一种统一的方式来进行模块化开发。ES Modules 是 ECMAScript 标准的一部分，得到了所有主流浏览器的支持，从而为前端开发者提供了更加简便和高效的模块管理方式。

3.1. ES Module 特点

• 使用依赖预声明的方式导入模块
  • 依赖延迟声明（CommonJS）
    • 优点：某些时候可以提高效率
    • 缺点：无法在一开始确定模块的依赖关系
  • 依赖预声明（ES Module）
    • 优点：可以提前知道模块的依赖关系
    • 缺点：某些时候效率低下
• 灵活的多种导入导出方式
• 规范的路径表示法：所有路径必须以./ 或 ../ 开头
• 模块的加载是异步的，但模块的解析是同步的