ECMAScript 2020：模块 Top-Level await 和 import()

ECMAScript 2020 是 Javascript 的最新版本，它引入了一些让开发者更加方便的功能。在此，我将着重介绍其中两个关于模块的新功能: Top-Level await 和 import()。

Top-Level await

作为 Javascript 的一种进化，Top-Level await 是个很好的补充，它可以让我们在模块中使用 async/await。

通常，编写使用 async/await 的模块需要先包装一个 IIFE（立即调用函数表达式）来让它变为一个自执行异步函数。

(async () => {
    const result = await someAsyncTask();
    console.log(result);
})();

但是，现在我们可以直接在模块的顶层使用 await，这样可以避免这种包装。

const result = await someAsyncTask();
console.log(result);

在启用 Top-Level await 的环境中，我们可以在任何地方使用 await，不必再将它包在异步函数内。

import()

import() 是在 ECMAScript 2020 中引入的一个函数，它是之前的 import 的增强版。

传统的 import 语句只能在文件的顶部使用，但是 import() 可以在运行时动态地导入一个模块。

import() 方法接收一个模块标识符作为参数，并返回一个 Promise，当 Promise 被解决时，它将暴露给定模块的全部内容。我们可以使用 async/await 来等待 Promise 的解决。

async function loadModule(moduleName) {
    const { default: module } = await import(`./${moduleName}.js`);
    // dosomething with the module
}

上面的例子演示了如何使用 import() 动态地导入一个模块，注意在导入的模块名后面添加了.js后缀。因为 import() 是异步的，所以需要使用 async/await 等待 Promise 的解决，在 Promise 解决后，我们可以使用导入的模块。

指导意义

使用 Top-Level await 和 import() 可以帮助我们编写更易于理解的模块，它们还可以改善我们的开发流程。

更具体地说，使用 Top-Level await 可以缩短我们编写异步代码的时间，并使代码更具可读性。

使用 import() 可以让我们动态地导入模块，从而优化我们的代码，减少浪费的资源。

示例代码

下面是一些示例代码，展示了如何在模块中使用 Top-Level await 和 import()。

Top-Level await

// asyncSum.js
export default async function asyncSum(num1, num2) {
    return num1 + num2;
}

// index.js
const result = await import("./asyncSum.js").then(({default: asyncSum}) => asyncSum(5, 7));
console.log(result);

import()

-- -------------------- ---- -------
-- --------
----- -------- ---------------------- -
    ----- - -------- ------ - - ----- -----------------------------
    ---------------
-

-- -------------
------ ------- -
    ------ ---------- -
        ------------------ --------
    -
--

结论

Top-Level await 和 import() 是 ECMAScript 2020 引入的两个很棒的新功能，这两个功能使得在模块中使用异步代码更加方便和直观。

我们应该积极地使用这些新功能，以提高我们的开发效率，并写出更干净和可读性更强的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773bbf16d66e0f9aae7071d