历史上JavaScript一直没有模块体系，在其他高级语言中，Java有类文件，Python有import机制，Ruby有require，PHP有include和require。而JavaScript则是通过<script>标签引入代码，显得杂乱无章。人们不得不用命名空间等方式人为地约束代码，以求达到安全和易用的目的。
为此，社区指定了一些模块加载方案，最主要的有CommonJS，AMD和CMD三种。前者用于服务器，后两者用于浏览器。同时，ES6也从语言规格的层面上，实现了模块功能，完全可以代替CommonJS，AMD和CMD，成为浏览器和服务器通用的模块解决方案。
下面将就上面这四种方案进行简单介绍。
CommonJS
CommonJS是服务器端模块的规范，它的提出主要是为了弥补当前JavaScript没有标准的缺陷，以达到像Python，Java具备大型应用开发大型应用的基础能力，而不是停留在小脚本程序的阶段。NodeJS采取的就是CommonJS规范。
CommonJS对模块的定义很简单，主要分为模块引用，模块定义和模块标识3个方面。
模块引用
模块引用的实例如下
var math = require('math');
在CommonJS规范中，存在require()方法，这个方法接受模块标识，以此引入一个模块的API到当前上下文中。
模块定义
在模块中，上下文提供require()方法来引入外部模块。对应引入的功能，上下文提供了exports对象用于导出当前模块的方法或者变量，并且它是唯一导出的出口。在模块中，还存在一个module对象，它代表模块自身，而exports是module的属性。在Node中，一个文件就是一个模块，将方法挂在在exports对象上作为属性即可定义导出的方式：
// math.js
exports.add = function() {
var sum = 0,
i = 0,
args = arguments,
l = arguments.length;
while(i < 1) {
sum += args[i++];
}
return sum;
}
在另一个文件中，我们通过require()方法来引入模块后，就能调用定义的属性和方法了：
//program.js
var math = require('math');
exports.increment = function(val) {
return math.add(val, 1);
}
需要注意的是，module.exports和exports是相同的引用，即
exports = module.exports
最终模块返回的是module.exports。
所以下面的写法是错误的
exports = function(val) {
return val + 1;
}
这样做的话exports就不再指向module.exports。正确的写法是
module.exports = function(val) {
return val + 1;
}
模块标识
模块标识其实就是传递给require()方法的参数，它必须是符合驼峰名的字符串，或者以. , ..开头的相对路径，或者绝对路径。它可以没有文件名后缀.js。
模块的定义十分简单，接口也十分简洁。它的意义在于将类聚的方法和变量等限定在私有的作用域中，同时支持引入和引出功能以顺畅的连接上下游依赖。每个模块有独立的空间，它们互不干扰，在引用时也显得干净利落。
AMD
AMD（Asynchronous Module Definition）是RequireJS在推广过程中对模块定义的规范化产出。
AMD异步加载所需的模块，然后在回调函数中执行主逻辑。这正是我们在浏览器端开发所习惯了的方式。
AMD规范的模块定义如下：
define(id?, dependencies?, factory)
它的模块id和依赖是可选的，factory的内容就是实际代码的内容。下面的代码简单的定义了两个模块。
// a.js
define(function(){
var exports = {};
exports.sayHello = function() {
alert("Hello from module: " + module.id);
};
return exports;
});
// b.js
define(['a'], function(a) {
a.sayHello();
});
AMD与CommonJS规范的Node不同的是AMD模块需要用define来明确定义一个模块，而Node是隐式包装的，它们的目的都是为了进行作用域的隔离，仅在需要的时候被引入；另一个不同是AMD的内容需要通过返回的方式实现导出。
CMD
CMD与AMD规范的主要区别在于定义模块和依赖模块引入的部分。AMD需要在声明模块的时候指定所有的依赖，通过形参传递到依赖模块内容中：
define(['dep1', 'dep2'], function(dep1, dep2){
return function(){};
});
与AMD模块相比，CMD模块更接近于Node对CommonJS规范的定义：
define(factory);
在依赖部分，CMD支持动态引入，示例如下：
define(function(require, exports, module){
// 获取模块a的接口
var a = require('./a');
// 调用模块a的方法
a.doSomething();
});
CommonJS, AMD, CMD 区别
CommonJS加载模块是同步的，所以只有加载完成后才能执行后面的操作，像NodeJS主要用于服务器端的编程，加载的模块文件一般都已存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这时就必须采用异步模式。所以就有了AMD，CMD解决方案。
- 对于依赖的模块，AMD是提前执行，CMD是推迟执行。
- CMD推崇依赖就近，AMD推崇依赖前置。
// CMD
define(function(require, exports, module)){
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
}
// AMD
define(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});
网友评论