javascript - 如何使用 FRP(和 bacon.js)防止事件循环

Question

我已经成功在我的培根驱动的应用程序中创建了一个循环，因此我需要一些关于如何打破它的建议。

假设我们有几个属性，它们携带应用程序的某些状态。此状态应该通过 HTML5 History API (pushState) 存储，因此我将这些属性组合到一个对象并对其执行 pushState。但是，我还需要覆盖 popstate 事件，因此在每个 popstate(后退按钮等)上，我将状态对象拆分回单个属性并将它们注入(inject)到其原始属性中流。

现在我已经有了一个循环:由于这些属性流与我首先获得 pushState 的流相同，因此再次调用 pushState ，从而重复堆栈上的状态并使后退按钮无用。

这当然是我的错误，但是，除了将每个属性流分成两部分并在 pushState/popState 中以不同方式组合它们之外，我没有看到更好的解决方案-具体案例。但这看起来相当不优雅——有没有规范的方法可以避免这种循环？

Answer 1

我提出的最优雅的解决方案是在推送新状态之前检查当前状态。如果它们相同，则不执行任何操作:

// state properties
var foo = ...;
var bar = ...;

// write
var history = Bacon.combineAll(makeHistoryState, foo, bar);

history.onValue(function (v) {
    if (!_.isEqual(history.state, v)) {
        history.pushState(v);
    }
});

// read
window.addEventListener("popstate", function(event.state) {
    foo.set(extractFoo(event.state));
    bar.set(extractBar(event.state));
});

免责声明:我自己没有测试过

编辑:当将全局状态作为单个属性时，按原样保存到历史 API 中；一切都变得简单。您或许可以利用 Bacon.Model 镜头功能