-
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";
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。