在 ECMAScript 2020 中，我们可以使用 import() 方法动态地加载模块。这个方法返回一个 Promise，可以在运行时异步地加载模块。在以前的版本中，我们只能在编译时使用 import 语句来加载模块。这个新的功能为我们提供了更大的灵活性和可扩展性。
在这篇文章中，我们将讨论如何动态地获取 import() 依赖项。我们将介绍这个新功能的好处，以及如何使用它。我们还将提供一些示例代码，以帮助你更好地了解这个新功能。
好处
动态加载模块的好处在于它可以帮助我们减少应用程序的加载时间。在以前的版本中，我们必须在应用程序启动时加载所有的模块，即使我们不需要它们。这会导致应用程序的加载时间变慢，因为它必须等待所有的模块都加载完成。
使用 import() 方法，我们可以在需要时加载模块。这意味着我们可以将应用程序分成更小的块，只在需要时加载它们。这可以使我们的应用程序更快地加载，并提高用户体验。
如何使用
使用 import() 方法非常简单。我们只需要调用这个方法，传入模块的路径即可。这个方法返回一个 Promise，我们可以使用 then() 方法来处理返回的模块。下面是一个简单的示例：
import('./module.js')
.then((module) => {
// 使用 module
})
.catch((error) => {
// 处理错误
});在这个示例中，我们使用 import() 方法来加载一个名为 module.js 的模块。一旦模块被加载，我们就可以在 then() 方法中使用它。如果出现错误，我们可以在 catch() 方法中处理它。
示例代码
下面是一个更完整的示例，它演示了如何动态地加载模块，并在加载完成后使用它：
-- -------------------- ---- -------
----- ------ - ----------------------------------
-------------------------------- -- -- -
---------------------
-------------- -- -
-----------------
--
-------------- -- -
-------------------
---
---在这个示例中，我们首先获取一个名为 button 的 DOM 元素。然后，我们使用 addEventListener() 方法来监听按钮的 click 事件。当按钮被点击时，我们使用 import() 方法来加载一个名为 module.js 的模块。一旦模块被加载，我们就可以在 then() 方法中使用它。在这个示例中，我们调用了模块的默认导出函数。
总结
在 ECMAScript 2020 中，我们可以使用 import() 方法动态地加载模块。这个新的功能为我们提供了更大的灵活性和可扩展性。使用 import() 方法，我们可以在需要时加载模块，减少应用程序的加载时间。在本文中，我们介绍了如何使用 import() 方法，以及它的好处。我们还提供了一些示例代码，以帮助你更好地了解这个新功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66260565c9431a720c254183