RxJS

官网
github地址:https://github.com/ReactiveX/rxjs

异步复杂度要到什么程度才需要用到Rxjs?

给大家介绍一个很直观的网站,用动画的方式演示了大部分Rxjs的Operator的执行过程,以及功能相似的Operator之间的比较。
image.png
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 一步步实现搜索功能
  • 总结

常规方式实现搜索

做一个搜索功能在前端开发中其实并不陌生,一般的实现方式是:监听文本框的输入事件,将输入内容发送到后台,最终将后台返回的数据进行处理并展示成搜索结果。


上面代码实现我们要的功能,但存在两个较大的问题:

  1. 多余的请求
    当想搜索“爱迪生”时,输入框可能会存在三种情况,“爱”、“爱迪”、“爱迪生”。而这三种情况将会发起 3 次请求,存在 2 次多余的请求。
  2. 已无用的请求仍然执行
    一开始搜了“爱迪生”,然后马上改搜索“达尔文”。结果后台返回了“爱迪生”的搜索结果,执行渲染逻辑后结果框展示了“爱迪生”的结果,而不是当前正在搜索的“达尔文”,这是不正确的。

减少多余请求数,可以用 setTimeout 函数节流的方式来处理,核心代码如下


已无用的请求仍然执行的解决方式,可以在发起请求前声明一个当前搜索的状态变量,后台将搜索的内容及结果一起返回,前端判断返回数据与当前搜索是否一致,一致才走到渲染逻辑。最终代码为