【读书笔记】ES6之模块

模块简述

模块（Modules）是使用不同方式加载的 JS 文件（与 JS 原先的脚本加载方式相对）。这种不同模式很有必要，因为它与脚本（script）有大大不同的语义：

模块代码自动运行在严格模式下，并且没有任何办法跳出严格模式；
在模块的顶级作用域创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域的内部存在；
模块顶级作用域的 this 值为 undefined；
模块不允许在代码中使用 HTML 风格的注释（这是 JS 来自于早期浏览器的历史遗留特性）；
对于需要让模块外部代码访问的内容，模块必须导出它们；
允许模块从其他模块导入绑定。

ES6 模块语法

静态加载

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

1
2
3
4
5
6
7
8

上面代码的实质是整体加载 fs 模块（即加载 fs 的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

除了静态加载带来的各种好处，ES6 模块还有以下好处。

不再需要 UMD 模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者 navigator 对象的属性。
不再需要对象作为命名空间（比如 Math 对象），未来这些功能可以通过模块提供。

严格模式

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

严格模式主要有以下限制:
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用 with 语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量 delete prop，会报错，只能删除属性 delete global[prop]
eval 不会在它的外层作用域引入变量
eval 和 arguments 不能被重新赋值
arguments 不会自动反映函数参数的变化
不能使用 arguments.callee
不能使用 arguments.caller
禁止 this 指向全局对象
不能使用 fn.caller 和 fn.arguments 获取函数调用的堆栈
增加了保留字（比如 protected、static 和 interface）

其中，尤其需要注意 this 的限制。ES6 模块之中，顶层的 this 指向 undefined，即不应该在顶层代码使用 this。

export 命令

基本导出

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，最简单方法就是将 export 放置在任意变量、函数或类声明之前，从模块中将它们公开出去。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//或者
export {firstName, lastName, year};

1
2
3
4
5
6

上面代码在 export 命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在 var 语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 export 命令除了输出变量，还可以输出函数或类（class）。

需要特别注意的是，export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错
export 1;

// 报错
var m = 1;
export m;

1
2
3
4
5
6

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量 m，还是直接输出 1。1 只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

1
2
3
4
5
6
7
8
9
10

同样的，function 和 class 的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

1
2
3
4
5
6
7
8
9
10

另外，export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => (foo = 'baz'), 500);

1
2

上面代码输出变量 foo，值为 bar，500 毫秒之后变成 baz。

最后，export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的 import 命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

重命名导出

通常情况下，export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

1
2
3
4
5
6
7
8

import 命令

基本导入

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

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

1
2
3
4
5
6

上面代码的 import 命令，用于加载 profile.js 文件，并从中输入变量。import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

import 命令输入的变量都是只读的，因为它的本质是输入接口。输入的变量指向的地址是只读的，不能重新赋值.也就是说，不允许在加载模块的脚本里面，改写接口。

import { a } from './xxx.js';

a = {}; // Syntax Error : 'a' is read-only;
a.foo = 'hello'; // 合法操作

1
2
3
4

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js 后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

注意，import 命令具有提升效果，会提升到整个模块的头部，首先执行。这种行为的本质是，import 命令是编译阶段执行的，在代码运行之前。

foo();

import { foo } from 'my_module';

1
2
3

由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

1
2
3
4
5
6
7
8
9
10
11
12
13

最后，import 语句会执行所加载的模块，因此可以有下面的写法。如果多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。

import 'lodash';

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';

1
2
3
4
5

上面代码仅仅执行 lodash 模块，但是不输入任何值。

重命名导入

如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

完全导入一个模块

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

1
2
3
4

注意，模块整体加载所在的那个对象（上例是 circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function() {};

1
2
3
4
5

export default 命令

将一个函数作为默认值进行了导出，default 关键字标明了这是一个默认导出。此函数并不需要有名称，因为它就代表这个模块自身。其他模块加载该模块时，import 命令可以为该匿名函数指定任意名字。

