ECMAScript 2020 中的新的 import() 动态导入

随着前端技术的不断发展，JavaScript 一直在不断地更新和扩展，以满足越来越高的需求。ECMAScript 2020 是 JavaScript 的最新版本，并引入了许多令人兴奋的新特性，其中之一就是 import() 动态导入。

什么是 import() 动态导入？

在过去，JavaScript 中的导入只能在文件的头部使用静态导入方式。但是，当需要在运行时条件下加载一个 JavaScript 模块时，这种方式并不够灵活。

import() 方法允许在运行时动态地加载一个 JavaScript 模块，以提供更灵活的导入方式。当然，这也意味着该模块和其中的依赖项只有在需要的时候才会被加载。

import() 动态导入的使用

使用 import() 方法进行动态导入需要注意以下几点：

1. 动态导入必须在函数体内使用，而不能在模块顶层使用。
2. 动态导入返回一个 Promise 对象，将模块作为其默认导出项传递给回调函数。

下面是一个使用动态导入的示例：

async function loadModule(modulePath) {
  const myModule = await import(modulePath);
  myModule.doSomething();
}

在这个例子中，loadModule 函数使用动态导入从指定的路径加载模块，然后立即调用其 doSomething 方法。注意，await 关键字用于等待模块加载完毕后再继续执行后续代码。

导入命名导出项

动态导入还可以用于导入命名导出项。

async function loadModule(modulePath) {
  const myModule = await import(modulePath);
  const { myExport } = myModule;
}

在这个例子中，我们使用 import() 方法动态导入模块，然后通过解构从中提取出指定的命名导出项。

导入默认导出项

还可以使用 import() 方法导入默认导出项。

async function loadModule(modulePath) {
  const myModule = await import(modulePath);
  const myDefault = myModule.default;
}

在这个例子中，我们使用 import() 方法动态导入模块，然后直接从中提取出默认导出项。

总结

import() 动态导入是 ECMAScript 2020 中引入的一项新特性，它允许在运行时动态地加载一个 JavaScript 模块，以提供更灵活的导入方式。使用动态导入时需要注意一些细节，但是，一旦熟悉了这个特性，就能够大大提高业务代码的灵活性和可维护性。

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