从 bacon.js 流中重构公共组合器

Question

假设我有两个 bacon.js 流：

const stream1 = $('#input1').asEventStream('input')
    .map(e => e.target.value)
    .filter(inp => inp.length > 3)
    .log();
const stream2 = $('#input2').asEventStream('input')
    .map(e => e.target.value)
    .filter(inp => inp.length > 3)
    .log();

我想将按输入长度过滤的公共步骤提取到一个变量中，然后将其应用于两个流，幻想代码：

const my_filter = Bacon.map(e => e.target.value).filter(inp => inp.length > 3)
const stream1 = $('#input1').asEventStream('input')
    .apply(my_filter)
    .log();
const stream2 = $('#input2').asEventStream('input')
    .apply(my_filter)
    .log();

有惯用的方法吗？

EDIT1：澄清一下，my_filter 只是一个例子。我希望能够重构任意组合器链并将它们应用于多个流。

EDIT2：正如 Bless Yahu 所注意到的，我需要一张额外的地图来获取事件的价值。这更能说明我的问题。

Answer 1

添加一个映射函数以从事件中获取值（我认为还有一个 Bacon 便利函数），将您 my_filter 更改为一个函数，并在您的流中使用过滤器调用它：

const getValue = inp=>inp.target.value;
const my_filter = inp => inp.length > 3
const stream1 = $('#input1').asEventStream('input')
    .map(getValue)
    .filter(my_filter)
    .log();
const stream2 = $('#input2').asEventStream('input')
    .map(getValue)
    .filter(my_filter)
    .log();

示例如下：http://jsbin.com/vahejuv/edit?html,js,console,output

Answer 2

对我来说，这看起来像是一个基本的软件重构问题。

通常，如果您想对流应用任意转换，您可能需要编写一个函数，将流作为参数，并 returns 修改后的流作为结果。

在您的特定情况下，我会通过将步骤提取到函数中来消除重复。

const getValue = input => input.target.value
const my_filter = stream => stream.filter(text => text.length > 3)
const filteredInputValue = ($input) => {
  my_filter($input.asEventStream('input').map(getValue))
const stream1 = filteredInputValue($('#input1')).log()
const stream2 = filteredInputValue($('#input2')).log()

在此示例中，您可以轻松修改 my_filter 以应用任何其他转换，例如节流和文本修剪。

从 bacon.js 流中重构公共组合器

Refactor common combinators out of bacon.js streams

javascript

frp

bacon.js