前端模块化的演进过程

CommonJS

• 服务端模块化规范
• 通过 require 方法同步加载依赖模块
• 通过 module.export 导出模块

// 导出
var num = 0;
function add(a,b) {return a + b;}
module.export = {
  num: num,
  add: add
}

// 导入
var math = require('./math');
math.add(1,2); // 3

• 缺点：因同步加载模块，受限于网络条件，会阻塞代码加载，在客户端上体验较差

AMD（require.js）

• 异步加载模块，不会浏览器加载
• 依赖相关模块的语句，会在模块加载完成后的回调函数里运行
• 库函数为 require.js，通过 define 方法定义模块

// 定义模块
define('math',['jquery'],function(jquery) { // math 依赖 jquery 模块
  return {add: funtion(x,y) {return x + y;}
  }
})

// 导入模块
require(['math'],function(math) {math.add(1,2);
})

CMD（sea.js）

• 集 CommonJS 与 AMD 所长（正如其名：海纳百川）
• 使用 define 定义模块
• 使用 exports 导出方法
• 使用 require 导入依赖
• 使用 seajs.use 使用模块

// 定义模块，导出属性 / 方法
define(function(require,exports,module) {var add = function(a,b) {return a + b;}
  exports.add = add;
})
// 导入并使用模块
seajs.use(['math.js'],function(math) {var sum = math.add(1,2)
})

AMD vs. CMD
AMD：依赖前置，提前执行（预执行）— 定义模块时就要 require
CMD：依赖就近，延迟执行（懒执行）— 使用模块时才会 require

ES6 Module

• 语言层面上的模块化，通用的模块化解决方案
• 使用 import 导入模块
• 使用 export 导出模块
• 默认导出为 export default
• 导入 default 时，不需要使用大括号

// 导出 math.js
var num = 0;
var add = function(a,b) {return a + b;}
export {num, add}

// 导入 math.js
import {num, add} from './math'
function sum(base) {return add(num,base)
}

// 默认导出
export default function add(a, b) {return a + b;}

// 导入默认
import add from './math'
// 同时导入默认及非默认
import add, {sub, mul} from './math'

// 复合导出
export {foo, bar} from 'my_module';
// 等同于
import {foo, bar} from 'my_module';
export {foo, bar};

// 导入改名
import {myFoo as Foo} from 'my_module'
// 全部导入
import * as someIdentifier from "someModule";