javascript - JavaScript 中的惰性事件流

Question

我正在尝试从 JavaScript 中的函数式响应式编程领域模拟事件流。基本上有两种方法可以做到这一点:

1. 为每个事件流提供一组监听器，并允许外部代码订阅流中的事件。我不喜欢这个解决方案，因为它需要大量簿记和可变状态。
2. 具体化 JavaScript 中的惰性求值和 thunk 以模拟惰性列表，使您可以将事件流显示为由传统事件监听器生成的惰性事件列表。无需簿记。

显然第二种方法更可取。因此，我孜孜不倦地编写了一些组合器来启用 JavaScript 中的惰性求值:

function lazy(f, a) {
    return function (k) {
        return k(apply(f, a));
    };
}

function apply(f, a) {
    return f.apply(null, a);
}

lazy 组合器接受一个函数和一个参数列表，并返回一个表示函数调用返回值的 thunk。

function eval(a) {
    return typeof a === "function" ? a(id) : a;
}

function id(a) {
    return a;
}

eval 组合器接受一个 thunk，对其求值并返回它的值，或者返回一个不变的 eager 值。它允许您对惰性值和渴望值一视同仁。

接下来我写了一个 cons 函数来创建一个列表:

function cons(head, tail) {
    return {
        head: head,
        tail: tail
    };
}

然后我写了一些实用函数来测试惰性求值:

function fib(a, b) {
    var c = a + b;
    return cons(c, lazy(fib, [b, c]));
}

function take(n, xs) {
    return xs && n > 0 ?
        cons(xs.head, lazy(take, [n - 1, eval(xs.tail)])) :
    null;
}

function toArray(xs) {
    return xs ?
        [xs.head].concat(toArray(eval(xs.tail))) :
    [];
}

最后偷懒得到前10个斐波那契数如下:

var xs = take(10, fib(-1, 1));

alert(JSON.stringify(toArray(xs))); // [0,1,1,2,3,5,8,13,21,34]

它就像一个魅力:http://jsfiddle.net/Kc5P2/

现在我正尝试使用惰性列表在 JavaScript 中创建一个事件流构造函数。但是，由于事件是异步生成的，我推测我需要将我的所有函数转换为连续传递样式。

问题的症结在于，如果 thunk 的值尚不可用，则无法推迟对 thunk 的求值。解决方案是创建一个异步 eval 函数，如下所示:

function asyncEval(a, k) {
    typeof a === "function" ? a(k) : k(a);
}

现在您可以从事件流构造函数返回一个异步 thunk，如下所示:

function getEventStream(type, target) {
    return function (k) {
        target.addEventListener(type, function listener(event) {
            target.removeEventListener(type, listener);
            k(cons(event, getEventStream(type, target)));
        });
    };
}

不幸的是，现在我们已经将它变成了异步的，我们还需要为在惰性列表上运行的所有函数创建异步版本(例如 take)。我们现在不仅陷入了回调 hell ，而且每个函数还需要两个版本:同步和异步。

你会如何解决这个问题？还有其他方法可以在 JavaScript 中创建惰性事件流吗？顺便说一句，我已经使用订阅模型在 JavaScript 中为事件流创建了一个要点:https://gist.github.com/aaditmshah/8381875

Answer 1

我会选择 promises，它非常适合表示同步和异步可用的值。

然后流将是对包含头部的结构的 promise ，以及对尾部的 promise 。您可能想在 https://stackoverflow.com/a/17414193/1048572 查看我的演示实现.