在现代的 Web 开发中，我们经常会用到模块化的编程方式。这种方式可以让我们把功能分成不同的模块，每个模块都有自己的职责和接口，从而让代码更加清晰和易于维护。而在 ES6 中，我们已经可以使用 import 和 export 语句来定义和使用模块了。
但是，如果我们要在运行时动态地加载一个模块，该怎么办呢？这时候就需要用到 ES11（或称 ES2020）中引入的 import() 方法。本文将详细介绍 import() 方法的必要性和使用方法，并提供示例代码，帮助读者更好地理解和掌握这个新特性。
为什么需要 import() 方法
在开发 Web 应用中，我们经常会遇到这样的场景：某个功能需要根据用户的操作情况动态地加载一个模块，但这个模块在应用启动时不需要被加载，如果在一开始就把所有模块都加载进来，会造成很多不必要的网络流量和资源浪费。而 import() 方法就是为了解决这个问题而生的。
使用 import() 方法，我们可以在运行时动态地加载一个模块，而不必在应用启动时就进行加载。这样就可以避免不必要的网络流量和资源浪费，提高应用的性能和用户体验。
如何使用 import() 方法
import() 方法是一个异步操作，它返回一个 Promise 对象。当 Promise 被 resolve 时，我们可以从返回的对象中获取到导入的模块。下面是一个简单的示例：
// javascriptcn.com 代码示例
async function loadModule(modulePath) {
const module = await import(modulePath);
return module;
}
const modulePath = './myModule.js';
loadModule(modulePath)
.then((module) => {
// 使用导入的模块
module.myFunction();
})
.catch((error) => {
console.error(error);
});在这个示例中，我们定义了一个异步函数 loadModule，它接受一个模块路径作为参数，并返回一个 Promise 对象。在函数内部，我们通过 await 关键字来等待 import() 方法返回的 Promise 对象。
当 Promise 被 resolve 时，我们就可以从返回的对象中获取到导入的模块。在 then 方法中，我们可以使用导入的模块。如果 Promise 被 reject，则会执行 catch 方法中的回调函数，打印出错误信息。
值得注意的是，在使用 import() 方法时，模块路径必须是一个字符串常量。如果模块路径是一个变量，会导致编译时错误。
总结
ES11（ES2020）中引入的 import() 方法，可以在运行时动态地加载一个模块，而不必在应用启动时就进行加载。这样就可以避免不必要的网络流量和资源浪费，提高应用的性能和用户体验。
在使用 import() 方法时，我们需要注意模块路径必须是一个字符串常量。如果模块路径是一个变量，会导致编译时错误。
通过学习和使用 import() 方法，我们可以更好地组织和管理我们的代码，让我们的应用更加清晰、易于维护，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539d9f87d4982a6eb36f562