主流模块规范
目前主流模块规范有：
| 规范名称 | 运行环境 | 实现 | 加载方式 |
|---|---|---|---|
| AMD(异步模块定义) | 客户端 | require.js | 异步 |
| CMD(通用模块定义) | 客户端 | sea.js | 异步 |
| CommonJS | 服务端 | NodeJS | 同步（动态加载） |
| es6 | 客户端 | es6 | 静态加载 |
AMD和CMD(ES5)
AMD 和 CMD 加载多个文件时都是异步加载
区别：
- AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
- CMD推崇就近依赖，只有在用到某个模块的时候再去require
AMD
required.js 是 AMD 的实现
使用：define(id?, dependencies?, factory);;
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
my.printName();
});CMD
sea.js 是 CMD 的实现
CMD 中一个模块就是一个文件
使用：define(id?, dependencies?, factory);;
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});CommonJS(ES5)
CommonJS 模块就是对象，输入时必须查找对象属性。
- CommonJS 的加载称为“运行时加载”或者动态加载
- 一个文件就是一个模块，每个模块都是单独的作用域
特点：
- 所有代码都运行在模块作用域，不会污染全局作用域。
- 模块可以多次加载，但是只在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
- 模块加载的顺序，按照其在代码中出现的顺序。
module.exports
每个模块内部，都有一个module对象，代表当前模块。它有以下属性。
- module.id 模块的识别符，通常是带有绝对路径的模块文件名。
- module.filename 模块的文件名，带有绝对路径。
- module.loaded 返回一个布尔值，表示模块是否已经完成加载。
- module.parent 返回一个对象，表示调用该模块的模块。
- module.children 返回一个数组，表示该模块要用到的其他模块。
- module.exports 表示模块对外输出的值。
module.exports = 123exports
为了方便，Node为每个模块提供一个 exports 变量，指向 module.exports。
注意：
- exports 变量直接指向一个单一值。单一值只能使用 module.exports 输出
// 相当于每个模块顶部都有这个声明
var exports = module.exports;
// 可以给导出的对象添加属性
exports.area = function (r) {
return Math.PI * r * r;
};
// 不可以导出一个单一值
exports = 123; // 无效require
require 命令用于加载模块文件，返回该模块的 exports 对象
Module(ES6)
ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。
- ES6 的模块是“编译时加载”或者静态加载
- ES6 使用基于文件的模块，也就是说一个文件一个模块
- ES6 模块是单例。也就是说，模块只有一个实例，其中维护了它的状态。每次向其他模块导入这个模块的时候，得到的是对单个中心实例的引用。
- ES6 模块的API是静态的。导出后的API是只读状态。
- 模块的公开 API 中暴露的属性和方法并不仅仅是普通的值或引用的赋值。它们是到内部模块定义中的标识符的实际绑定（几乎类似于指针）。
- ES6 的模块自动采用严格模式
优点：
- 编译时加载方法，效率高
- 不再需要对象作为命名空间了
缺点：
- es6模块不是对象，所以无法引用模块本身
export
通过 export 命令规定模块的对外接口。有两种模式：
- 命名导出（可以多个）：export **
- 默认导出（只有一个）：export default
// 导出单个
export let name1 = 1;
// 导出多个
export { name1, name2, ...};
// 重命名导出
export {
name1 as master
}
// 解构导出并重命名
export const { name1, name2: bar } = o;
// 默认导出
export default expression;
export { name1 as default, … };
// 聚合模块 - 输入后立马输出
export * from …; // does not set the default export
export * as name1 from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;import
通过 import 命令加载模块
import是静态的，在编译时就加载import命令会提升到顶部
使用：
- 可导入整个模块内容：使用
*指定一个对象，所有输出值都加载在这个对象上 - 可导入单个接口：使用大括号包裹需引入值
- 可导入多个接口：使用大括号包裹需引入值，多个值用逗号分隔
- 可导入有别名的接口：使用
as可以设置别名 - 执行加载模块：直接
import某个模块，会执行，但不会输入任何值 - 导入默认值：不需要大括号，直接指定任意值。对应模块内的
export default
// 执行 lodash 模块，但不输入任何值
import 'lodash';
// 非默认导出需有大括号。可以使用 as 设置别名
import { firstName as fn, persion } from './profile.js';
// export default 默认导出不需要括号
import class from './class.js';
// 变量不允许改写
fn = 123; // Syntax Error : 'firstName' is read-only;
// 对象属性可以改写 - 不建议
persion.age = 18;动态import
import() 可以实现动态加载
import()可以像调用函数一样动态导入模块，并返回一个promiseimport()支持await关键字import()可以在commonJS 模块中运行
使用场景：
- 不需要马上使用的模块（可用于异步加载，提高性能）
- 需要根据场景判断才引入的模块
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
async getModule() {
if (true) {
let module = await import('/modules/my-module.js');
}
}循环引用/循环加载
"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
// a.js
var b = require('b');
// b.js
var a = require('a');通常，"循环加载"表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行。
如何解决？commonJS 和 Es6 的module 给出了不同的解决方案。
commonJS
commonJS 是动态加载，执行一次就会缓存结果。如果出现某个模块被"循环加载"，返回的是当前已经执行的部分的值，而不是代码全部执行后的值。所以，输入变量时需要非常小心。
a.js
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');b.js
exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);执行main.js
node main.js
在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true
ES6 模块
ES6 是静态加载，不会缓存结果。 它只是生成一个指向被加载模块的引用，每次都会根据引用动态去加载模块取值。
// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar);
export let foo = 'foo';
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo);
export let bar = 'bar';执行
node --experimental-modules a.mjs
b.mjs
ReferenceError: foo is not defined -> 原因: foo未定义。解决：将foo写成函数，使它产生函数提升。函数表达式不行，因为它不能提升
// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' }
export {foo};
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};执行
$ node --experimental-modules a.mjs
b.mjs
foo
a.mjs
bar例子2：
// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
counter++;
return n === 0 || odd(n - 1);
}
// odd.js
import { even } from './even';
export function odd(n) {
return n !== 0 && even(n - 1);
}执行
$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17m.even(20) 执行的时候，此时 counter 已经等于 6，加上自己执行的 11 次，所以一共是 17 次