ECMAScript 2020 新特性介绍：动态 import-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，引入了一项新特性：动态 import。这个特性可以让开发者在运行时动态地加载模块，而不需要在编译时就将所有模块都加载进来。

动态 import 的使用场景非常广泛，比如在单页面应用中，我们可以在用户需要打开某个页面时，再去加载该页面所需要的模块，而不是在应用初始化时就将所有页面的模块全部加载进来，从而提升应用的性能。

动态 import 的语法

动态 import 的语法非常简单，它可以使用 import() 函数来实现。import() 函数返回一个 Promise 对象，该 Promise 对象会在模块加载完成后被 resolved，从而可以在 then() 方法中获取模块的导出值。

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

在上面的例子中，我们使用 import() 函数来动态加载一个名为 module.js 的模块。当模块加载完成后，我们可以在 then() 方法中获取该模块的导出值，并进行相应的操作。

需要注意的是，由于 import() 函数返回的是一个 Promise 对象，因此我们需要使用 then() 方法来获取模块导出值。同时，由于模块的加载是异步的，因此我们也需要使用 catch() 方法来处理可能出现的错误。

动态 import 的使用示例

下面我们来看一个简单的示例，演示如何使用动态 import 来加载模块。

假设我们有一个应用，其中有两个页面：首页和详情页。我们希望在用户访问详情页时，再去加载详情页所需要的模块，而不是在应用初始化时就将所有页面的模块全部加载进来。为了实现这个功能，我们可以在详情页的 JavaScript 文件中使用动态 import 来加载详情页所需要的模块。

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

import('./detail-module.js')
  .then(module => {
    // do something with module
  })
  .catch(error => {
    // handle error
  });

在上面的例子中，我们使用 import() 函数来动态加载一个名为 detail-module.js 的模块。当模块加载完成后，我们可以在 then() 方法中获取该模块的导出值，并进行相应的操作。比如，我们可以根据模块的导出值来渲染详情页的内容。

总结

动态 import 是 ECMAScript 2020 中的一项新特性，它可以让开发者在运行时动态地加载模块，而不需要在编译时就将所有模块都加载进来。动态 import 的使用场景非常广泛，比如在单页面应用中，我们可以在用户需要打开某个页面时，再去加载该页面所需要的模块，从而提升应用的性能。

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