在 ES6 之前，JavaScript 社区主要使用两种模块加载方案：CommonJS 和 AMD。它们分别针对服务器端和浏览器端的模块化需求。以下是对这两种方案的详细总结，包括它们的语法和用法。

1. CommonJS

CommonJS 规范主要用于服务器端，Node.js 是其主要的实现者。CommonJS 模块通过require和module.exports进行加载和导出。

语法

1. 导出模块：使用module.exports或exports。
2. 导入模块：使用require。

用法

定义模块

// math.js
// 定义一个包含加法和减法函数的模块

// 定义加法函数
const add = (a, b) => a + b;

// 定义减法函数
const subtract = (a, b) => a - b;

// 使用 module.exports 导出模块
module.exports = {
  add,
  subtract
};

使用模块

// main.js
// 通过 require 引入 math 模块

// 引入 math 模块
const math = require('./math');

// 调用 math 模块中的 add 函数
console.log(math.add(2, 3)); // 输出 5

// 调用 math 模块中的 subtract 函数
console.log(math.subtract(5, 3)); // 输出 2

在上面的示例中，math.js 文件定义了一个模块，通过module.exports导出了两个函数add和subtract。在main.js文件中，使用require引入这个模块并调用其方法。

2. AMD

AMD（Asynchronous Module Definition）主要用于浏览器端，它通过异步加载模块，解决了在浏览器环境中模块加载的效率问题。RequireJS 是 AMD 的主要实现者。

语法

1. 定义模块：使用define函数。
2. 导入模块：使用require函数。

用法

定义模块

// math.js
// 使用 define 函数定义一个模块

define(function() {
  // 返回一个包含 add 和 subtract 方法的对象
  return {
    // 定义加法函数
    add: function(a, b) {
      return a + b;
    },
    // 定义减法函数
    subtract: function(a, b) {
      return a - b;
    }
  };
});

使用模块

// main.js
// 使用 require 函数引入并使用 math 模块

// 使用 require 函数异步加载 math 模块
require(['math'], function(math) {
  // 调用 math 模块中的 add 函数
  console.log(math.add(2, 3)); // 输出 5

  // 调用 math 模块中的 subtract 函数
  console.log(math.subtract(5, 3)); // 输出 2
});

在上面的示例中，math.js 文件使用 define 函数定义了一个模块，并返回一个包含add和subtract方法的对象。在 main.js 文件中，使用 require 函数异步加载 math 模块，并在回调函数中调用其方法。

3. CommonJS 和 AMD 的对比

1. 同步与异步：

   • CommonJS：同步加载模块，适合服务器端的模块加载。
   • AMD：异步加载模块，适合浏览器端的模块加载。

2. 加载机制：

   • CommonJS：模块在加载时立即执行。
   • AMD：模块在加载时不会立即执行，而是加载完成后再执行回调。

3. 兼容性：

   • CommonJS：主要用于 Node.js 环境。
   • AMD：主要用于浏览器环境，RequireJS 是其主要实现。

4. 导出方式：

   • CommonJS：使用 module.exports 或 exports 导出模块。
   • AMD：使用 define 函数定义和导出模块。

5. 引入方式：

   • CommonJS：使用 require 函数同步引入模块。
   • AMD：使用 require 函数异步引入模块。

总结

在 ES6 之前，JavaScript 的模块化主要依赖于 CommonJS 和 AMD 两种方案。CommonJS 适用于服务器端，提供了简单直观的模块化方式；AMD 适用于浏览器端，通过异步加载提高了性能。ES6 的模块化方案结合了两者的优点，提供了统一的模块化标准，解决了之前存在的各种问题。