JavaScript之AMD，CMD规范

最新推荐文章于 2025-04-01 18:19:02 发布

全栈科学家

最新推荐文章于 2025-04-01 18:19:02 发布

阅读量979

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_52856519/article/details/128216655

版权

笔记专栏收录该内容

68 篇文章

订阅专栏

本文介绍了AMD（异步模块定义）和CMD两种JavaScript模块化的规范。AMD规范使用define方法定义模块，并通过require加载模块；CMD则允许按需加载依赖。文章详细解释了这两种规范的不同之处，包括依赖管理及模块加载方式。

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

前面说到了node端的CommonJS模块化规范，地址如下。今天简单了解AMD规范。

CommonJS的理解_全栈科学家的博客-优快云博客

前面我们知道浏览器的执行不能是同步执行的，必须是异步的，这里不得不提出AMD。AMD（Asynchronous Module Definition），意思就是"异步模块定义"。

它采用异步方式加载模块。实现了AMD规范的主要的两个JavaScript的两个库：require.js和curl.js

AMD规范使用define方法定义模块：

//define(param1,param2) 通过define方法定义模块
 2 //@param1: 数组，元素为引入的依赖模块
 3 //@param2: 回调函数，通过形参传入依赖
 4 define(['firstModule','secondModule'],function(firstModule,secondModule){
 5      function foo(){
 6            firstModule.test();
 7      }
 8      // 暴露foo()
 9      return {foo:foo};
10 });

AMD跟CommonJS一样也是通过require来导入，但是区别在于多了一个回调参数。用于导入后执行函数。

require([module], callback);

UMD（Universal Module Definition），通用的模块定义。

CMD和AMD一样通过define函数来定义模块; 两者的主要区别在于对依赖的加载上, CMD中不需要在define的参数中直接声明需要用到的模块。

// AMD——依赖前置
 2 define(['./a','./b'],function(a,b){
 3     //提前声明要依赖的模块
 4 });
 5 

 6 // CMD
 7 define(function(require,exports,module){
 8     //依赖可以就近写，使用的时候再去导入
 9     var a = require('./a');
10     a.test();
11 
12     //软依赖
13     if(status){
14         var b = require('./b');
15         b.test();
16     }
17 });

可以看出，AMD主张提前导入需要的模块，而CMD是需要的时候再去导入模块。

另外在CMD中define(factory)定义模块：

factory 可以是一个函数或者字符串或者对象。
如果 factory 是一个函数，回调函数中会指定三个参数 require,exports,module，表示的是该模块的构造函数。执行构造函数，可以得到模块向外提供的接口。

define({"foo": "bar"});
define('I am a template. My name is {{name}}.'};


define也可以接受两个以上的参数。
define(id?, dependency?, factory)
id: 字符串类型, 表示模块标识
dependency: 字符串数组类型，是该模块需要依赖的模块列表。

define('hello', ['jquery'], function(require, exports, module) {
  // 模块代码
});


require.async(id, callback?)
异步回调执行，用来加载可延迟异步加载的模块

define(function(require, exports, module) {
  // 异步加载一个模块，加载完成时，执行回调
  require.async('a', function(a) {
    a.doSomething();
  });

  // 异步加载多个模块
  require.async(['b', 'c'], function(b, c) {
    b.doSomething();
    c.doSomething();
  });
});