AMD、CMD和CommonJS规范

2017年11月14日Web前端、Web后端

当JS项目成为一个巨大的工程时,模块化成为了必然。而AMD,CMD和CommonJS是目前最常用的三种模块化书写规范。

一、CommonJS

CommonJS的规范诞生的比较早,node就是采用的该规范。 他是服务端模块的规范。 他是这样加载模块的:

var some = require('some');
some.doSomething();

具体的规范可以查看 CommonJS规范

二、AMD

AMD,即Asynchronous Module Definition,异步模块定义。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。 浏览器端,RequireJS对AMD规范有了很好的实现。 AMD也采用require()语句加载模块:

require(\[module\], callback);

第一个参数module是个数组,存放需要加载的模块,第二个参数时当模块加载完成后的回调函数。

require(\['some'\], function (some) {
    some.doSomething();
});

三、CMD

CMD,即Common Module Definition,通用模块定义。浏览器实现该规则的是SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载时机上有所不同 。 SeaJS的写法:

define(function(require, exports, module) {
    var some = require('some');
    some.doSomething();
});

四、AMD与CMD的区别

ADM与CMD都是异步实现的,只不过AMD依赖前置,js可以方便知道依赖模块是谁,立即加载,而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块。 即:

  1. AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 。
  2. CMD推崇就近依赖,只有在用到某个模块的时候再去require 。

AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行。 CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。