By 被删

更新日期:

文章目录
  1. 1. 合流
    1. 1.1. xStream
    2. 1.2. xstream合流
    3. 1.3. combine流的实现
  2. 2. 结束语

因为对Rxjs的好感玩上了Cycle.js，《Cycle.js学习笔记》系列用于记录使用该框架的一些笔记。
本文介绍xStream的合流处理，并手动实现其中的combine方法。

合流

xStream

xStream和rxjs类似，都是reactive programming在js上的实现。
xStream比较轻量级一点，特别为Cycle.js做了兼容。

xStream拥有四种基础类型：

  1. 流（Stream）：一个拥有多个事件监听器的事件发射器。

  2. 监听器（Listener）：一个带有next, error, 和complete其中1-3个函数的对象。

1
2
3
4
5
6
7
8
9
10
11
var listener = {
  next: (value) => {
    console.log('The Stream gave me a value: ', value);
  },
  error: (err) => {
    console.error('The Stream gave me an error: ', err);
  },
  complete: () => {
    console.log('The Stream told me it is done.');
  },
}
  1. 发射器（Producer）：发射通过流传播的事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var producer = {
  start: function (listener) {
    this.id = setInterval(() => listener.next('你好'), 1000)
  },

  stop: function () {
    clearInterval(this.id)
  },

  id: 0,
}

// 每隔1秒发送“你好”
var stream = xs.create(producer)
  1. 记忆流（MemoryStream）：可用于保存最近一次数据。

常用工厂函数：create, from, of, merge, combine等。
常用方法和操作：addListener, removeListener, subscribe, map, mapTo, filter, startWith等。
更多说明可以查看官方文档，虽然上面说明也不是很详细。

xstream合流

这里面有两个工厂方法：merge 和 combine。

  • merge(stream1, stream2)

该方法会将多个流合在一起，同步更新流。

1
2
3
4
--1----2-----3--------4---
----a-----b----c---d------
           merge
--1-a--2--b--3-c---d--4---
  • combine(stream1, stream2)

该方法会将多个输入流合入，并始终返回各个流上一次的合流。

1
2
3
4
--1----2-----3--------4---
----a-----b-----c--d------
         combine
----1a-2a-2b-3b-3c-3d-4d--

使用方式：

1
2
3
4
5
6
const stream1 = xs.of(1);
const stream2 = xs.of(2);

xs.combine(stream1, stream2).map(
  combinedEmissions => ([ ...combinedEmissions ])
)

combine流的实现

这里，本骚年开始的时候没有发现combine方法合流，一直用的merge，然后自己弄了个实现方式，直至看到了combine[捂脸]。

既然写都写了，可以分享一下，不知道是不是combine的实现，但最后功能使用是一样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import xs from 'xstream';

export function merge(...origins) {
    // state用来缓存上次状态
    let state: any = []
    // 获取输入的次序，并将每个流匹配到对应的次序
    let keys = Object.keys(origins);
    keys.forEach(key => {
        origins[key] = origins[key].map(x => { let y = {}; y[key] = x; return y; })
    })
    return xs.merge(...origins).map((res: any) => {
        // 判断更新的流，更新对应的流
        keys.forEach(key => {
            state[key] = res[key] ? res[key] : state[key]
        })
        // 输出数组
        return [...state]
    })
}

当然，这个功能最后使用的时候，有个跟combine不一样的地方：

1
2
3
4
5
6
7
8
9
--1----2-----3--------4---
----a-----b-----c--d------
        my merge
--1-1a-2a-2b-3b-3c-3d-4d--

--1----2-----3--------4---
----a-----b-----c--d------
         combine
----1a-2a-2b-3b-3c-3d-4d--

也就是说，第一次单流流动的时候也是有更新和输出的。

结束语

这节主要简单介绍了xStream，以及合流相关方法和其中的一些实现探索。
目前还没有解决第四节的问题，但是距离也一步步跟进了，我们慢慢深入探索，一些浅显的东西也便会出来了。

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 合流
    1. 1.1. xStream
    2. 1.2. xstream合流
    3. 1.3. combine流的实现
  2. 2. 结束语