Fork me on GitHub

ES6模块化

发表于 | 分类于
字数统计: 4,190 | 阅读时长 ≈ 17
ES6在语言规格的层面上实现了模块功能，而且实现的相当简单，完全可以成为浏览器和服务器通用的模块解决方案

Modules in JavaScript

模块化是指将一个复杂的系统分解为多个模块以方便编码。当项目变大时，需要用模块化的思想来组织代码。

在ES6之前，对于模块（module）系统是没有明确的语言支持的，无法将一个大程序拆分成互相依赖的小文件。令人印象深刻的是社区制定了两种主要的模块化规范：CommonJS和AMD，前者用于服务器，后者用于浏览器。

ES6模块化提出之后，实现了模块功能而起相当简单，逐渐取代之前的两种规范，因为它同时具有CommonJS简练的语法（for single exports and support for cyclic dependencies）和AMD的可异步加载依赖。并且具有在语法上比CommonJS更简练、更支持循环依赖等优点。

export

export的具体用法参照这里，其实就两种export：named exports (several per module) and default exports (one per module)，从一个模块里可以有多个不同命名的exports输出，但是只有一个default export。

Named export (several per module)

一个模块输出多个exports

1
2
3
4
5
6
7
8
9
10
11
12
13
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

符号*代表所有模块所以main.js也可以改成：

1
2
3
4
//------- main.js -----
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Default exports (one per module)

export default命令用于制定模块的默认输出，一个模块只能有一个默认输出，因此export default只能使用一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
//------ myFunc.js ------
export default function () {} // no semicolon!
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
//------ MyClass.js ------
export default class {} // no semicolon!
//------ main2.js ------
import MyClass from 'MyClass';
const inst = new MyClass();

要注意:export default…后面没有分号！

原理：默认导出可以理解为宁一种形式的命名导出，它使用的名称叫default。

export default主要的两种风格

1.元素声明（Labeling declarations）

2.直接输出值（Default-exporting values directly）

第一种风格：边声明边输出

1
2
3
4
5
6
7
export default function foo() {} // no semicolon!
export default class Bar {} // no semicolon!
// 加载时都视为匿名函数
//或者使用匿名函数
export default function () {} // no semicolon!
export default class {} // no semicolon!

第二种风格：直接输出值

（这些值都是经由表达式产生）

1
2
3
4
5
export default 'abc';
export default foo();
export default /^xyz$/;
export default 5 * 7;
export default { no: false, yes: true };

1
2
// 格式：
export default «expression»;

import

使用export命令定义了模块的对外接口之后，其他js文件就可以通过import命令加载这个模块。

命名式输入

1
2
3
import {变量1, 变量2, ...} from 'url';
import {变量名 as 重命名} from 'url';
// 变量名必须和被导入的变量名相同

默认输入

1
2
import 任意变量名 from 'url';
// 因为只可能有一个默认输出，所以不需要知道原模型输出的函数名或变量名，而且不使用大括号

同时存在命名式和默认式

1
import defaultName, {otherName} from 'url'

必须在模块的最高作用域imports或者export
ES6的模块是静态结构，它的模块思想是尽量静态化，使得在编译时就能确定模块的依赖关系以及输入和输出的变量。所以不能在if语句后面export或者import东西，否则会报错，所以你必须在一个模块的最外层作用于使用export或者import。

1
2
3
4
5
6
7
8
9
if (Math.random()) {
    import 'foo'; // SyntaxError
}
// You can’t even nest `import` and `export`
// inside a simple block:
{
    import 'foo'; // SyntaxError
}

如果你在{}内引用了import或者export，经测试,报错结果是”You can’t even nest import and export“

Overview of ES6 modules syntax

code meaning code meaning
export const ninja = “yoshi”; 命名式导出变量 import ninja from “ninja.js” 导入一个默认命名的变量
export function compare(){} 命名式导出函数 import {ninja, Ninja} from “ninja.js” 导入命名式导出的变量
export class Ninja{} 命名式导出类 import * as Ninja from “ninja.js” 导入模块中所有的命名式导出的变量
import {ninja as iNinja} from “ninja.js” 导入一个命名式变量并重新命名
export default class Ninja{} 默认导出类 import ninja, {otherNinja} from “ninja.js” 同时导入默认和命名式变量
export default function Ninja(){} 默认导出函数
export ninja = “yoshi”; function compare(){}; export {ninja, compare}; 导出存在的变量
export {ninja as samurai, compare} 利用as关键字给变量重新命名

模块输出方式

CS6的模块加载机制和CommonJS模块完全不同。CommomJS模块输出的式一个值的拷贝，而ES6模块输入是export的动态只读视图（live read-only views）。这句话有点难以理解，反正就记住它是动态的引用，而且不可修改

CommonJS模块输入的是被输出值的拷贝

如果你输入一个值赋给一个变量，这个值会拷贝两次：export一次(A)，import一次(B)。

