CommonJS与AMD的区别

本文主要就JavaScript语言的模块化历史进行展开，文章主要内容参考阮老师的日志。这里放上传送门
Javascript模块化编程（一）：模块的写法
Javascript模块化编程（二）：AMD规范
Javascript模块化编程（三）：require.js的用法

1、模块的规范

在ES6标准出来之前，社区制定了一些模块加载方案，其中最主要的包括CommonJS和AMD两种，前者用于服务器，后者用于浏览器。而自从es6的标准语言层面出来之后，模块化的功能得以普及，而且接受起来比较简单，并且逐步取代CommonJS和AMD规范，成为浏览器和服务器最为通用的解决方案。

2、CommonJs服务器端编程

nodejs自从2009年发明以来，将javascript语言用于服务器端编程，这标志"Javascript模块化编程"正式诞生。（服务器端，模块化是必须的，只有这样才能与操作系统和其他模块进行编程互动）

背景：node.js的模块系统，就是参照CommonJS规范实现的。
在CommonJS中，有一个全局性方法require()，用于加载模块，这里的加载时同步的，也就是说在服务器端，文模块的加载是同步的，模块(js)存放在文件系统中，所以即使同步读取取不会有影响。
下面举例说明：

假定有一个模块a.js

let a = {
 add(a, b){
     return a + b;
 }
}
export a;

其他模块引入a模块，比如模块b中

let a = require('./a.js');
a.add(1, 2) //3

说明：这个在服务器端是完全没有问题的，因为同步加载，可以先加载然后调用方法。

3、AMD浏览器端编程

背景：而在浏览器客户端中，由于js的执行从上往下解析，如果通过require引入的模块必须等待模块加载完成，才能调用里面的方法，这样浏览器就会出现假死状态，网页响应延时等不好的体验，因此浏览器中的模块不能采用'同步加载'，只能采用异步加载，AMD异步加载由此孕育而生。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

　　require(['a'], function (a) {
　　　　a.add(2, 3);
　　});

a.add()与a模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。