10. ES6 模块

ES6 模块可用于构建结构化、独立且可重用的 JavaScript 应用程序。

10.1. 脚本 [import-01, export-01]

脚本 [import-01] 将使用模块 [export-01]。该模块定义如下：


// 默认导出未命名的对象
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

注释

[2-7] 行定义了一个具有 [data, do] 属性的无名对象；
第 2 行：指令 [export default] 导出了该对象。因此，该对象可以被导入；

模块 [export-01] 由脚本 [import-01] 以如下方式使用：


'use strict';
// 导入默认导出的对象
import export01 from './export-01';
// 使用该对象
export01.do();
// 可以以任意名称导入默认导出的对象
import data from './export-01';
console.log(data.data);

注释

第 3 行和第 7 行将模块 [export-01] 默认导出的对象以两个不同的名称导入；
导入对象后，即可像在脚本中本地定义一样使用它；

执行


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-01.js"
2
2

10.2. 脚本 [import-02, export-02]

这些脚本展示了对一个命名对象的导出。

脚本 [export-02] 如下：


// 命名对象的默认导出
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// 导出
export default data;

第 9 行：导出对象 [data]；

无论导出的对象是否命名，都不会影响导入操作。脚本 [import-02] 如下：


'use strict';
// 导入默认导出的对象
import module1 from './export-02';
// 使用该对象
module1.do();
// 可以以任意名称导入默认导出
import module2 from './export-02';
console.log(module2.data);

执行


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-02.js"
2
2

10.3. 脚本 [import-03, export-03]

一个模块可以导出多个元素。

脚本 [export-03] 如下：


// 多重导出
// 对象导出
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// 导出函数
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

注释

第 10 行和第 14 行：导出两个元素。导出单个元素使用语法 [export {élément}]；

脚本 [import-03] 以如下方式使用模块 [export-03]：


'use strict';
// 导入模块 [export03]
import {data, doSomething} from './export-03';
// 导入的使用
data.do();
doSomething();
// 另一种写法
import * as module from './export-03';
// 导入的使用
console.log(module.data);
module.doSomething();

第 3 行：[imports] 脚本需使用被导出对象的确切名称；
第 8 行：可将所有导出的对象导入到一个命名对象中（此处为 [module]）；

执行


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-03.js"
2
doSomething
{ data: 2, do: [Function: do] }
doSomething