ES12 中的静态导入是 JavaScript 中的一项新特性，它可以让开发者更方便地管理模块依赖，同时还可以提高代码的可读性和模块复用性。在本文中，我们将详细介绍 ES12 中的静态导入，并给出一些示例代码来说明如何使用它。
什么是静态导入？
静态导入是指在编译时就确定要导入的模块，而不是在运行时再去解析依赖关系。在 ES6 中，静态导入是通过引入 import 关键字和 {} 符号来实现的，例如：
import { foo } from "./bar.js";在运行时，这条语句会加载 bar.js 模块，并从中导入 foo 变量，这个过程是动态的。而在 ES12 中，我们可以使用新的 import() 方法来进行静态导入，例如：
const module = await import("./bar.js");这条语句在编译时就会确定要导入的模块，并将其加载进来，而不是在运行时再去解析依赖关系。这个过程是静态的。
ES12 静态导入的优点
使用 ES12 静态导入有如下优点：
更方便地管理模块依赖：静态导入可以一次性导入多个模块并放入同一个数组中，从而简化了模块依赖的管理。
提高代码的可读性：使用动态导入时，代码中的模块加载和导入是分开的，很难直观地看出哪些模块被加载，哪些变量被导入。而静态导入将这两个过程结合在一起，使代码更易于理解。
提高模块复用性：有些模块在运行时并不需要被导入，而是在某些特定的场景下才需要被加载。静态导入可以使这些“懒加载”的模块更容易被复用。
ES12 静态导入的使用
使用 ES12 中的静态导入非常简单，只需要使用 import() 方法即可。下面是一些示例代码：
导入单个模块
如果只需要导入一个模块，可以使用以下代码：
const module = await import("./bar.js");这条语句将会加载 bar.js 模块，并将其保存在 module 变量中。可以根据需要对 module 进行操作。
导入多个模块
如果需要一次性导入多个模块，则可以使用以下代码：
const [module1, module2, module3] = await Promise.all([
import("./module1.js"),
import("./module2.js"),
import("./module3.js")
]);这条语句将会同时加载 module1.js、module2.js 和 module3.js 三个模块，并将它们依次保存在 module1、module2 和 module3 变量中。注意，这里使用了 Promise.all() 方法，确保三个模块都成功加载后再同时对它们进行操作。
导入模块的默认导出
如果一个模块只有一个默认导出，可以使用以下代码来导入：
import module from "./bar.js";
这条语句将会加载 bar.js 模块，并将其默认导出的内容保存在 module 变量中。
导入模块的特定成员
如果一个模块有多个导出，可以使用以下代码来导入特定的成员：
import { foo, bar } from "./bar.js";这条语句将会加载 bar.js 模块，并从中导入名为 foo 和 bar 的成员，并将它们分别保存在 foo 和 bar 变量中。
总结
ES12 中的静态导入让我们更方便地管理模块依赖，提高了代码的可读性和模块复用性。它可以一次性导入多个模块，支持导入默认导出和特定成员，可以用于懒加载等场景。使用静态导入，可以更加优雅地编写代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65474f5e7d4982a6eb1ac21b