RxJS学习

2017/07/01 23:24
阅读数 110

RxJS给我们提供了一堆操作符用于处理这些Observable之间的关系,比如说,我们可以这样:

const A$ = Observable.interval(1000)
const B$ = Observable.of(3)
const C$ = Observable.from([5, 6, 7])
const D$ = C$.toArray() .map(arr => arr.reduce((a, b) => a + b), 0)
const E$ = Observable.combineLatest(A$, B$, D$) .map(arr => arr.reduce((a, b) => a + b), 0)

上述的D就是通过C进行一次转换所得到的数据管道,而E是把A,B,D进行拼装之后得到的数据管道,

A ------> |
B ------> | -> E
C -> D -> |

从以上的示意图就可以看出它们之间的组合关系,通过这种方式,我们可以描述出业务逻辑的组合关系,把每个小粒度的业务封装到数据管道中,然后对它们进行组装,拼装出整体逻辑来。

我们知道,现在主流的MV*框架都基于一个共同的理念:MDV(模型驱动视图),在这个理念下,一切对于视图的变更,首先都应当是模型的变更,然后通过模型和视图的映射关系,自动同步过去。

在这个过程中,我们可能会需要通过一些方式定义这种关系,比如Angular和Vue中的模板,React中的JSX等等。

在这些体系中,如果要使用RxJS的Observable,都非常简单:

data$.subscribe(data => {  // 这里根据所使用的视图库,用不同的方式响应数据
  // 如果是 React 或者 Vue,手动把这个往 state 或者 data 设置
  // 如果是 Angular 2,可以不用这步,直接把 Observable 用 async pipe
绑定到视图
// 如果是 CycleJS ……})



内容摘自如下地址:

https://github.com/xufei/blog/issues/38

https://github.com/joeyguo/blog/issues/11

http://www.alloyteam.com/2016/12/learn-rxjs/

http://reactivex.io/rxjs/manual/tutorial.html

本文分享自微信公众号 - 云服务圈(heidcloud)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部