// export-default.js
export default function() {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

1
2
3
4
5
6
7
8

一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default 命令。

// modules.js
function add(x, y) {
  return x * y;
}
export { add as default };
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

1
2
3
4
5
6
7
8
9
10
11
12

正是因为 export default 命令其实只是输出一个叫做 default 的变量，所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

1
2
3
4
5
6
7
8
9

同样地，因为 export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后。

// 正确
export default 42;

// 报错
export 42;

1
2
3
4
5

如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样。

import _, { each, forEach } from 'lodash';

绑定的再导出

如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

// 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

//默认接口的写法如下。
export { default } from 'foo';

//具名接口改为默认接口
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;

//默认接口也可以改名为具名接口
export { default as es6 } from './someModule';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

下面三种 import 语句，没有对应的复合写法。

import * as someIdentifier from 'someModule';
import someIdentifier from 'someModule';
import someIdentifier, { namedIdentifier } from 'someModule';

1
2
3

为了做到形式的对称，现在有提案，提出补上这三种复合写法。

export * as someIdentifier from "someModule";
export someIdentifier from "someModule";
export someIdentifier, { namedIdentifier } from "someModule";

1
2
3

跨模块常量

const 声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};

// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];

// constants/index.js
export {db} from './db';
export {users} from './users';

// script.js
import {db, users} from './constants/index';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import()

基本语法

前面介绍过，import 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import 命令叫做“连接” binding 其实更合适）。

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果 import 命令要取代 Node 的 require 方法，这就形成了一个障碍。因为 require 是运行时加载模块，import 命令无法取代 require 的动态加载功能。因此，有一个提案，建议引入 import()函数，完成动态加载。

import(specifier);

上面代码中，import 函数的参数 specifier，指定所要加载的模块的位置。import 命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

1
2
3
4
5
6
7
8
9

import()加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js').then(({ export1, export2 }) => {
  // ...·
});

1
2
3

如果模块有 default 输出接口，可以用参数直接获得。

import('./myModule.js').then(myModule => {
  console.log(myModule.default);
});
//或者
import('./myModule.js').then(({ default: theDefault }) => {
  console.log(theDefault);
});

1
2
3
4
5
6
7

如果想同时加载多个模块，可以采用下面的写法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

1
2
3
4
5
6
7
8

import()也可以用在 async 函数之中。

async function main() {
  const myModule = await import('./myModule.js');
  const { export1, export2 } = await import('./myModule.js');
  const [module1, module2, module3] = await Promise.all([
    import('./module1.js'),
    import('./module2.js'),
    import('./module3.js')
  ]);
}
main();

1
2
3
4
5
6
7
8
9
10

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。import()类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

适用场合

按需加载

import()可以在需要的时候，再加载某个模块。

button.addEventListener('click', event => {
  import('./dialogBox.js')
    .then(dialogBox => {
      dialogBox.open();
    })
    .catch(error => {
      /* Error handling */
    });
});

1
2
3
4
5
6
7
8
9

条件加载

import()可以放在 if 代码块，根据不同的情况，加载不同的模块。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

1
2
3
4
5

动态的模块路径

import()允许模块路径动态生成。

import(f())
.then(...);

1
2

在 Web 浏览器中使用模块

脚本异步加载

即使在 ES6 之前，web 浏览器都有多种方式在 web 应用中加载 JS。这些可能的脚本加载选择是：

使用<script>元素以及 src 属性来指定代码加载的位置，以便加载 JS 代码文件；
使用<script>元素但不使用 src 属性，来嵌入内联的 JS 代码；
加载 JS 代码文件并作为 Worker（例如 Web Worker 或 Service Worker）来执行。

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

1
2

defer 与 async 的区别是：

defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer 是“渲染完再执行”，async 是“下载完就执行”。
另外，如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的。

在 script 标签中使用模块

浏览器加载 ES6 模块，也使用 script 标签，但是要加入 type="module"属性。

<script type="module" src="./foo.js"></script>

浏览器对于带有 type="module"的< script >，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了 script 标签的 defer 属性。如果网页有多个< script type="module">，它们会按照在页面出现的顺序依次执行。

<script type="module" src="./foo.js"></script>
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

