AMD和CMD的区别

最新推荐文章于 2020-12-13 15:11:50 发布

HainesFreeman

最新推荐文章于 2020-12-13 15:11:50 发布

阅读量6.1k

点赞数 8

本文链接：https://blog.csdn.net/weixin_41829196/article/details/105855450

版权

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

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性能好，因为只有用户需要的时候才执行。

关于这两个的区别网上可以搜出一堆文章，简单总结一下

最明显的区别就是在模块定义时对依赖的处理不同

1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
2、CMD推崇就近依赖，只有在用到某个模块的时候再去require
这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法。

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

为什么我们说两个的区别是依赖模块执行时机不同，为什么很多人认为ADM是异步的，CMD是同步的。（除了名字的原因。。。）

同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因。