通过RxJS理解响应式编程

简介:

什么时候响应式编程

一句话概括就是用异步数据流来编程

从某种程度上讲,一个点击事件就是一个异步事件流,我们可以注册监听然后再做一些其他的事情。正是这样我们就应该有一个工具包来创建,组合,过滤这些流。一个流或者多个流可以作为另一个流的输入,可以合并这两个流,并且能够过滤这些流得到你想要的流,能够把流推送到另一个新的流。这些就是响应式编程要做的事情

监听一个流我们称之为“订阅”(Subscription),我们定义的功能是“观察者”(Observer),流就是我们的“可观察”对象(Observable ),对流的操作就是Operators

响应式编程的优点

它是声明式的、可组合的,以及不可变的,这避免了回调地狱,让你的代码更加简洁、可复用以及模块化

RxJS

引用官方的一句话来说明RxJS是什么
RxJS就是响应式编程的一个变种

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。

这里面主要说明了两点:1、可观察的序列,2、解决异步编程

Observable

可观察的序列我们可以想想成可观察的数据流。流的引申义是物质在库与库之间的转移运行。那么数据流则是数据随时间从输入到输出中间所经历的一系列的过程。比如:在web中用户做了一次点击,然后页面渲染出数据这个过程应该是清晰明了不被污染的。
可以看一个官方的例子:

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

在一秒钟内只能执行一次的代码实现

再看RxJS


var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

相比之下rxjs实现的部分代码更加已读更加干净更加优雅。你可以很清晰的看到值的转换过程。这也是RxJS核心的一部分
一个 observable 就是一个伴随着时间流动的数据集合。

Callback hell

写过js的都知道js是动态类型的语言,他天生异步,非常的灵活。但这也是他的缺点,多变不好控制。回掉能让你做很多事情同样实现复杂的逻辑时可读性会变得很差。后面有了promise,但promise的可控性并不好。RxJS是结合了 观察者模式迭代器模式 使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切

  1. RxJS它在处理任何类型的异步数据上都很有用,无论是获取数据、通过 WebSockets 通信或从多个源头监听外部事件,还是动画。
    你使用 Observable 和操作符声明式地表示你想要的数据,然后在一个单独的.subscribe()里处理业务逻辑,避免代码上的污染
  2. Rx *库系列可广泛用于多种语言和平台(.NET,Java,Scala,Clojure, JavaScript,Ruby,Python,C ++,Objective-C / Cocoa,Groovy等
  3. RxJS可以跟很多流行框架(比如 React,Angular 和 Vue)一起工作
  4. 其实 RX 最早在接近十年以前(2009)被实现,从 Conal Elliott 和 Paul Hudak 二 十年以前(1997)的想法中被提出,这个想法描述的是函数式响应式动画。所以不用说,可以完全放心使用它是经过考验的。

这里对RX的介绍只是冰山一角,更多的资料参考[官方文档
](http://reactivex.io/rxjs/)

目录
相关文章
|
存储 缓存 JavaScript
深入浅出 RxJS 核心原理(响应式编程篇)
在最近的项目中,我们面临了一个需求:监听异步数据的更新,并及时通知相关的组件模块进行相应的处理。传统的事件监听和回调函数方式可能无法满足我们的需求,因此决定采用响应式编程的方法来解决这个问题。在实现过程中发现 RxJS 这个响应式编程库,可以很高效、可维护地实现数据的监听和组件通知。
376 0
深入浅出 RxJS 核心原理(响应式编程篇)
|
18天前
|
Java API 网络架构
深入理解并实践响应式编程(Reactive Programming)
深入理解并实践响应式编程(Reactive Programming)
28 1
|
7月前
|
JavaScript 前端开发 调度
15_Rxjs
15_Rxjs
52 0
|
前端开发 JavaScript API
RxJS系列01:响应式编程与异步
RxJS系列01:响应式编程与异步
199 0
探秘 RxJS Observable 为什么要长成这个样子?!
我们都知道 RxJS Observable 最基础的使用方法:是建立 Observable,即调用 .create API
|
前端开发 JavaScript API
继续解惑,异步处理 —— RxJS Observable
Observable 可观察对象是开辟一个连续的通信通道给观察者 Observer,彼此之前形成一种关系,而这种关系需要由 Subscription 来确立,而在整个通道中允许对数据进行转换我们称为操作符 Operator。
|
JavaScript 前端开发 调度
你会用RxJS吗?【初识 RxJS中的Observable和Observer】
概念 RxJS是一个库,可以使用可观察队列来编写异步和基于事件的程序的库。 RxJS 中管理和解决异步事件的几个关键点: Observable: 表示未来值或事件的可调用集合的概念。 Observer: 是一个回调集合,它知道如何监听 Observable 传递的值。 Subscription: 表示一个 Observable 的执行,主要用于取消执行。 Operators:** 是纯函数,可以使用函数式编程风格来处理具有map、filter、concat、reduce等操作的集合。
151 0
|
数据采集 消息中间件 JSON
全面拥抱 Reactivity: RxJS, RSocket & Svelte
在 Reactive 社区,RxJS 还是最核心的底层框架,发挥着重大作用,第十五届 D2 前端技术论坛,将会邀请 RxJS 作者 Ben Lesh 进行《重构 RxJS 架构:我们如何让其更小、更快》的主题演讲,Ben 会就其 RxJS 的开发经验和大家分享一下他的经验,相信大家一定会有新的收获。
全面拥抱 Reactivity: RxJS, RSocket & Svelte
|
JSON JavaScript 前端开发
一起来看 rxjs
## 更新日志 - 2018-05-26 校正 - 2016-12-03 第一版翻译 ## 过去你错过的 Reactive Programming 的简介 你好奇于这名为Reactive Programming(反应式编程)的新事物, 更确切地说,你想了解它各种不同的实现(比如 [Rx*], [Bacon.js], RAC 以及其它各种各样的框架或库) 学习它比较困难, 因为
1164 0
|
JavaScript 前端开发 C++
rxjs简单入门
# rxjs简单入门 > rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence),然后订阅序列中那些Observable对象的变化,一旦变化,就会执行事先安排好的各种转换和操作 **rxjs适用于异步场景,即前端
34424 0