AMD规范
（来自百度百科）
AMD全称是Asynchronous Module Definition，即异步模块加载机制，规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模块标识，可以省略。
array-of-dependencies: 所依赖的模块，可以省略。
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
requirejs等就是是用这个规范开发的
require([module], callback);
amd要求在使用前需要先把所有的模块都写出来
CMD规范
CMD (Common Module Definition),同样是异步加载模块， 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：
define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
Commonjs
Commonjs和es6模块化是本文的重点，Commonjs主要应用的环境是nodejs，它具有下列特点
模块是值的“浅”拷贝
抛出变量以及修改的函数
// export.js
var a = { b: "b" }
var obj = {
a: a
}
var num = 3
function add() {
num++
}
function change() {
obj.a.b = "c"
}
module.exports = {
obj,
num,
add,
change
}
接受模块内的变量并操作
// require.js
const {obj,num,add,change} = require("./export.js")
console.log(obj) // { a: { b: 'b' } }
console.log(num) // 3
add()
change()
console.log(obj) // { a: { b: 'c' } }
console.log(num) // 3
观察发现对于引用类的值的修改，修改还是会影响原值的
执行时间
当require运行的时候，便会加载这个模块，这个模块就全部加载并运行，当下一次取值的时候是从缓存中读取的值
同步加载
这里创建三个js文件相互引用
// a.js
console.log('a');
const importFunc = () => {
console.log(require('./b').b);
}
importFunc()
module.exports = {
importFunc
}
// b.js
console.log("b")
const b = 1
module.exports = {b}
// c.js
const {importFunc} = require("./a")
console.log("c")
运行结果显示
这里c最后被打印，被之前的加载语句所阻塞了
es6模块化
引入的是值的引用
d.js
// d.js
console.log('d');
const importFunc = () => {
import("./e.js").then(({ e }) => {
console.log(e)
})
}
importFunc()
var obj = {
a: "a"
}
export {
importFunc,
obj
}
// f.js
import { importFunc, obj } from "./d.js"
console.log(obj)
obj = "a" // f.js:4 Uncaught TypeError: Assignment to constant variable.
console.log("f")
这里一旦修改了obj的值就会报错，但是给obj赋值修改参数没问题
引入时间
import引入的模块只有在编译的时候才会引入指定模块
异步加载
将上文的f.js注释掉报错代码
// f.js
import { importFunc, obj } from "./d.js"
// console.log(obj)
// obj = "a" // f.js:4 Uncaught TypeError: Assignment to constant variable.
console.log("f")
// e.js
console.log("e")
const e = 2
export { e }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./f.js"></script>
</head>
<body>
</body>
</html>
html引入后放入服务器在浏览器打开，得到如下打印
证明es6的模块化是异步加载的