1
2
3

< script >标签的 async 属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

<script type="module" src="./foo.js" async></script>

一旦使用了 async 属性，< script type="module" >就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。

ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。

<script type="module">
  import utils from './utils.js';

  // other code
</script>

1
2
3
4
5

对于外部的模块脚本（上例是 foo.js），有几点需要注意。

代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
模块脚本自动采用严格模式，不管有没有声明 use strict。
模块之中，可以使用 import 命令加载其他模块（.js 后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用 export 命令输出对外接口。
模块之中，顶层的 this 关键字返回 undefined，而不是指向 window。也就是说，在模块顶层使用 this 关键字，是无意义的。
同一个模块如果加载多次，将只执行一次。

ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

// main.js
var mod = require('./lib');

console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

1
2
3
4
5
6

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

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  get counter() {
    return counter;
  },
  incCounter: incCounter
};

1
2
3
4
5
6
7
8
9
10
11

最后，export 通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例

// mod.js
function C() {
  this.sum = 0;
  this.add = function() {
    this.sum += 1;
  };
  this.show = function() {
    console.log(this.sum);
  };
}

export let c = new C();

// x.js
import { c } from './mod';
c.add();

// y.js
import { c } from './mod';
c.show();

// main.js
import './x';
import './y';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Node 的 ES6 模块

基本规则

Node 对 ES6 模块的处理比较麻烦，因为它有自己的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。

Node 要求 ES6 模块采用.mjs 后缀文件名。也就是说，只要脚本文件里面使用 import 或者 export 命令，那么就必须采用.mjs 后缀名。require 命令不能加载.mjs 文件，会报错，只有 import 命令才可以加载.mjs 文件。反过来，.mjs 文件里面也不能使用 require 命令，必须使用 import。

目前，这项功能还在试验阶段。安装 Node v8.5.0 或以上版本，要用--experimental-modules 参数才能打开该功能。

node --experimental-modules my-app.mjs

为了与浏览器的 import 加载规则相同，Node 的.mjs 文件支持 URL 路径。目前，Node 的 import 命令只支持加载本地模块（file:协议），不支持加载远程模块。

import './foo?query=1'; // 加载 ./foo 传入参数 ?query=1

上面代码中，脚本路径带有参数?query=1，Node 会按 URL 规则解读。同一个脚本只要参数不同，就会被加载多次，并且保存成不同的缓存。由于这个原因，只要文件名中含有:、%、#、?等特殊字符，最好对这些字符进行转义。

目前，Node 的 import 命令只支持加载本地模块（file:协议），不支持加载远程模块。

import 'baz';
import 'abc/123';

1
2

如果模块名包含路径，那么 import 命令会按照路径去寻找这个名字的脚本文件。

import 'file:///etc/config/app.json';
import './foo';
import './foo?search';
import '../bar';
import '/baz';

1
2
3
4
5

如果脚本文件省略了后缀名，比如 import './foo'，Node 会依次尝试四个后缀名：./foo.mjs、./foo.js、./foo.json、./foo.node。如果这些脚本文件都不存在，Node 就会去加载./foo/package.json 的 main 字段指定的脚本。如果./foo/package.json 不存在或者没有 main 字段，那么就会依次加载./foo/index.mjs、./foo/index.js、./foo/index.json、./foo/index.node。如果以上四个文件还是都不存在，就会抛出错误。

最后，Node 的 import 命令是异步加载，这一点与浏览器的处理方法相同。

缺失的内部变量

ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。

首先，就是 this 关键字。ES6 模块之中，顶层的 this 指向 undefined；CommonJS 模块的顶层 this 指向当前模块，这是两者的一个重大差异。

其次，以下这些顶层变量在 ES6 模块之中都是不存在的。

arguments
require
module
exports
__filename
__dirname

如果你一定要使用这些变量，有一个变通方法，就是写一个 CommonJS 模块输出这些变量，然后再用 ES6 模块加载这个 CommonJS 模块。但是这样一来，该 ES6 模块就不能直接用于浏览器环境了，所以不推荐这样做。

// expose.js
module.exports = { __dirname };

