javascript - 异步、回调和 OOP JavaScript : how do I organize this?

Question

我正在构建一个插件，它以 JSON 格式获取一堆图像的信息，然后将它们显示在某个对话框中以供选择。不幸的是，我的第一直觉很清楚地导致了竞争条件:

var ImageDialog = function () {};
ImageDialog.prototype.items = [];

ImageDialog.prototype.fetch_images() {
    var parse_images = function(data) {
        // Magically parse these suckers.
        data = awesome_function(data);
        this.items = data;
    };

    magicalxhrclass.xhr.send({"url": 'someurl', "success": parse_images, "success_scope": this});
}

ImageDialog.prototype.render = function () {
    this.fetch_images();
    // XHR may or may not have finished yet...
    this.display_images();
    this.do_other_stuff();
};

var monkey = new ImageDialog();
monkey.render();

在我的脑海中，我想我可以通过更改 parse_images 回调以包括其余的渲染步骤来解决这个问题。但是，这看起来不太正确。为什么 fetch_images 方法会调用一堆关于显示图像的东西？

那么:我应该在这里做什么？

我非常确定 deferreds 会有所帮助，但是唉:我需要在没有任何外部库的情况下编写它。 :(

对其他代码味道的评论也很好!

Answer 1

一般来说，您可以使用的基本思想是，当常规程序使用 return 语句(意思是“我的函数已完成，现在做你的工作!”)时，异步延续传递程序将改为使用 ballcabk 函数被显式调用

function fetch_images(callback){
   magicalXHR({
       success: function(data){
           parse_images(data);
           callback(whatever);
       }
   }
}

或者，如果 parse_images 本身是一个异步函数:

parse_images(data, callback)

现在，当您调用 fetch_images 代码时，它会进入回调，而不是假设 fetch_images 将在返回时完成

fetch_images(function(
   display_images()
})

通过使用回调，您可以很好地模拟传统程序的功能(实际上它是一种形式与另一种形式之间相当机械的转换)。您现在遇到的唯一问题是错误处理变得棘手，循环等语言功能不能很好地与异步回调配合使用，并且回调往往会嵌套在回调 hell 中。如果回调开始变得太复杂，我会研究使用其中一种 Javascript 方言编译成连续传递式 Javascrit(其中一些在运行时不需要额外的库就可以工作)。