时间轴：CommonJS --> AMD --> CMD --> ES Module

CommonJS

• 常用于：服务器端，node，webpack
• 特点：同步/运行时加载，磁盘读取速度快
• 语法：

复制
1// 1. 导出：通过module.exports或exports来暴露模块  
2module.exports = {  
3  attr1,  
4  attr2  
5}  
6exports.attr = xx  

注意
不可以exports = xxx，这样写会无效，因为更改了exports的地址，而 exports 是 module.exports 的引用指向的是同一个内存，模块最后导出的是 module.exports

复制
1// 2. 引用：require('x')  
2const xx = require('xx') // 整体重命名  
3const { attr } = require('xx') // 解构某一个导出

AMD

• 常用于：不常用，CommonJs的浏览器端实现
• 特点：
  • 异步加载：因为面向浏览器端，为了不影响渲染肯定是异步加载
  • 依赖前置：所有的依赖必须写在最初的依赖数组中，速度快，但是会浪费资源，预先加载了所有依赖不管你是否用到
• 语法：

复制
1// 1. 导出：通过define来定义模块  
2// 如果该模块还依赖其他模块，则将模块的路径填入第一个参数的数组中  
3define(['x'], function(x){  
4  function foo(){  
5      return x.fn() + 1  
6  }  
7  return {  
8      foo: foo  
9  };  
10});  
11// 2. 引用  
12require(['a'], function (a){  
13  a.foo()  
14});

CMD

• 常用于：不常用，根据CommonJs和AMD实现，优化了加载方式
• 特点：
  • 异步加载
  • 按需加载/依赖就近：用到了再引用依赖，方便了开发，缺点是速度和性能较差
• 语法：

复制
1// 1. 导出：通过define来定义模块  
2// 如果该模块还依赖其他模块，在用到的地方引用即可  
3define(function(){  
4  function foo(){  
5      var x = require('x')  
6      return x.fn() + 1  
7  }  
8  return {  
9      foo: foo  
10  };  
11});  
12// 2. 引用  
13var x = require('a');  
14a.foo();

ES module

• 常用于：目前浏览器端的默认标准
• 特点：静态编译： 在编译的时候就能确定依赖关系，以及输入和输出的变量
• 语法：

复制
1// 1. 导出：通过export 或 export default 输出模块  
2// 写法1: 边声明，边导出  
3export var m = 1;  
4export function m() {};  
5export class M {};  
6
7// 写法2：导出一个接口 export {}，形似导出对象但不是, 本质上是引用集合，最常用的导出方法  
8
9export {  
10  attr1,  
11  attr2  
12}  
13
14// 写法3：默认导出  
15
16export default fn  
17
18// 2. 引用  
19import { x } from 'test.js' // 导出模块中对应的值，必须知道值在模块中导出时的名字  
20import { x as myx } from 'test.js' // 改名字  
21import x from 'test.js' // 默认导出的引用方式  

注意

1. export default在同一个文件中只可存在一个（一个模块只能有一个默认输出）
2. 一个模块中可以同时使用export default 和 export

复制
1// 模块 test.js
2var info = {  
3  name: 'name',  
4  age: 18  
5}  
6export default info  
7export var name= '海洋饼干'  
8export var age = 18  
9
10// 引用  
11import person, {name, age as myAge} from 'test.js'  
12console.log(person); // { name: 'name', age: 18 }  
13console.log(name+ '=' + myAge); // 海洋饼干=18