在前端开发过程中，常常会使用到模块，但是在过去，我们需要手动处理好每个模块的依赖关系，并且需要使用一些第三方工具来加载和管理这些模块。这种方式十分繁琐且容易出错。而 ES9 中的分离式模块加载器，可以帮助我们自动化处理这些问题，让我们可以更方便地管理我们的代码。
了解分离式模块加载器的背景
在 ES6 中，引入了模块的概念，使用 import 和 export 来引入和导出模块。这种方式很好的解决了模块间的引用关系，但是需要使用 webpack 和其他模块加载器来打包和加载模块。这一过程十分繁琐且容易出错。
ES9 中的分离式模块加载器，可以使我们的前端项目更加轻便，而不需要依靠第三方依赖。这种方式让我们的代码更加易于编写和维护。
如何使用分离式模块加载器
ES9 中的分离式模块加载器主要包含两个 API：import() 和 async。这两个 API 可以一起使用，使我们在引入和加载模块时更加灵活。
import()
import() 可以异步的加载模块，它接收一个参数，该参数必须是一个字符串，可以是相对路径或绝对路径。该函数会返回一个 promise 对象，我们可以通过 then 方法来获取到加载的模块。
import("./module.js")
.then(module => {
console.log(module);
})
.catch(error => {
console.log(error);
});async
async 表示函数是异步的，并且该函数中使用了 await 关键字。我们可以在异步函数中使用 import() 来加载模块。
async function loadModule() {
const module = await import("./module.js");
console.log(module);
}通过使用 async 和 await 可以使我们的代码更加清晰易懂，也使我们可以更加方便地管理模块的依赖关系。
示例代码
接下来，我们看一下具体的示例。
-- -------------------- ---- ------- -- ----- ------ -------- ------- - ---------------- - -------- - -- ----- ------ -------- ------- - ---------------- - -------- - -- ----- ----- -------- ------ - ----- ------- - ----- ----------------------- ----- ------- - ----- ----------------------- ---------------- ---------------- - -------
通过上述示例，我们可以看到如何使用 import() 和 async 去加载和管理模块。
总结
ES9 中的分离式模块加载器可以简化我们前端项目的管理，同时也让代码更加易于编写和维护。使用 import() 和 async API 可以让我们更加灵活地处理模块的依赖关系，让项目管理变得更加简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c237948841e9894a7358c
