ECMAScript 2021 是 JavaScript 语言的最新版本，它引入了许多新的特性和语法，其中包括了静态导入与动态导入两种模块导入方式。本文将介绍它们的使用方法、优劣势以及实际应用场景，并附上示例代码，帮助读者更好地理解和掌握这两种导入方式。
静态导入
静态导入是指在编译时期就已经确定了导入的模块和路径，它使用 import 关键字来导入模块。以下是一个基本的静态导入示例代码：
import { add } from './math.js';
console.log(add(2, 3));解释一下上面的代码，首先使用 import 关键字导入了一个名为 add 的函数，它是从 ./math.js 模块中导入的。然后在下一行调用了 add 函数，并将执行结果输出到控制台。
静态导入的优势是它在编译时期就已经确定了导入的模块和路径，这样可以提前加载依赖关系，避免了在运行时再去解析模块。这不仅可以提高代码的性能，还可以提高可维护性和可读性。
动态导入
动态导入是指在运行时期通过代码来动态地导入模块和路径，它使用 import() 函数来导入模块，这个函数返回一个 Promise，可以使用 then() 方法来获取模块导出的内容。以下是一个基本的动态导入示例代码：
const button = document.querySelector('#button');
button.onclick = async () => {
const { createDialog } = await import('./dialog.js');
createDialog('Hello World');
};上面的代码定义了一个 button 元素的点击事件，当用户点击按钮时，它会异步地导入一个名为 createDialog 的函数，并将字符串 'Hello World' 作为参数传递给它。由于 import() 函数返回一个 Promise，需要使用 async/await 关键字来等待导入完成，并获取 createDialog 函数的导出值。
动态导入的优势是它可以在运行时动态地加载模块和路径，这样可以提高代码的灵活性和可扩展性。另外，动态导入还可以实现按需加载和代码分离，从而提高应用的加载速度和性能。
实际应用场景
我们可以使用静态导入和动态导入来满足不同的应用场景和需求。
静态导入适用于在编译时期就已经知道要导入哪些模块和路径的情况，比如导入常用的库、框架、工具等。我们可以在模块的头部使用 import 关键字来导入这些模块，然后在代码中使用它们提供的 API。
动态导入适用于在运行时期根据某些条件或用户行为来动态地加载模块和路径的情况，比如按需加载某个模块、懒加载某个组件或路由等。我们可以使用 import() 函数来异步地导入这些模块，然后使用 Promise 的 then() 方法来获取模块的导出值。
总结
静态导入和动态导入是 ECMAScript 2021 中新增的两种模块导入方式，它们都有各自的优势和应用场景。静态导入适用于编译时期就已知导入模块和路径的情况，可以提高代码的性能、可维护性和可读性；动态导入适用于运行时期需要动态加载模块和路径的情况，可以提高代码的灵活性、可扩展性和加载速度。我们可以根据实际需求选择适合的导入方式，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64729d07968c7c53b00412ba