AMD、CMD和CommonJS规范

我就是我 2022-05-16 00:35 385阅读 0赞

#  CommonJS规范 #

CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目，比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式，

可以使每个模块在它自身的命名空间中执行。该规范的主要内容是：模块必须通过  module.exports导出对外的变量或接口，通过require()来导入其他模块的输出到当前模块。

例子：

1.  `// moduleA.js`
2.  `module.exports = function( value ){`
3.  `return value * 2;`
4.  `}`

1.  `// moduleB.js`
2.  `var multiplyBy2 = require('./moduleA');`
3.  `var result = multiplyBy2(4);`

CommonJS是同步加载模块，但其实也有浏览器端的实现，其原理是将所有模块都定义好并通过id进行索引，这样就可以浏览器进行解析了  
  
 服务器端的Node.js遵循CommonJS规范。核心思想是允许模块通过require 方法来同步加载所要依赖的其他模块，然后通过 exports或module.exports来导出需要暴露的接口。

1.  `require("module");`
2.  `require("../file.js");`
3.  `exports.doStuff = function() {};`
4.  `module.exports = someValue;`

优点：

*   服务器端便于重用
 *  NPM中已经将近20w个模块包
 *  简单并容易使用

缺点：

*  同步的模块方式不适合不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
 *  不能非阻塞的并行加载多个模块

详细：[http://zhaoda.net/webpack-handbook/module-system.html][http_zhaoda.net_webpack-handbook_module-system.html]

[http://javascript.ruanyifeng.com/nodejs/module.html\#toc4][http_javascript.ruanyifeng.com_nodejs_module.html_toc4]

# AMD #

AMD规范其实只有一个主要接口 define(id,dependencies,factory)，它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行，依赖前置

1.  `define("module", ["dep1", "dep2"], function(d1, d2) {`
2.  `return someExportedValue;`
3.  `});`
4.  `require(["module", "../file"], function(module, file) { /* ... */ });`

优点：

*  适合在浏览器环境异步加载
 *  并行加载多个模块

缺点：

*  提高开发成本，代码阅读和书写比较困难
 *  不符合通用的模块思维方式，是一种妥协的实现

详细：[http://www.ruanyifeng.com/blog/2012/10/asynchronous\_module\_definition.html][http_www.ruanyifeng.com_blog_2012_10_asynchronous_module_definition.html]

# CMD #

CMD规范和AMD相似，尽量保持简单，并且与CommonJS和NodeJS的Modules规范保持了很大的兼容性。

1.  `define(function(require, exports, module) {`
2.  `var $ = require('jquery');`
3.  `var Spinning = require('./spinning');`
4.  `exports.doSomething = ...`
5.  `module.exports = ...`
6.  `})`

优点：

*  依赖就近，延迟执行
 *  很容易在node中运行

缺点：

*  依赖SPM打包，模块的加载逻辑偏重

实现： SeaJS

[http_zhaoda.net_webpack-handbook_module-system.html]: http://zhaoda.net/webpack-handbook/module-system.html
[http_javascript.ruanyifeng.com_nodejs_module.html_toc4]: http://javascript.ruanyifeng.com/nodejs/module.html#toc4
[http_www.ruanyifeng.com_blog_2012_10_asynchronous_module_definition.html]: http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html