js模块化CommonJs AMD CMD UMD ES6

最新推荐文章于 2025-04-02 15:29:09 发布

时光之里

最新推荐文章于 2025-04-02 15:29:09 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： CommonJs AMD CMD umd javascript

本文链接：https://blog.youkuaiyun.com/m_review/article/details/78644037

大前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript模块化的多种规范，包括CommonJS、AMD、CMD和UMD等，并重点讲解了ES6模块化标准，对比了不同规范的特点及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提前了解 js为什么需要模块化

commonjs 规范

服务器端规范，代表：nodejs

示例：

// b.js 导出
module.exports = {
  val: "这是b导出的模块",
};
// index.js 导入
let b = require("./b.js");
console.log(b); // {val: "这是b导出的模块"}

问题：为什么 commonjs 规范不适合做浏览器的规范

commonjs 是同步加载模块，从本地硬盘中读取，速度很快，但是在浏览器中，需要先请求服务器，涉及到网速、代理等问题，等待时间过长，浏览器会处于假死状态

同步加载模块即只有加载完当前的才能执行后面的操作

AMD 规范

简介：异步模块定义，异步加载模块，客户端规范

背景：ES6 之前通过 requirejs 支持 js 的模块化，比较老

AMD 是 RequireJs 在推广过程中对模块定义规范化的产物。

示例：

// b.js 导出
define(function() {
  let val = "这是b导出的模块",
  return val;
})
// index.js 导入
define(['./b.js'], function(reuqire) {
  console.log(reuqire)
})

CMD 规范

简介：通用模块定义，异步加载模块，客户端规范

CMD 是 SeaJS 在推广过程中对模块定义规范化的产物。

示例：

define(function (require, exports, module) {
  let b = require("./b");
  console.log(b);
});

AMD 和 CMD 的区别

CMD 推崇依赖就近，AMD 推崇依赖前置。

示例：

//AMD
define(['./a','./b'], function (a, b) {
  //依赖一开始就写好
  a.test();
  b.test();
});
//CMD
define(function (requie, exports, module) {
  //依赖可以就近书写
  var a = require('./a');
  a.test();
  ...
  //软依赖
  if (true)) {
    var b = requie('./b');
    b.test();
  }
});

UMD

简介：通用模块定义

背景：为了兼容 AMD CMD commonjs，结合实现跨平台解决方案，很多插件头部的写法。

示例：

/**
 * UMD-Universal Module Definition 通用模块定义
 * */
(function (root, factory) {
  // 判断是否是AMD/CMD
  if (typeof define === "function") {
    define([], factory);
  } else if (typeof exports === "object") {
    // Node CommonJS规范
    module.exports = factory();
  } else {
    // 浏览器环境
    root.someAttr = factory;
  }
})(this, function () {
  let add = function (a, b) {
    return a + b;
  };
  return {
    add,
    module: "UMD",
  };
});

ES6 （目前使用最多的）

示例：

// test.js 导出
export let a = "es6 module";
export let b = function () {};
export default demo = function () {}; // 导出默认
// index.js 导入
import { a, b } from "./test.js"; // 导入指定
import demo from "./test.js"; // 导入默认
import * as test from "./test.js"; // 导入所有