1
2
3
4
5
6
7
8
9
//------ lib.js ------
var counter = 3;
function incCounter() {
    counter++;
}
module.exports = {
    counter: counter, // (A)
    incCounter: incCounter,
};

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块。

1
2
3
4
5
6
7
8
9
10
11
12
//------ main1.js ------
var counter = require('./lib').counter; // (B)
var incCounter = require('./lib').incCounter;
// The imported value is a (disconnected) copy of a copy
console.log(counter); // 3
incCounter();
console.log(counter); // 3
// The imported value can be changed
counter++;
console.log(counter); // 4

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

小练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// a.js
var b = require('./b');
console.log("0ms——我是a.js,我的foo="+b.foo);
setTimeout(() => {
  console.log("1000ms——我是a.js,我的foo="+b.foo);
  var b1 = require('./b')
  console.log("1000ms——我是a.js,当我再次require后,我的foo="+b.foo);
}, 1000);
// b.js
let foo = 1;
setTimeout(() => {
  foo = 2;
  console.log("500ms——我是b.js,我还没有执行完，现在我的foo="+foo)
}, 500);
module.exports = {
  foo: foo,
};
console.log("0ms——我是b.js,我开始执行了，现在我的foo="+foo)

解答过程

ES6的输入是export的动态可读引用

ES6的模块运行机制是：遇到import命令不会去执行模块，只会生成一个动态的只读引用(不能被修改)，等到真的需要了再到模块中取值。因此，他是动态引用并且不会缓存值，模块里面的变量绑定其所在的模块。
这里说的引用该如何理解，个人认为可以参考下面的连接（有相似之处）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}
//------ main1.js ------
import { counter, incCounter } from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
// The imported value can’t be changed
counter++; // TypeError

由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。
注意：尽管不能改变输入进来的值，但是可以改变他们所引用的对象。例如：

1
2
3
4
5
6
7
8
//------ lib.js ------
export let obj = {};
//------ main.js ------
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。

小练习

1
2
3
4
5
6
7
8
9
10
11
12
// a.js
import {foo} from './b.js'
console.log(foo)
setTimeout(() => {
    console.log(foo)
},1000)
// b.js
export var foo = 'bar'
setTimeout(() => {
    foo = 'baz'
},500)

解答

循环依赖

如果模块A引入了模块B而且B也引入了A，那么就称这两个模块互相循环依赖
通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。

但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑“循环加载”的情况。

对于 JavaScript 语言来说，目前最常见的两种模块格式 CommonJS 和 ES6，处理“循环加载”的方法是不一样的，返回的结果也不一样。

要搞清楚CommonJS 和 ES6怎么处理“循环加载”，就得先弄理解他们的加载原理和特性。之后根据这些特性可以推导出循环加载的过程。

模块特性

ES6 模块跟 CommonJS 模块的不同，主要有以下两个方面：

  • ES6 模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝
  • ES6 模块编译时执行，而 CommonJS 模块总是在运行时加载

相同之处是：

  • 模块不会重复执行

CommonJS

加载原理

CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

