AMD和CMD的区别

今天是我人生第一次面试前端，被问到的问题中其中就有一个是如标题这样问的。当时我知道自己有看过相关的介绍，但霎时间想不起啊！但也情有可原，老子还没学过SeaJS，了解不深啊！

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

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