ECMAScript 2020 (ES11) 中的静态 import 和动态 import 详解-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 (ES11) 中， import 语句有了一些重要的更新。其中最重要的更新是引入了两种不同的 import：静态 import 和动态 import。这两种 import 的使用方式和效果有很大的不同，这篇文章将详细解释它们的区别和用法，并提供一些示例代码来帮助读者更好地理解。

静态 import

静态 import 是 ES6 中的一个特性，它允许在代码中引入其他模块中的功能。在 ES11 中，静态 import 的语法并没有发生太大的变化，但是它的功能得到了增强。

基本语法

静态 import 的基本语法如下：

import { func1, func2 } from './module.js';

这个语句的含义是从 ./module.js 模块中导入名为 func1 和 func2 的两个函数。当这个语句被执行时，模块 ./module.js 会被加载并执行，然后将其中导出的 func1 和 func2 函数作为对象返回给当前模块。

动态 import

ES11 中的静态 import 允许在运行时动态加载模块。这种动态加载的方式称为动态 import。动态 import 的语法如下：

import('./module.js').then((module) => {
  // do something with module
});

这个语句的含义是在运行时异步加载 ./module.js 模块，并将加载后的模块作为参数传递给回调函数。回调函数可以在加载完成后执行一些操作，例如调用其中的函数。

import() 函数的返回值

当使用动态 import 加载模块时，import() 函数的返回值是一个 Promise 对象。如果模块加载成功，Promise 对象的状态会变成 resolved，同时传递给回调函数的参数是加载后的模块；如果模块加载失败，Promise 对象的状态会变成 rejected，同时传递给回调函数的参数是一个 Error 对象。

动态 import 的使用场景

动态 import 的使用场景非常丰富。例如，在构建 Web 应用程序时，可以使用动态 import 来按需加载组件和模块，以提高应用程序的性能。另外，在编写桌面应用程序时，可以使用动态 import 来加载插件和扩展，以增强应用程序的功能。

总结

在 ECMAScript 2020 (ES11) 中，静态 import 和动态 import 是两个非常重要的特性。静态 import 可以在代码中引入其他模块中的功能，而动态 import 则可以在运行时动态加载模块。这两种 import 的使用方式和效果有很大的不同，开发者需要根据具体的需求来选择使用哪种 import。

下面是一个示例代码，演示了如何使用静态 import 和动态 import：

// javascriptcn.com 代码示例
// app.js

// 静态 import
import { func1, func2 } from './module.js';

// 动态 import
import('./module.js').then((module) => {
  const { func3 } = module;
  func3();
});

// javascriptcn.com 代码示例
// module.js

export function func1() {
  console.log('func1');
}

export function func2() {
  console.log('func2');
}

export function func3() {
  console.log('func3');
}

这段代码中，app.js 模块中使用了静态 import 和动态 import，分别导入了名为 func1、func2 和 func3 的三个函数。当 app.js 模块被执行时，静态 import 会立即加载和执行 module.js 模块，然后将其中导出的 func1 和 func2 函数作为对象返回给当前模块。而动态 import 则会在运行时异步加载 module.js 模块，并将加载后的模块作为参数传递给回调函数。在回调函数中，我们通过解构赋值将模块中的 func3 函数导入到当前模块中，并调用它。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65604a38d2f5e1655da78d62