10. ES6 模块

ES6 模块允许您构建由独立、可重用的模块组成的 JavaScript 应用程序。

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

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


// export par défaut d'un objet non nommé
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

注释

第 [2–7] 行定义了一个名为 [data, do] 的无名对象；
第 2 行：[export default] 语句导出了该对象。因此，该对象可以被导入；

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


'use strict';
// import d'un objet exporté par défaut
import export01 from './export-01';
// utilisation de cet objet
export01.do();
// on peut importer un export par défaut sous n'importe quel nom
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] 脚本如下：


// export par défaut d'un objet nommé
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// export
export default data;

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

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


'use strict';
// import d'un objet exporté par défaut
import module1 from './export-02';
// utilisation de cet objet
module1.do();
// on peut importer un export par défaut sous n'importe quel nom
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] 脚本如下：


// multi-exports
// object export
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// export function
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

注释

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

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


'use strict';
// import d'un module [export03]
import {data, doSomething} from './export-03';
// utilisation des imports
data.do();
doSomething();
// autre écriture
import * as module from './export-03';
// utilisation de l'import
console.log(module.data);
module.doSomething();

第 3 行：[导入] 需使用导出对象的确切名称；
第 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