AMD与CMD的区别

最新推荐文章于 2020-08-19 19:00:38 发布

哇偶哇偶Z

最新推荐文章于 2020-08-19 19:00:38 发布

阅读量122

点赞数

分类专栏： JS基础

JS基础专栏收录该内容

103 篇文章 1 订阅

订阅专栏

他们两者的共同点就是都是一种框架在推广的过程中对模块定义的规范产出；而且他们都是异步加载模块。

AMD即Asynchronous Module Definition,翻译过来就是异步模块化定义，是一个模块化开发的规范。此处是规范链接那么AMD是怎么弄出来的呢？其实AMD是在RequireJS之后才出来的，是大名鼎鼎的RequireJS产出了这一套模块化开发的概念。那么谈AMD就必须先谈RequireJS.

RequireJS解决了前端开发过程中的两大问题，一个是文件之间的依赖问题，一个是浏览器加载多个JS文件时页面失去响应的时间过长。这两个问题导致人们开发出这样的一个框架来。RequireJS是外国人开发出来的，所有你可以看到，RequireJS的官网全是英文！

CMD即 common moudle definition,翻译过来即通用模块定义。此处是规范定义CDM规范是国人开发出来的，这确实为国内的前端行业争了口气了。同样的，CMD也有个浏览器的实现，这就是常常听见别人说的SeaJS了。

SeaJS和RequireJS解决的是同样的问题，然而它模块定义的方式和模块加载时机确是不同的！！！

1.RequireJS在主文件里是将所有的文件同时加载，然而SeaJS强调一个文件一个模块。

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

什么意思呢？就是AMD在定义模块的时候要先声明其依赖的模块。例如这样：

define(['jquery'],function($){
    var  backButton=$('.backToTop');
   function  animate(){
        $('html,body').animate({
             scrollTop:0
            },800);
        };
    function scroll(){
         if($(window).scrollTop()>$(window).height())
            backButton.fadeIn();
        else
            backButton.fadeOut();
    };
    backButton.on('click',animate);
    $(window).on('scroll', scroll);
    $(window).trigger('scroll');
return{
    animate:animate,
    scroll:scroll
};
});

CMD没有这里严格的要求，它只要依赖的模块在附近就可以了，例如下面这样：

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

划重点了！AMD和CMD最大的区别不是说上面的两点，而是他们俩对依赖模块的执行时机有所不同！！！对依赖模块的执行时机取决于他们的模块定义方式，AMD推崇依赖前置，因此，JS可以及其轻巧地知道某个模块依赖的模块是哪一个，因此可以立即加载那个模块；而CMD是就近依赖，它要等到所有的模块变为字符串，解析一遍之后才知道他们之间的依赖关系，这在别人看来是牺牲了性能换来开发的便利性。然而我要告诉你的是解析模块用的时间短的可以忽略不计，所以这又有什么关系呢？

那么说了那么多，他们是怎么执行的呢？

AMD加载完模块后，就立马执行该模块；CMD加载完某个模块后没有立即执行而是等到遇到require语句的时再执行。

所以，他们两者的不同导致各自的优点是AMD用户体验好，因为模块提前执行了；CMD性能好，因为只有用户需要的时候才执行。

AMD 和 CMD 的区别有哪些？

作者：玉伯
链接：https://www.zhihu.com/question/20351507/answer/14859415
来源：知乎

AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMD
CMD 规范在这里：https://github.com/seajs/seajs/issues/242

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。
还有不少⋯⋯

这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。

区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

4. 还有一些细节差异，具体看这个规范的定义就好，就不多说了。

另外，SeaJS 和 RequireJS 的差异，可以参考：https://github.com/seajs/seajs/issues/277

AMD、CMD、webpack的区别：

从前有两个规范，一个是AMD 一个是CMD
RequireJS是AMD规范的实现，SeaJS是CMD规范的实现，
一个主张提前加载依赖，一个主张延迟加载依赖

后来出现了 commonjs规范
webpack就是支持commonjs规范的
目前可以说是主导了前端构建格局。

CommomJS是服务端规范，node就是采用这个规范，他是同步加载，毕竟服务端不用考虑异步。
它是对通用的JavaScript模式的标准化尝试，它包含有 AMD 定义
AMD是异步加载模块的缩写，使用require引入模块，提倡依賴前置。
CMD与AMD其实挺接近的，还因为有sea.js,中文资料还是比较亲切的。
还有就是AMD和CommomJS的中间者UMD
Webpack其实就是一个打包工具，他的思想就是一切皆模块，css是模块，js是模块，图片是模块。并且提供了一些列模块加载(各种-loader)来编译模块。官方推荐使用commonJS规范，但是也支持CMD和AMD。