官网
github地址:https://github.com/ReactiveX/rxjs
异步复杂度要到什么程度才需要用到Rxjs?
给大家介绍一个很直观的网站,用动画的方式演示了大部分Rxjs的Operator的执行过程,以及功能相似的Operator之间的比较。
https://reactive.how/
RxJS至于event,就像以前Jquery至于dom,lodash/underscore至于data。现在Jquery和lodash/underscore可以完全ES6+代替了。
用具体的实现例子去实现 RxJS, 原文地址 An Animated Intro to RxJS | CSS-Tricks
hi 我也是初学者 来分享一点自己的心得
1. 从【能解决什么问题】开始学习rx到底是解决什么问题,是怎么解决得更好等等,来建立对rx的基本认识
途径: 百度,google,stackoverflow搜索
2. 从【一个简单可运行的demo】开始学习rx基本用法
途径-1: Hello RxJS系列(分享自知乎网)
知乎专栏
作者
@太狼
途径-2: githun搜索rx demo
3. 【官网】开始学习rx 基本几大概念,api和用法等。最好每个api都动手做一做,下面分享的第二个网站有每个api的效果图。(我有些是边翻译边看哈哈)
分享-1: rx5.x官网
http://reactivex.io/rxjs/manual/overview.html
分享-2: api效果图网
RxJS - Javascript library for functional reactive programming.
4. 【进阶】学习更多实际用途与基本原理
途径:angular2表单监控,angular2 http等
5. 【实战】开始用rxjs动手做个完整项目或者在根据项目情况中考虑加入rx
完
构建流式应用—RxJS详解
原文地址
最近在 Alloyteam Conf 2016 分享了《使用RxJS构建流式前端应用》,会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类:有用过的都表达了 RxJS 带来的优雅编码体验,未用过的则反馈太难入门。所以,这里将结合自己对 RxJS 理解,通过 RxJS 的实现原理、基础实现及实例来一步步分析,提供 RxJS 较为全面的指引,感受下使用 RxJS 编码是怎样的体验。
目录
- 常规方式实现搜索功能
- RxJS · 流 Stream
- RxJS 实现原理简析
- 观察者模式
- 迭代器模式
- RxJS 的观察者 + 迭代器模式
- RxJS 基础实现
- Observable
- Observer
- RxJS · Operators
- Operators ·入门
- 一系列的 Operators 操作
- 使用 RxJS 一步步实现搜索功能
- 总结
常规方式实现搜索
做一个搜索功能在前端开发中其实并不陌生,一般的实现方式是:监听文本框的输入事件,将输入内容发送到后台,最终将后台返回的数据进行处理并展示成搜索结果。
上面代码实现我们要的功能,但存在两个较大的问题:
- 多余的请求
当想搜索“爱迪生”时,输入框可能会存在三种情况,“爱”、“爱迪”、“爱迪生”。而这三种情况将会发起 3 次请求,存在 2 次多余的请求。 - 已无用的请求仍然执行
一开始搜了“爱迪生”,然后马上改搜索“达尔文”。结果后台返回了“爱迪生”的搜索结果,执行渲染逻辑后结果框展示了“爱迪生”的结果,而不是当前正在搜索的“达尔文”,这是不正确的。
减少多余请求数,可以用 setTimeout 函数节流的方式来处理,核心代码如下
已无用的请求仍然执行的解决方式,可以在发起请求前声明一个当前搜索的状态变量,后台将搜索的内容及结果一起返回,前端判断返回数据与当前搜索是否一致,一致才走到渲染逻辑。最终代码为