type
status
date
slug
summary
tags
category
icon
password
Property
Mar 31, 2024 04:08 PM
RX的发展
源自微软,火于Netflix(奈飞)公司。2011年微软开发出RX框架(开发的LinQ扩展出来的开源方案),由于当时的Netflix公司发展太快,旧有的一些架构问题加上新增长的一些问题,导致架构特别复杂,一直在寻找一套能够梳理清楚这种复杂架构的框架或模式。Netflix公司借鉴了RX的设计理念,基于JAVA语言开发出了RxJava。从此RX这种理念迎来了爆发。发展至今,RX已经形成了一个开源集合,支持多种语言。
RX支持的语言:http://reactivex.io/languages.html
RX的优势?
- 三大统一,异步与同步,获取与订阅,现在与未来
- 可组合的数据变更过程
在实际应用中,很多问题可以抽象成数据流,网页的DOM事件、Ajax获取数据资源等操作都可以看成(抽象)是一个数据流。
认识 Rxjs
Rxjs是一套由Observable sequences (可观察的对象序列)来组合异步行为和事件流的library。
Rxjs中的数据流可能包含复杂的功能,但是可以分解成一个个单体来实现,实现某个小功能就是操作符,学习RxJS就是学习如何组合操作符来解决复杂问题。
简单的说,可以把Rxjs看成是异步的lodash
这也被称为Functional Reactive Programming,更切确地说是指Functional Programming 及Reactive Programming 两个编程思想的结合。
Reactive Programming 简单来说就是 当变量或资源发生变动时,由变量或资源自动告诉我发生变动了。想想Vue
丰富多彩的前端界:Angular、Nestjs、vue-rx、redux-observable
RxJS 核心概念与内容概览
- Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。
- Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
- Subscription (订阅): 表示 Observable 的执行,具体应该做何操作。
- Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像
map
、filter
、concat
、flatMap
等这样的操作符来处理集合。
- Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
- Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如
setTimeout
或requestAnimationFrame
或其他。
让我们来看个小例子,假设我们想要监听点击事件,但点击一次之后不再监听
- Javascript
- 使用Rxjs
什么是Observable
看点其他的
观察者
iterator可迭代,渐进取值
Observable 的字面意思是「可观察的」,Observable 就像是一个序列,里面的元素会随着时间推送。
在 RxJS 里你其实可以理解为「把任何数据封装成,具备可观察、可处理、可订阅能力的类」。
直接来吧
创建Observable
除了基本的创建之外,还有许多 Creation Operator
取消订阅
什么是Operator?
Operators 就是一个个被附加到Observable 工具函数,例如像是map, filter, contactAll…等等,所有这些函数都会拿到原本的observable 并回传一个新的observable。
弹珠图(marble diagrams)
弹珠图(Marble diagrams)就是用图例形象地表示 Observable 和各种操作符的一种方法。 用 - 表示一小段时间,X 代表有错误发生, | 表示结束,() 表示同步发生。
map
mapTo
filter
concatAll
就像数组的map一样,map后面返回都是要是一个和原数组元素的一样的类型,你返回一个不一样的就需要转换了,这里的observeable是一样的道理
rxjs更多的是一种思维的转变,小demo
过程
- 选择元素
- 绑定事件
- 按下的时候开始
- 监听移动,同步修改位置
- 弹起取消
takeLast
原来的是需要先执行的,不然我怎么知道后面几个是是什么
merge
zip
withLatestFrom
小demo2
scan
buffer
delay
delayWhen
学习资料
- 作者:Kitety
- 链接:https://www.kitety.com/article/observable-and-operators-shared-by-rxjs-entry
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。