// use.mjs
import expose from './expose.js';
const { __dirname } = expose;

1
2
3
4
5
6

ES6 模块加载 CommonJS 模块

CommonJS 模块的输出都定义在 module.exports 这个属性上面。Node 的 import 命令加载 CommonJS 模块，Node 会自动将 module.exports 属性，当作模块的默认输出，即等同于 export default xxx。

// a.js
module.exports = {
  foo: 'hello',
  bar: 'world'
};

// 等同于
export default {
  foo: 'hello',
  bar: 'world'
};

1
2
3
4
5
6
7
8
9
10
11

即 import 命令实际上输入的是这样一个对象{ default: module.exports}。所以，一共有三种写法，可以拿到 CommonJS 模块的 module.exports。

// 写法一
import baz from './a';
// baz = {foo: 'hello', bar: 'world'};

// 写法二
import { default as baz } from './a';
// baz = {foo: 'hello', bar: 'world'};

// 写法三
import * as baz from './a';
// baz = {
//   get default() {return module.exports;},
//   get foo() {return this.default.foo}.bind(baz),
//   get bar() {return this.default.bar}.bind(baz)
// }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// c.js
module.exports = function two() {
  return 2;
};

// es.js
import foo from './c';
foo(); // 2

import * as bar from './c';
bar.default(); // 2
bar(); // throws, bar is not a function

1
2
3
4
5
6
7
8
9
10
11
12

上面代码中，bar 本身是一个对象，不能当作函数调用，只能通过 bar.default 调用。

CommonJS 模块的输出缓存机制，在 ES6 加载方式下依然有效。

// foo.js
module.exports = 123;
setTimeout(_ => (module.exports = null));

1
2
3

上面代码中，对于加载 foo.js 的脚本，module.exports 将一直是 123，而不会变成 null。

由于 ES6 模块是编译时确定输出接口，CommonJS 模块是运行时确定输出接口，所以采用 import 命令加载 CommonJS 模块时，不允许采用下面的写法。

// 不正确
import { readFile } from 'fs';

// 正确的写法一
import * as express from 'express';
const app = express.default();

// 正确的写法二
import express from 'express';
const app = express();

1
2
3
4
5
6
7
8
9
10

CommonJS 模块加载 ES6 模块

CommonJS 模块加载 ES6 模块，不能使用 require 命令，而要使用 import()函数。ES6 模块的所有输出接口，会成为输入对象的属性。

// es.mjs
let foo = { bar: 'my-default' };
export default foo;

// cjs.js
const es_namespace = await import('./es.mjs');
// es_namespace = {
//   get default() {
//     ...
//   }
// }
console.log(es_namespace.default);
// { bar:'my-default' }

1
2
3
4
5
6
7
8
9
10
11
12
13

// es.js
export let foo = { bar: 'my-default' };
export { foo as bar };
export function f() {}
export class c {}

// cjs.js
const es_namespace = await import('./es');
// es_namespace = {
//   get foo() {return foo;}
//   get bar() {return foo;}
//   get f() {return f;}
//   get c() {return c;}
// }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

循环加载

“循环加载”（circular dependency）指的是，a 脚本的执行依赖 b 脚本，而 b 脚本的执行又依赖 a 脚本。

// a.js
var b = require('b');
// b.js
var a = require('a');

1
2
3
4

CommonJS 模块的循环加载

CommonJS 模块的加载原理

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

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

1
2
3
4
5
6

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

CommonJS 模块的解决方案

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

//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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

执行 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

1
2
3
4
5
6
7

上面的代码证明了两件事。一是，在 b.js 之中，a.js 没有执行完毕，只执行了第一行。二是，main.js 执行到第二行时，不会再次执行 b.js，而是输出缓存的 b.js 的执行结果，即它的第四行。

另外，由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。

var a = require('a'); // 安全的写法
var foo = require('a').foo; // 危险的写法

exports.good = function(arg) {
  return a.foo('good', arg); // 使用的是 a.foo 的最新值
};

exports.bad = function(arg) {
  return foo('bad', arg); // 使用的是一个部分加载时的值
};

