ECMAScript 2019 (ES10) 中的静态导入和导出：用法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 (ES10) 中，我们迎来了一项新的特性：静态导入和导出。这项特性使得我们可以更加方便地管理模块之间的依赖关系，同时也提高了代码的可读性和可维护性。本文将详细讲解静态导入和导出的用法，带领读者深入了解这项新特性，以便更好地应用到实际项目中。

静态导入

静态导入是指在模块中使用 import 关键字来导入其他模块的功能。它的语法如下：

import { name1, name2 } from './module';

其中，name1 和 name2 是要导入的功能的名称，./module 是要导入的模块的相对路径。需要注意的是，这里的路径必须是相对于当前模块的路径，而不是相对于 HTML 文件的路径。

静态导入支持以下几种语法：

导入默认导出

如果一个模块使用了 export default 导出了一个默认的功能，我们可以使用以下语法来导入它：

import name from './module';

其中，name 是我们给默认导出的功能起的名称。

导入所有导出

如果我们需要导入一个模块中的所有导出，我们可以使用以下语法：

import * as module from './module';

其中，module 是我们给导入的模块起的名称。这样，我们就可以通过 module.name1 和 module.name2 来使用模块中导出的所有功能。

动态导入

除了静态导入之外，ES10 还引入了动态导入，它允许我们在运行时根据需要加载模块。动态导入的语法如下：

import('./module').then(module => {
  // 使用 module 中导出的功能
});

其中，./module 是要加载的模块的相对路径。需要注意的是，动态导入返回的是一个 Promise 对象，我们需要通过 .then() 方法来获取加载后的模块。

静态导出

静态导出是指在模块中使用 export 关键字来导出模块的功能。它的语法如下：

export { name1, name2 };

其中，name1 和 name2 是要导出的功能的名称。需要注意的是，这里的名称必须与实际的功能名称相同。

静态导出支持以下几种语法：

导出默认功能

如果我们想要导出一个默认的功能，我们可以使用以下语法：

export default name;

其中，name 是要导出的默认功能。

重命名导出

如果我们想要给导出的功能起一个不同的名称，我们可以使用以下语法：

export { name1 as newName1, name2 as newName2 };

其中，name1 和 name2 是要导出的功能的名称，newName1 和 newName2 是要给它们起的新名称。

示例代码

下面是一个使用静态导入和导出的示例代码：

// javascriptcn.com 代码示例
// moduleA.js
export const name = 'Alice';
export const age = 18;
export default {
  sayHi() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

// moduleB.js
import { name, age } from './moduleA';
console.log(`My name is ${name}, I'm ${age} years old.`);

import person from './moduleA';
person.sayHi();

在这个示例代码中，我们定义了两个模块 moduleA.js 和 moduleB.js，并在 moduleA.js 中导出了两个功能 name 和 age，以及一个默认的功能 person。在 moduleB.js 中，我们使用静态导入来导入 moduleA.js 中导出的 name 和 age，以及默认的功能 person。最后，我们使用 person.sayHi() 来调用默认的功能。

总结

静态导入和导出是 ECMAScript 2019 (ES10) 中的一个重要特性，它使得我们可以更加方便地管理模块之间的依赖关系，提高了代码的可读性和可维护性。本文详细讲解了静态导入和导出的语法和用法，并给出了示例代码，希望能够帮助读者更好地理解和应用这项新特性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6507b2b295b1f8cacd2f4286