javascript - 用 IndexedDB 解释如何在这段 JavaScript 代码中使用生成器？

Question

在探索 IndexedDB 的奇妙世界时，我遇到了类似 this 的代码。来自 Mozilla 的测试套件:

/**
 * Any copyright is dedicated to the Public Domain.
 * http://creativecommons.org/publicdomain/zero/1.0/
 */

var testGenerator = testSteps();

function testSteps()
{
  const IDBObjectStore = Components.interfaces.nsIIDBObjectStore;
  const name = this.window ? window.location.pathname : "Splendid Test";
  const description = "My Test Database";

  var data = [
    { name: "inline key; key generator",
      autoIncrement: true,
      storedObject: {name: "Lincoln"},
      keyName: "id",
      keyValue: undefined,
    },
    { name: "inline key; no key generator",
      autoIncrement: false,
      storedObject: {id: 1, name: "Lincoln"},
      keyName: "id",
      keyValue: undefined,
    },
    { name: "out of line key; key generator",
      autoIncrement: true,
      storedObject: {name: "Lincoln"},
      keyName: undefined,
      keyValue: undefined,
    },
    { name: "out of line key; no key generator",
      autoIncrement: false,
      storedObject: {name: "Lincoln"},
      keyName: null,
      keyValue: 1,
    }
  ];

  for (let i = 0; i < data.length; i++) {
    let test = data[i];

    let request = mozIndexedDB.open(name, i+1, description);
    request.onerror = errorHandler;
    request.onupgradeneeded = grabEventAndContinueHandler;
    let event = yield;

    let db = event.target.result;

    let objectStore = db.createObjectStore(test.name,
                                           { keyPath: test.keyName,
                                             autoIncrement: test.autoIncrement });

    request = objectStore.add(test.storedObject, test.keyValue);
    request.onerror = errorHandler;
    request.onsuccess = grabEventAndContinueHandler;
    event = yield;

    let id = event.target.result;
    request = objectStore.get(id);
    request.onerror = errorHandler;
    request.onsuccess = grabEventAndContinueHandler;
    event = yield;

    // Sanity check!
    is(test.storedObject.name, event.target.result.name,
                  "The correct object was stored.");

    request = objectStore.delete(id);
    request.onerror = errorHandler;
    request.onsuccess = grabEventAndContinueHandler;
    event = yield;

    // Make sure it was removed.
    request = objectStore.get(id);
    request.onerror = errorHandler;
    request.onsuccess = grabEventAndContinueHandler;
    event = yield;

    ok(event.target.result === undefined, "Object was deleted");
    db.close();
  }

  finishTest();
  yield;
}

他们的其他测试以类似的风格编写，这与您在 IndexedDB 中看到的典型的“厄运金字塔”风格相反，因为异步回调被堆叠在一起(当然，除了 Firefox 之外，生成器并未得到广泛支持。 .).

所以，这段来自 Mozilla 的代码对我来说有点吸引力和吸引力，因为它看起来非常干净，但我不完全确定 yield 在这种情况下做了什么。谁能帮助我理解这一点？

Answer 1

这是一段出色的代码，它利用了 Firefox 公开的 JavaScript 1.7 的强大新功能，并且由于 IndexedDB 仅受 Firefox 和 Chrome 支持，我认为这是一个很好的权衡。

代码的第一行从函数 testSteps 创建一个生成器，并将其分配给变量 testGenerator。我们使用生成器的原因是因为 IndexedDB 是一个纯异步 API；异步编程和嵌套回调很痛苦。使用生成器可以让您编写看起来同步的异步代码，从而减轻这种痛苦。

注意:如果您想知道如何利用生成器的力量使异步代码同步，请阅读 following article .

为了解释生成器如何使异步编程变得可以忍受，请考虑以下代码:

var name = "Test";
var version = 1.0;
var description = "Test database.";

var request = mozIndexedDB.open(name, version, description);

request.onupgradeneeded = function (event) {
    var db = event.target.result;

    var objectStore = db.createObjectStore("Thing", {
        keyPath: "id",
        autoIncrement: true
    });

    var object = {
        attributeA: 1,
        attributeB: 2,
        attributeC: 3            
    };

    var request = objectStore.add(object, "uniqueID");

    request.onsuccess = function (event) {
        var id = event.target.result;
        if (id === "uniqueID") alert("Object stored.");
        db.close();
    };
};

在上面的代码中，我们请求了一个名为Test 的数据库。我们请求数据库版本 1.0。由于它不存在，onupgradeneeded 事件处理程序被触发。获得数据库后，我们在其上创建了一个对象存储，向对象存储添加了一个对象，保存后我们关闭了数据库。

上面代码的问题在于我们正在请求数据库并异步地进行与它相关的其他操作。随着越来越多的嵌套回调被采用，这可能会使代码很难维护。

为了解决这个问题，我们使用生成器如下:

var gen = (function (name, version, description) {
    var request = mozIndexedDB.open(name, version, description);

    request.onupgradeneeded = grabEventAndContinueHandler;

    var event = yield;

    var db = event.target.result;

    var objectStore = db.createObjectStore("Thing", {
        keyPath: "id",
        autoIncrement: true
    });

    var object = {
        attributeA: 1,
        attributeB: 2,
        attributeC: 3
    };

    request = objectStore.add(object, "uniqueID");

    request.onsuccess = grabEventAndContinueHandler;

    event = yield;

    var id = event.target.result;

    if (id === "uniqueID") alert("Object stored.");

    db.close();
}("Test", 1.0, "Test database."));

grabEventAndContinueHandler 函数在生成器之后定义如下:

function grabEventAndContinueHandler(event) {
    gen.send(event);
}

生成器启动如下:

gen.next();

一旦生成器启动，就会发出打开到给定数据库的连接的请求。然后 grabEventAndContinueHandler 作为事件处理程序附加到 onupgradeneeded 事件。最后，我们使用关键字 yield 来让出或暂停生成器。

当 grabEventAndContinueHandler 函数调用 gen.send 方法时，生成器会自动恢复。这个函数只接受一个名为 event 的参数，并将其发送给生成器。当生成器恢复时，发送的值存储在一个名为 event 的变量中。

回顾一下，奇迹发生在这里:

// resume the generator when the event handler is called
// and send the onsuccess event to the generator
request.onsuccess = grabEventAndContinueHandler;

// pause the generator using the yield keyword
// and save the onsuccess event sent by the handler
var event = yield;

上面的代码使得编写异步代码成为可能，就好像它是同步的一样。要了解有关生成器的更多信息，请阅读以下内容 MDN article .希望这会有所帮助。