彻底弄懂CommonJS和AMD/CMD！

叁歲伎倆 2022-07-14 02:58 317阅读 0赞

JS中的模块规范（CommonJS，AMD，CMD），如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。 现在就看看吧，这些规范到底是啥东西，干嘛的。

一、CommonJS

CommonJS就是为JS的表现来制定规范，NodeJS是这种规范的实现，webpack 也是以CommonJS的形式来书写。因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是 [浏览器][Link 1]中。它的终极目标是提供一个类似Python，Ruby和Java标准库。

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

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

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

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

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

二、AMD

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

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

于是乎，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中文版][AMD_WIKI]

三、CMD

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

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

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

前面说AMD，说RequireJS实现了AMD，CMD看起来与AMD好像呀，那RequireJS与SeaJS像不像呢？

虽然CMD与AMD蛮像的，但区别还是挺明显的，官方非官方都有阐述和理解，我觉得吧，说的都挺好：

[官方阐述SeaJS与RequireJS异同][SeaJS_RequireJS]

[SeaJS与RequireJS的最大异同（这个说的也挺好）][SeaJS_RequireJS 1]

[Link 1]: http://www.2cto.com/os/liulanqi/
[CommonJS WIKI]: http://en.wikipedia.org/wiki/CommonJS
[AMD_WIKI]: https://github.com/amdjs/amdjs-api/wiki/AMD-%28%E4%B8%AD%E6%96%87%E7%89%88%29
[seajs_doc]: http://seajs.org/docs/#docs
[SeaJS_RequireJS]: https://github.com/seajs/seajs/issues/277
[SeaJS_RequireJS 1]: http://www.douban.com/note/283566440/