ES9：跨文件回调-JavaScript中文网-JavaScript教程资源分享门户

ES9（ECMAScript 2018）是 JavaScript 语言的一个新版本，其中增加了一些令人兴奋的特性。本文将介绍其中的一项功能：跨文件回调。

在开发大型前端项目时，经常需要在不同文件中传递回调函数。在早期的版本中，这往往需要将回调函数传递给每个处于调用链中的函数。这种方法具有一定的局限性，因为当回调嵌套层数过多时，代码可读性会大大降低。此外，在调用链中间添加新函数时，需要手动传递回调函数，因此会增加不必要的代码维护成本。

在 ES9 中，这个问题得到了解决。现在，我们可以通过异步生成器和 for-await-of 循环来跨多个文件传递回调函数。

异步生成器

在 ES9 中引入了一种新类型的函数：async 生成器。异步生成器是一种可以异步地迭代的生成器，类似于 Promise。每次调用异步生成器时，都会返回一个 Promise 对象，用于异步获取下一个序列值。

下面是一个简单的异步生成器示例：

// javascriptcn.com 代码示例
async function* myGenerator() {
  yield 'hello';
  yield 'world';
}

const myAsyncGenerator = myGenerator();

myAsyncGenerator.next().then(result => {
  console.log(result); // { value: 'hello', done: false }
});

myAsyncGenerator.next().then(result => {
  console.log(result); // { value: 'world', done: false }
});

myAsyncGenerator.next().then(result => {
  console.log(result); // { value: undefined, done: true }
});

从上面的示例中可以看出，异步生成器返回的一个 Promise 对象，我们可以使用异步方式获取异步生成器的下一个值。

for-await-of 循环

for-await-of 循环是 ES9 中另一个新增的特性。它可以异步遍历任何可迭代的对象，包括异步生成器。

下面是一个用 for-await-of 循环遍历异步生成器的示例：

// javascriptcn.com 代码示例
async function* myGenerator() {
  yield 'hello';
  yield 'world';
}

async function iterateGenerator(generator) {
  for await (const value of generator) {
    console.log(value);
  }
}

iterateGenerator(myGenerator());

以上代码将输出：

hello
world

for-await-of 循环结合异步生成器，可以方便地遍历异步数据。

跨文件回调

现在，我们已经了解了异步生成器和 for-await-of 循环。接下来，我们将使用它们来实现跨文件回调。

假设我们有两个文件：a.js 和 b.js。

在 a.js 文件中，我们定义了一个异步生成器，该异步生成器将调用回调函数：

async function* myGenerator(callback) {
  await callback('hello');
  await callback('world');
}

在 b.js 文件中，我们定义了一个函数，该函数将遍历异步生成器，并将回调函数传递给异步生成器：

async function iterateGenerator(generator, callback) {
  for await (const value of generator) {
    callback(value);
  }
}

iterateGenerator(myGenerator(callback), callback);

注意，我们必须在两个文件中引入相同的回调函数。在这个例子中，callback 是一个在 a.js 和 b.js 文件中都存在的函数。

现在，我们可以通过导入 a.js 和 b.js 文件来跨文件传递回调函数了：

import { myGenerator } from './a.js';
import { iterateGenerator } from './b.js';

function callback(value) {
  console.log(value);
}

iterateGenerator(myGenerator(callback), callback);

在以上代码中，我们首先导入 myGenerator 和 iterateGenerator 函数。然后我们定义了一个回调函数 callback，它将在遍历异步生成器期间被调用。最后，我们将回调函数和异步生成器传递给 iterateGenerator 函数以启动遍历。

总结

ES9 的跨文件回调功能使用异步生成器和 for-await-of 循环，提供了一种方便的方式，在不同文件间传递回调函数。使用它可以改善代码的可读性和可维护性，同时还可以提供更好的异步操作支持。在开发大型前端项目时，尝试使用这个功能，可以极大地提高开发效率。

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