在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。
模块化理解
1. 什么是模块
- 将复杂的程序依据一定的规则(规范)拆分成多个模块(文件)
- 模块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
2. 模块化的进化过程
全局function : 将不同的功能封装成不同的全局函数
缺点：虽说可以实现一定的封装效果，但是大量的全局函数，污染全局命名空间，容易引起命名冲突
function module1 () {
//...
}
function module2 () {
//...
}命名空间 : 简单对象封装
缺点：减少了全局变量，解决命名冲突，但是外部可以直接修改模块内部的数据
let module = {
data: 'aaa',
func () {
console.log(`${this.data}`)
}
}
module.data = 'bbb' // 直接修改模块内部的数据
module.fn() // bbbIIFE：(自执行函数)
缺点：实现数据私有, 外部只能通过暴露的方法操作，如果当前这个模块依赖另一个模块怎么办?
// module.js文件()
(function (window) {
let data = 'aaa'
function func () {
console.log(`${this.data}`)
}
//暴露接口
window.module = { func }
})(window)// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
module.func() // aaa
console.log(module.data) // undefined 不能访问模块内部数据
module.data = 'bbb' // 不能修改的模块内部数据
module.func() // aaa
</script>IIFE增强 : 引入依赖
代码语言：javascript复制// module.js文件
(function (window, $) {
let data = 'aaa'
function func () {
console.log(`${this.data}`)
}
function func2 () {
$('body').css('background', 'red')
}
//暴露接口
window.module = { func, func2 }
})(window, jQuery)// index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
module.func2()
</script>上面引入jQuery库，就把这个库当作参数传入，保证模块的独立性，使得模块之间的依赖关系变得明显。
3. 模块化的作用
通过上面的模块拆分，我们发现：
- 减少了全局变量，有效的避免了命名污染
- 更好的分离，按需加载
- 提高了复用性，维护性
但是比较复杂的应用，模块比较多，难免需要引入多个<script>，这样又会出现其他问题：
- 请求过多
- 依赖关系模糊
模块化固然有多个好处，然而一个页面需要引入多个js文件，还得按一定的顺序引入，就可能出现因为引入顺序错误而导致整个项目出现严重问题。而这些问题可以通过模块化规范来解决。
模块化规范
- CommonJs
CommonJS经node.js应运而生，根据CommonJS规范，每一个模块都是一个单独的作用域。也就是说，在该模块内部定义的变量，无法被其他模块读取。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。
其核心思想就是一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或module.exports来导出需要暴露的接口。
// module1.js
var data = 5;
var doSomething = function (value) {
return value data;
};
// 暴露的接口
module.exports.data = data;
module.exports.doSomething = doSomething;上面代码通过 module.exports 输出变量 data 和函数 doSomething。
var example = require('./module1.js');
console.log(example.data); // 5
console.log(example.doSomething(1)); // 6require命令用于加载模块文件。require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。
优点：服务器端模块复用性，NPM中模块包多，有将近20万个。
缺点：加载模块是同步的，只有加载完成后才能执行后面的操作，也就是说现加载现用，不仅加载速度慢，而且还会导致性能、可用性、调试和跨域访问等问题。由于Node.js主要用于服务器编程，加载的模块文件一般都存在本地硬盘，加载起来比较快，不用考虑异步加载的方式，因此，CommonJS规范比较适用。然而，这并不适合在浏览器环境，同步意味着阻塞加载，浏览器资源是异步加载的，鉴于浏览器的情况，为了解决上述同步加载问题，实现异步加载依赖模块，因此有了AMD、CMD解决方案。
- AMD （Asynchronous Module Definition）
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD规范是异步加载模块，允许指定回调函数。对于依赖的模块，AMD 推崇提前执行(依赖前置)，不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
其核心接口是：define(id?, dependencies?, factory) ，它要在声明模块的时候指定所有的依赖 dependencies ，并且还要当做形参传到factory 中，对于依赖的模块提前执行，依赖前置。
// a.js (定义没有依赖的模块)
define(function () {
let data = 'aaa'
function doSomething () {
console.log(data)
}
return { doSomething } // 暴露接口
})// b.js (定义有依赖的模块)
define(['c'], function (c) {
let data = 'bbb'
function doSomething () {
console.log(data c.getData())
}
return { doSomething } // 暴露接口
})// c.js (此模块为 b.js 依赖)
define(function () {
let data = 'ccc'
function getData () {
return data
}
return { getData } // 暴露接口
})// 引入依赖的模块
require(['./a', './b'], function (a, b) { // 依赖必须一开始就写好
a.doSomething()
// ...
b.doSomething()
// ...
})<body>
<!-- 引入require.js并指定js主文件的入口 -->
<script data-main="./index" src="https://cdn.staticfile.org/require.js/2.3.6/require.min.js"></script>
<script>
setTimeout(() => {
console.log('setTimeout')
}, 0)
</script>
</body>require()函数在加载依赖的函数的时候是异步加载的，这也是我在这里放了个setTimeout证实一下，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。AMD的异步加载解决了阻塞加载、性能问题，模块之间的依赖关系也能清楚的显示出来。
- CMD （Common Module Definition）
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。CMD规范和 AMD 很相似，解决同样问题，只是运行机制不同。对于依赖的模块，CMD 推崇延迟执行（依赖就近）。
// a.js(定义没有依赖的模块)
define(function (require, exports, module) {
let data = 'aaa'
function doSomething () {
console.log(data)
}
exports.doSomething = doSomething // 暴露接口
})// b.js (定义有依赖的模块)
define(function (require, exports, module) {
let data = 'bbb'
function doSomething () {
var c = require('./c') // 依赖可以就近书写
console.log(data c.data)
}
exports.doSomething = doSomething // 暴露接口
})// c.js (此模块为 b.js 依赖)
define(function (require, exports, module) {
let data = 'ccc'
exports.data = data // 暴露模块
})// 引入依赖的模块
define(function (require, exports, module) {
//引入依赖模块(异步)
require.async('./a', function (a) {
a.doSomething()
console.log('a是异步的')
})
//引入依赖模块(同步)
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
var c = require('./c') // 依赖可以就近书写
console.log(c.data)
// ...
})<body>
<script src="https://cdn.staticfile.org/seajs/3.0.3/sea.js"></script>
<script>
setTimeout(() => {
console.log('setTimeout')
}, 0)
seajs.use('./index')
</script>
</body>- ES6
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。为了提供方便，不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// a.js (定义模块)
var data = 'aaa'
var doSomething = function () {
console.log('log: ' data)
};
export { data, doSomething }
// 引用模块
import { data, doSomething } from './a'这里在语法不做过多介绍，主要说一说 ES6 模块 与 CommonJS 模块 的差异。
它们有两个重大差异：
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
- CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
我们来看看第一个差异，CommonJS模块的加载机制：
代码语言：javascript复制// module1.js
var data = 5;
var doSomething = function () {
data ;
};
// 暴露的接口
module.exports.data = data;
module.exports.doSomething = doSomething;var example = require('./module1.js');
console.log(example.data); // 5
example.doSomething();
console.log(example.data); // 5ES6 模块的加载机制:
代码语言：javascript复制// module1.js
let data = 5;
function doSomething() {
data ;
}
export { data, doSomething }import { data, doSomething } from './module1';
console.log(data); // 5
doSomething();
console.log(data); // 6ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
总结
- CommonJS 模块输出的是一个值的拷贝，CommonJS 模块是运行时加载，CommonJS规范主要用于服务端编程，加载模块是同步的，同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD、CMD解决方案。
- AMD 是
RequireJS在推广过程中对模块定义的规范化产出。AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。AMD 的 API 默认是一个当多个用，对于依赖的模块，AMD 推崇提前执行(依赖前置) - CMD 是
SeaJS在推广过程中对模块定义的规范化产出。CMD 的 API 严格区分，推崇职责单一，加载模块是异步的，CMD 推崇延迟执行（依赖就近）。 - ES6 模块输出的是值的引用，ES6 模块是编译时输出接口，ES6 在语言标准的层面上，实现了模块功能简单，完全可以成为浏览器和服务器通用的模块解决方案。
