资讯专栏INFORMATION COLUMN

走进JavaScript响应式编程(Reactive Programming)

bovenson / 1627人阅读

摘要:补充说明响应式编程采用了订阅观察者设计模式,使订阅者可以将通知主动发送给各订阅者。一个响应式编程的实现库是一个库,它通过使用序列来编写异步和基于事件的程序。

或许"响应式布局"这个名单大家都听过或者都自己实现过,那么"响应式编程"是什么呢?下面我们来具体聊一聊。

我的理解

从字面意思上我们可以大致理解为:所有的事件存在于一条事件总线上,所有的事件都可以看作未来某个时间将要发生的事件流(stream),当事件总线上的事件执行完后会主动去通知"观察他们的对象",比如我们经常用到的settimeout、异步等都属于该范畴。

下面是官方解释:

在某种程度上,这并不是什么新东西。事件总线(Event buses)或咱们常见的单击事件就是一个异步事件流,你可以观察这个流,也可以基于这个流做一些自定义操作(原文:side effects,副作用,本文皆翻译为自定义操作)。响应式就是基于这种想法。你能够创建所有事物的数据流,而不仅仅只是单击和悬停事件数据流。 流廉价且无处不在,任何事物都可以当作一个流:变量、用户输入、属性、缓存、数据结构等等。比如,假设你的微博评论就是一个跟单击事件一样的数据流,你能够监听这个流,并做出响应。

补充说明

"响应式编程"采用了“订阅/观察者”设计模式,使订阅者可以将通知主动发送给各订阅者。

RxJs一个响应式编程的实现库

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

以下几个概念是RxJs中比较重要的:

Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。

Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。

Subscription (订阅): 表示 Observable 的执行,主要用于取消 Observable 的执行。

Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。

Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。

Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

实例说明

注册事件监听器的常规写法。

var button = document.querySelector("button");
button.addEventListener("click", () => console.log("Clicked!"));

使用 RxJS 的话,创建一个 observable 来代替。

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .subscribe(() => console.log("Clicked!"));

未完待续...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89174.html

相关文章

  • 《Java编程方法论:响应RxJava与代码设计实战》序

    摘要:原文链接编程方法论响应式与代码设计实战序,来自于微信公众号次灵均阁正文内容在一月的架构和设计趋势报告中,响应式编程和函数式仍旧编列在第一季度的早期采纳者中。 原文链接:《Java编程方法论:响应式RxJava与代码设计实战》序,来自于微信公众号:次灵均阁 正文内容 在《2019 一月的InfoQ 架构和设计趋势报告》1中,响应式编程(Reactive Programming)和函数式...

    PAMPANG 评论0 收藏0
  • Web和Android中的Reactive

    摘要:中的常见写法先看下这段代码。声明式编程,就是告诉机器你想要的是什么,让机器想出如何去做。最独特的特性之一,是其非侵入性的响应式系统。的缩写将遍历此对象所有的属性。这一过程被称为依赖收集。组件的显示,数据的体现大部分都是由承载,传递。 目录 缘起 Android开发中的常见写法 JQuery中的常见写法 命令式编程 声明式编程 React中的常见写法 Vue的常见写法 你肯定熟悉响应...

    nanchen2251 评论0 收藏0
  • Web和Android中的Reactive

    摘要:中的常见写法先看下这段代码。声明式编程,就是告诉机器你想要的是什么,让机器想出如何去做。最独特的特性之一,是其非侵入性的响应式系统。的缩写将遍历此对象所有的属性。这一过程被称为依赖收集。组件的显示,数据的体现大部分都是由承载,传递。 目录 缘起 Android开发中的常见写法 JQuery中的常见写法 命令式编程 声明式编程 React中的常见写法 Vue的常见写法 你肯定熟悉响应...

    liangzai_cool 评论0 收藏0
  • Java Reactive Web设计与实现

    摘要:概念响应式编程,异步非阻塞就是响应式编程,与之相对应的是命令式编程。的另外一种实现方式就是消息队列。非阻塞设计利用规范中的实现实现代码链接 注: 本文是由读者观看小马哥公开课视频过程中的笔记整理而成。更多Spring Framework文章可参看笔者个人github: spring-framework-lesson 。 0. 编程模型与并发模型 Spring 5实现了一部分Reacti...

    siberiawolf 评论0 收藏0
  • RxJS 教程

    摘要:是针对异步数据流的编程。所以这个数据流只包含一个简单的反射值。且慢,天生就是处理异步数据流的,为何不把请求的响应作为一个携带数据的流呢么么哒,概念上没有问题,我们就来操作一下。你需要明确通知观察者或者订阅者数据流的到达或者错误的发生。 Reactive Programming是神马? 互联网上有很多不是很友好的解释。维基百科 宽泛而玄乎。 Stackoverflow教科书式的解释非常不...

    KnewOne 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<