关于AMD/CMD/CommonJs的理解

一、前言

时间过的太快，这个月大部分时间都在看书、看文档（感谢公司没有工作），工作上用不到的东西忘得太快，最近重温了模块化开发、nodejs的一些东西，其中涉及了AMD、CMD、CommonJs，现将内容整理如下。

二、那些模块规范

这三个规范（AMD、CMD、CommonJs）都是为javascript模块化加载而生的，都是在用到或者预计要用到某些模块时候加载该模块，使得大量的系统巨大的庞杂的代码得以很好的组织和管理。模块化使得我们在使用和管理代码的时候不那么混乱，而且也方便了多人的合作。

1)  CommonJS

CommonJS是服务器端模块的规范，由Node推广使用。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

根据CommonJS规范:

• 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
• 输出模块变量的最好方法是使用module.exports对象。
• 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

例：

//example.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面代码通过module.exports输出变量x和函数addX。

require方法用于加载模块。

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

CommonJS模块的特点如下：

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。模块加载的顺序是同步进行。

2） AMD规范

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义“。由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

require.js的诞生，就是为了解决这两个问题：

• 实现js文件的异步加载，避免网页失去响应；
• 管理模块之间的依赖性，便于代码的编写和维护。

关于require.js的使用，请看官网。

3）CMD规范

CMD 即Common Module Definition的缩写，意思就是“通用模块定义”。CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同。

关于require.js的使用，请看官网。

三、总结

• CommonJs主要针对服务端，AMD/CMD主要针对浏览器端，所以最容易混淆的是AMD/CMD。
• AMD、CMD都是并行加载js文件
• AMD是预加载，在并行加载js文件同时，还会解析执行该模块。而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
• AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。
• CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。 CMD缺点：执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。