返回

JS 模块化大全，让你秒懂 AMD、CMD、UMD、Cjs、ES Module

前端

好的，请看我的创作：

前言

JavaScript 模块化开发是一种将代码组织成独立模块的方法，每个模块都包含自己的函数、变量和类。这可以使代码更容易理解、维护和重用。JavaScript 模块化开发有较长的历史，早起流行的命名空间 的开发思想，到后来有了一些模块化的开发规范，最先是CommonJS（主要使用在NodeJS 不是和浏览器），后来AMD、CMD、UMD、ESM等规范相继诞生。因为JS并未提供一种原生的，语言级别的模块化开发模式，而是将模块化交给…

AMD（Asynchronous Module Definition）

AMD 是一种异步模块化开发规范，它允许模块之间相互依赖，并可以并行加载。AMD 模块通常使用 define() 函数来定义，该函数接受三个参数：模块ID、依赖模块列表和模块工厂函数。

define(['jquery'], function($) {
  // 使用 jQuery
});

CMD（Common Module Definition）

CMD 是一种类似于 AMD 的模块化开发规范，但它使用 require.js 作为模块加载器。CMD 模块通常使用 define() 函数来定义，该函数接受两个参数：模块ID和模块工厂函数。

define(function(require) {
  // 使用 require 加载依赖模块
  var $ = require('jquery');
});

UMD（Universal Module Definition）

UMD 是一种通用的模块化开发规范，它兼容 AMD 和 CMD，还可以作为全局变量使用。UMD 模块通常使用 define() 函数来定义，该函数接受三个参数：模块ID、依赖模块列表和模块工厂函数。

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof require === 'function' && require.js) {
    // CMD
    require(['jquery'], factory);
  } else {
    // 全局变量
    window.MyModule = factory(jQuery);
  }
})(function($) {
  // 使用 jQuery
});

CJS（CommonJS）

CJS 是一种用于Node.js 的模块化开发规范，它使用 require() 函数来加载模块。CJS 模块通常使用 exports 对象来导出模块中的变量和函数。

// foo.js
exports.foo = function() {
  // ...
};

// bar.js
var foo = require('./foo');
foo.foo();

ES Module

ES Module 是 JavaScript 标准的一部分，它提供了一种原生的模块化开发模式。ES Module 使用 import 语句来加载模块，并使用 export 语句来导出模块中的变量和函数。

// foo.js
export function foo() {
  // ...
}

// bar.js
import { foo } from './foo';
foo();

总结

JavaScript 模块化开发规范有很多种，每种规范都有自己的优缺点。在选择模块化开发规范时，需要考虑以下因素：

  • 开发环境：不同的模块化开发规范适合不同的开发环境，例如 AMD 适合浏览器环境，而 CJS 适合 Node.js 环境。
  • 模块依赖关系：如果模块之间存在复杂的依赖关系，则需要选择一种支持模块循环依赖的模块化开发规范，例如 AMD 或 CMD。
  • 代码的可维护性和复用性：不同的模块化开发规范对代码的可维护性和复用性有不同的影响。一般来说，遵循模块化开发规范可以提高代码的可维护性和复用性。

扩展阅读