JS 模块化规范指南：纵览 CommonJS、AMD、CMD、UMD 和 ES6 模块

在现代 Web 开发中，模块化已成为一种必不可少的模式，它将复杂的应用程序分解为更小的、独立的组件。这种方法提高了代码的可维护性、可重用性和可测试性。本文将全面探讨 JavaScript 中广泛采用的五种主要模块化规范：CommonJS、AMD、CMD、UMD 和 ES6 模块。

CommonJS

CommonJS 是一个用于 Node.js 环境的服务器端模块化规范。它使用 require() 和 module.exports 机制来加载和导出模块。CommonJS 模块是独立的文件，每个文件都代表一个模块。

// module.js
exports.greet = function() {
  console.log('Hello from module');
};

// main.js
var module = require('./module.js');
module.greet();

AMD (Asynchronous Module Definition)

AMD 是一种异步模块化规范，适用于需要异步加载模块的浏览器环境。它使用 define() 函数来定义模块，并通过回调或 Promise 返回模块的依赖项。

// module.js
define(['jquery'], function($) {
  return {
    greet: function() {
      console.log('Hello from module');
    }
  };
});

// main.js
require(['module'], function(module) {
  module.greet();
});

CMD (Common Module Definition)

CMD 是一个类似于 AMD 的异步模块化规范，但它更适合于 Sea.js 等中国 JavaScript 框架。CMD 使用 define() 函数来定义模块，并通过回调来返回模块的依赖项。

// module.js
define('module', ['jquery'], function($) {
  return {
    greet: function() {
      console.log('Hello from module');
    }
  };
});

// main.js
define('main', ['module'], function(module) {
  module.greet();
});

UMD (Universal Module Definition)

UMD 是一个通用模块化规范，它允许在不同的环境中使用模块，包括 CommonJS、AMD、CMD 和浏览器全局环境。UMD 使用立即调用函数表达式 (IIFE) 来包装模块定义。

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // 全局
    root.module = factory(root.jQuery);
  }
})(this, function($) {
  return {
    greet: function() {
      console.log('Hello from module');
    }
  };
});

ES6 模块

ES6 模块是 JavaScript 的原生模块化规范，它允许使用 export 和 import 来定义和导入模块。ES6 模块是静态加载的，并且具有块级作用域。

// module.js
export default {
  greet: function() {
    console.log('Hello from module');
  }
};

// main.js
import module from './module.js';
module.greet();

比较

特性	CommonJS	AMD	CMD	UMD	ES6 模块
环境	服务器端	浏览器	浏览器	通用	浏览器
同步/异步	同步	异步	异步	通用	静态
作用域	模块级	模块级	模块级	通用	块级
依赖项注入	要求	回调	回调	可选	可选
跨环境	否	是	是	是	是
原生支持	否	否	否	否	是

结论

选择最佳的模块化规范取决于应用程序的特定需求和环境。对于 Node.js 服务器端应用程序，CommonJS 是一个不错的选择。对于需要异步加载模块的浏览器环境，AMD、CMD 或 UMD 可能更合适。对于现代浏览器应用程序，ES6 模块提供了简洁性和原生支持的优势。通过了解这些模块化规范，开发人员可以构建可维护性、可重用性和可测试性更高的 JavaScript 应用程序。