CommonJS AMD CMD RequireJS

一、为什么要使用模块化？

1. 解决命名冲突

在浏览器运行的 js 实际上会合并代码挂载到全局对象（window）下，虽然有匿名函数，但对于变量和定义好的函数名，是很有可能冲突的。同时，如果多人合作，命名冲突就更可能发生了，此时就需要解决这个问题了。

2. 依赖管理

代码不可能全写再一个文件里，我们都会分开几个甚至几十个文件，这样拆分更容易维护，便于重用封装。但这些文件的依赖关系可能很混杂，顺序很重要，比如我们再引用 jQuery 的时候，在所有用到 jQ 的代码前引入，这是常识，但依赖有很多的时候，比如 100 个，这样人为去维护顺序就显的力不从心了。

二、CMD、AMD、CommonJS 规范分别指什么？有哪些应用

1. CommonJS 规范

Node 的出现才是 js 真正模块化的开始。每个文件就是一个模块，有自己的作用域。CommonJS 规范规定每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性是对外的接口。加载某个模块，其实是加载该模块的module.exports，require方法用于加载模块。

// a.js
var aFnc = function () {
  console.log('this is a!')
}
var a = 1
module.exports.a = a
module.exports.aFnc = aFnc

//b.js
var a = require('./a.js')
console.log(a.a)
a.aFnc()

对于服务端语言，模块化就是读取下文件内容的事情，是同步进行的，因为读取硬盘速度很快，可以等待。但在浏览器里，同步等待js 的加载可能会出现因为网速问题，导致网页加载时间过长，因此需要新的标准。

2.AMD 规范

AMD 是 “Asynchronous Module Definition” 的缩写，意思就是“异步模块定义”。是 RequireJS 在推广过程中的规范化产出。该规范定义了一个函数define，它是全局变量。

单独模块的定义：

define({
  method: function(){}
})

//另一种写法
define(function(){
  return {
    method: function(){}
  }
})

非独立模块：

define(['module1', 'module2'], function(m1, m2){
  ...
})

3. CMD 规范

CMD 是 SeaJS 在推广过程中的规范化产出。

与 AMD 的区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置

模块定义：

define(function(require, exports, module) {   
  var a = require('./a')   
  a.doSomething()   
  // 此处略去 100 行   

  var b = require('./b') 
  // 依赖可以就近书写   
  b.doSomething()   
  // ... 
})

4. 应用

1. CommonJS 适用于服务端，基于 Node，可用 Glup、 Webpack 之类的打包压缩再用于浏览器环境。
2. AMD 用于浏览器环境，如 RequireJS
3. CMD 用于浏览器环境， SeaJS 推广中产出
   参考：

CommonJS 规范 | JavaScript 标准参考教程

JavaScript 模块化编程 | 阮一峰

AMD 规范 | GitHub

CMD 规范 | GitHub

三、编程

预览 | GitHub