1
2
3
4
5
6
{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

上面代码就是 Node 内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。

以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

CommonJS 模块的循环加载

CommonJS 模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

看一个来自node官方文档的例子。

1
2
3
4
5
6
// 脚本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 执行完毕');
1
2
3
4
5
6
// 脚本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 执行完毕');
1
2
3
4
// 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 a.js b.js 说明
1 var a = require(‘./a.js’); 出现reauire， 开始执行全部的a.js
2 exports.done = false; var b = require(‘./b.js’); a.js脚本先输出一个done变量， 然后加载另一个脚本文件b.js。 注意，此时a.js代码就停在这里， 等待b.js执行完毕，再往下执行。
3 exports.done = false; var a = require(‘./a.js’); b.js执行到第二行，require(‘./a.js’)，这时，b模块想引入a模块，因为 node 之前已经加载过 a 模块了，所以它不会再去重复执行 a 模块，而是直接去生成当前 a 模块吐出的 module.exports 对象。因为a.js还没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。这个值就是false。
4 console.log(‘在 b.js 之中，a.done = %j’, a.done); exports.done = true; console.log(‘b.js 执行完毕’); b.js接着往下执行，（a.done值为false）等到全部执行完毕，再把执行权交还给a.js。
5 console.log(‘在 a.js 之中，b.done = %j’, b.done); exports.done = true; console.log(‘a.js 执行完毕’); b已经执行完，且最后输出的值是true。 所以这时输出的b.done=true a也执行完毕，对外输出的值是true，接下来到main.js
6 var b = require(‘./b.js’); 因为模块不会重复执行。 main.js执行到第二行时，不会再次执行b.js，而是输出缓存的b.js的执行结果，即它的第四行。
7 console.log(‘在 main.js 之中, a.done=%j, b.done=%j’, a.done, b.done); a.done和b.done均为true

小练习

执行a.js后的结果？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// a.js
console.log('a starting');
exports.done = false;
const b = require('./b');
console.log('in a, b.done =', b.done);
exports.done = true;
console.log('a done');
// b.js
console.log('b starting');
exports.done = false;
const a = require('./a');
console.log('in b, a.done =', a.done);
exports.done = true;
console.log('b done');

具体解答

从上面的执行过程中，我们可以看到，在 CommonJS 规范中，当遇到 require() 语句时，会执行 require 模块中的代码，并缓存执行的结果，当下次再次加载时不会重复执行，而是直接取缓存的结果。正因为此，出现循环依赖时才不会出现无限循环调用的情况。虽然这种模块加载机制可以避免出现循环依赖时报错的情况，但稍不注意就很可能使得代码并不是像我们想象的那样去执行。因此在写代码时还是需要仔细的规划，以保证循环模块的依赖能正确工作。

所以有什么办法可以出现循环依赖的时候避免自己出现混乱呢？一种解决方式便是将每个模块先写 exports 语法，再写 requre 语句，利用 CommonJS 的缓存机制，在 require() 其他模块之前先把自身要导出的内容导出，这样就能保证其他模块在使用时可以取到正确的值。比如：

1
2
3
4
5
6
7
8
9
// a.js
exports.done = true;
let b = require('./b');
console.log(b.done)
// b.js
exports.done = true;
let a = require('./a');
console.log(a.done)

ES6

加载原理

  • ES6 模块是动态引用，如果使用import从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用。

  • ES6 模块静态编译，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

  • 模块不会重复执行

关于静态编译，会导致以下两个特点
  1. import 命令会被 JavaScript 引擎静态分析，优先于模块内的其他内容执行。
  2. export 命令会有变量声明提前的效果。

import 优先执行:

从第一条来看，在文件中的任何位置引入 import 模块都会被提前到文件顶部。

1
2
3
4
5
6
7
8
9
10
11
// a.js
console.log('a.js')
import { foo } from './b';
// b.js
export let foo = 1;
console.log('b.js 先执行');
// 执行结果:
// b.js 先执行
// a.js

从执行结果我们可以很直观地看出，虽然 a 模块中 import 引入晚于 console.log(‘a’)，但是它被 JS 引擎通过静态分析，提到模块执行的最前面，优于模块中的其他部分的执行。

export 变量声明提升:

正常的引入模块是没办法看出变量声明提升的特性，需要通过循环依赖加载才能看出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// a.js
import { foo } from './b';
console.log('a.js');
export const bar = 1;
export const bar2 = () => {
  console.log('bar2');
}
export function bar3() {
  console.log('bar3');
}
// b.js
export let foo = 1;
import * as a from './a';
console.log(a);

静态编译后的a模块的执行顺序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// a.js
// export声明变量，先把接口都暴露出去，只声明的变量还是undefined
export const bar;
export const bar2;
// 函数的声明（边声明变赋值）
export function bar3() {
  console.log('bar3');
}
// import会被提前
import { foo } from './b';
console.log('a.js');
// 具体对变量的赋值还需要等到相应代码执行
bar = 1;
bar2 = () => {
  console.log('bar2');
}

静态编译后的a模块的执行顺序：

1
2
3
4
5
6
7
// b.js
// export先声明变量
export let foo；
// import被提前
import * as a from './a';
export let foo = 1;
console.log(a);

按照编译后的执行顺序，可以很简单地判断输出结果了：

1
2
3
// 执行结果:
// { bar: undefined, bar2: undefined, bar3: [Function: bar3] }
// a.js

从上面的例子可以很直观地看出，a 模块引用了 b 模块，b 模块也引用了 a 模块，export 声明的变量也是优于模块其它内容的执行的，但是具体对变量赋值需要等到执行到相应代码的时候。(当然函数声明和表达式声明不一样，这一点跟 JS 函数性质一样，这里就不过多解释)

关于模块不会重复执行，ES6和commonJS是一样的

当你重复引入某个相同的模块时，模块只会执行一次。

1
2
3
4
5
6
7
8
9
// a.js
import './b';
import './b';
// b.js
console.log('只会执行一次');
// 执行结果：
// 只会执行一次

ES6 模块的循环依赖

熟悉了加载特性之后，再遇到循环依赖就很好理解了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// a.js
console.log('a starting')
import {foo} from './b';
console.log('in b, foo:', foo);
export const bar = 2;
console.log('a done');
// b.js
console.log('b starting');
import {bar} from './a';
export const foo = 'foo';
console.log('in a, bar:', bar);
setTimeout(() => {
  console.log('in a, setTimeout bar:', bar);
})
console.log('b done');

a模块和b模块是循环依赖的，思考一下执行a模块的结果吧！具体解答

相关资料

exploringjs

阮一峰

知乎–深入理解 ES6 模块机制

undefined