1
2
3
4
5
6
7
8
9
10

上面代码中，如果发生循环加载，require('a').foo 的值很可能后面会被改写，改用 require('a')会更保险一点。

ES6 模块的循环加载

ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用 import 从一个模块加载变量（即 import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

// 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';

1
2
3
4
5
6
7
8
9
10
11

上面代码中，a.mjs 加载 b.mjs，b.mjs 又加载 a.mjs，构成循环加载。执行 a.mjs，结果如下。

$ node --experimental-modules a.mjs
b.mjs
ReferenceError: foo is not defined

1
2
3

首先，执行 a.mjs 以后，引擎发现它加载了 b.mjs，因此会优先执行 b.mjs，然后再执行 a.mjs。接着，执行 b.mjs 的时候，已知它从 a.mjs 输入了 foo 接口，这时不会去执行 a.mjs，而是认为这个接口已经存在了，继续往下执行。执行到第三行 console.log(foo)的时候，才发现这个接口根本没定义，因此报错。

解决这个问题的方法，就是让 b.mjs 运行的时候，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 };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这时再执行 a.mjs 就可以得到预期结果。

$ node --experimental-modules a.mjs
// b.mjs
// foo
// a.mjs
// bar

1
2
3
4
5

这是因为函数具有提升作用，在执行 import {bar} from './b'时，函数 foo 就已经有定义了，所以 b.mjs 加载的时候不会报错。这也意味着，如果把函数 foo 改写成函数表达式，也会报错.

【读书笔记】ES6之模块

最后更新时间：2019-02-23 00:09:45

模块简述

ES6 模块语法

静态加载

严格模式

export 命令

基本导出

重命名导出

import 命令

基本导入

重命名导入

完全导入一个模块

export default 命令

绑定的再导出

跨模块常量

import()

基本语法

适用场合

按需加载

条件加载

动态的模块路径

在 Web 浏览器中使用模块

脚本异步加载

在 script 标签中使用模块

ES6 模块与 CommonJS 模块的差异

Node 的 ES6 模块

基本规则

缺失的内部变量

ES6 模块加载 CommonJS 模块

CommonJS 模块加载 ES6 模块

循环加载

CommonJS 模块的循环加载

CommonJS 模块的加载原理

CommonJS 模块的解决方案

ES6 模块的循环加载

TOC

【读书笔记】ES6之模块

最后更新时间：2019-02-23 00:09:45

# 模块简述

# ES6 模块语法

# 静态加载

# 严格模式

# export 命令

# 基本导出

# 重命名导出

# import 命令

# 基本导入

# 重命名导入

# 完全导入一个模块

# export default 命令

# 绑定的再导出

# 跨模块常量

# import()

# 基本语法

# 适用场合

# 按需加载

# 条件加载

# 动态的模块路径

# 在 Web 浏览器中使用模块

# 脚本异步加载

# 在 script 标签中使用模块

# ES6 模块与 CommonJS 模块的差异

# Node 的 ES6 模块

# 基本规则

# 缺失的内部变量

# ES6 模块加载 CommonJS 模块

# CommonJS 模块加载 ES6 模块

# 循环加载

# CommonJS 模块的循环加载

# CommonJS 模块的加载原理

# CommonJS 模块的解决方案

# ES6 模块的循环加载

TOC

模块简述

ES6 模块语法

静态加载

严格模式

export 命令

基本导出

重命名导出

import 命令

基本导入

重命名导入

完全导入一个模块

export default 命令

绑定的再导出

跨模块常量

import()

基本语法

适用场合

按需加载

条件加载

动态的模块路径

在 Web 浏览器中使用模块

脚本异步加载

在 script 标签中使用模块

ES6 模块与 CommonJS 模块的差异

Node 的 ES6 模块

基本规则

缺失的内部变量

ES6 模块加载 CommonJS 模块

CommonJS 模块加载 ES6 模块

循环加载

CommonJS 模块的循环加载

CommonJS 模块的加载原理

CommonJS 模块的解决方案

ES6 模块的循环加载