AMD & CMD

Posted 2020-06-27 Rhett_Web

如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。

 

   现在就看看吧，这些规范到底是啥东西，干嘛的。

 

 

 

一、CommonJS

 

 CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。

 

 CommonJS能有一定的影响力，我觉得绝对离不开Node的人气，不过喔，Node，CommonJS，浏览器甚至是W3C之间有什么关系呢，我找到了个贴切的图：

 

 

 

  |---------------浏览器----- ------------------|        |--------------------------CommonJS----------------------------------|

 

  |  BOM  |       | DOM |        | ECMAScript |         | FS |           | TCP |         | Stream |        | Buffer |          |........|

 

  |-------W3C-----------|       |---------------------------------------Node--------------------------------------------------|

 

 

 

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

 

require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

 

 

 

比如说我们就可以这样用了：

 

复制代码

1 //sum.js

2 exports.sum = function(){...做加操作..};

3 

4 //calculate.js

5 var math = require(‘sum‘);

6 exports.add = function(n){

7     return math.sum(val,n);

8 };

复制代码

 

 

虽说Node遵循CommonJS的规范，但是相比也是做了一些取舍，填了一些新东西的。

 

不过，说了CommonJS也说了Node，那么我觉得也得先了解下NPM了。NPM作为Node的包管理器，不是为了帮助Node解决依赖包的安装问题嘛，那它肯定也要遵循CommonJS规范啦，它遵循包规范（还是理论）的。

 

CommonJS WIKI讲了它的历史，还介绍了modules和packages等。

 

 

 

二、AMD

 

CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，为什么这么说呢？

 

这需要分析一下浏览器端的js和服务器端js都主要做了哪些事，有什么不同了：

 

 

 

---------------------------------------服务器端JS   |    浏览器端JS-------------------------------------------

 

                                   相同的代码需要多次执行  |    代码需要从一个服务器端分发到多个客户端执行

 

                                     CPU和内存资源是瓶颈   |    带宽是瓶颈

 

                                        加载时从磁盘中加载   |    加载时需要通过网络加载

 

---------------------------------------------------------------------------------------------------------------

 

 

 

于是乎，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。

 

AMD就只有一个接口：define(id?,dependencies?,factory);

 

它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中，像这样：

 

 

 

1 define([‘dep1‘,‘dep2‘],function(dep1,dep2){...});

 

 

要是没什么依赖，就定义简单的模块，下面这样就可以啦：

 

 

 

1 define(function(){

2     var exports = {};

3     exports.method = function(){...};

4     return exports;

5 });

 

 

咦，这里有define，把东西包装起来啦，那Node实现中怎么没看到有define关键字呢，它也要把东西包装起来呀，其实吧，只是Node隐式包装了而已.....

 

RequireJS就是实现了AMD规范的呢。

 

这有AMD的WIKI中文版，讲了很多蛮详细的东西，用到的时候可以查看：AMD的WIKI中文版

 

 

 

三、CMD

 

大名远扬的玉伯写了seajs，就是遵循他提出的CMD规范，与AMD蛮相近的，不过用起来感觉更加方便些，最重要的是中文版，应有尽有：seajs官方doc

 

 

 

1 define(function(require,exports,module){...});

 

 

用过seajs吧，这个不陌生吧，对吧。

 

 

 

 

玉伯对于 AMD 与 CMD 区别的解释：

 

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

 

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

 

 

    这些规范的目的都是为了 javascript 的模块化开发，特别是在浏览器端的。

    目前这些规范的实现都能达成浏览器端模块化开发的目的。

 

 

    区别：

 

 

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

 

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

 

1. // CMD
2. define(function(require, exports, module) {
3.     var a = require(‘./a‘)
4.     a.doSomething()
5.     // 此处略去 100 行
6.     var b = require(‘./b‘) // 依赖可以就近书写
7.     b.doSomething()
8.     // ...
9. })
11. // AMD 默认推荐的是
12. define([‘./a‘, ‘./b‘], function(a, b) { // 依赖必须一开始就写好
13.     a.doSomething()
14.     // 此处略去 100 行
15.     b.doSomething()
16.     // ...
17. })

 

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

 

 

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

 

 

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