走进JavaScript响应式编程(Reactive Programming)
或许"响应式布局"这个名单大家都听过或者都自己实现过,那么"响应式编程"是什么呢?下面我们来具体聊一聊。
我的理解
从字面意思上我们可以大致理解为:所有的事件存在于一条事件总线上,所有的事件都可以看作未来某个时间将要发生的事件流(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!'));
未完待续...
走进JavaScript响应式编程(Reactive Programming)相关推荐
- 响应式编程Reactive Programming
作者: @andrestaltz 翻译:@benjycui.@jsenjoy 作者在原文后回答了不少人的疑惑,推荐一看. 在翻译时,术语我尽量不翻译,就算翻译了也会给出原文以作对照.因为就个人观察的情 ...
- 什么是反应式编程? 这里有你想要了解的反应式编程 (Reactive programming)
理解反应式编程 你曾有过订阅报纸或者杂志的经历吗?互联网的确从传统的出版发行商那儿分得了一杯羹,但是过去订阅报纸真的是我们了解时事的最佳方式.那时,我们每天早上都会收到一份新鲜出炉的报纸,并在早饭时间 ...
- wince支持多线程编程吗_以前面试只问多线程,现在都开始问响应式编程了!我懵了...
以前面试只问多线程,现在都开始问响应式编程了! 看完这篇文章你就能有个大体的了解了. 基本介绍 目前比较流行的编程方法论有函数式编程(functional programming).响应式编程(rea ...
- ⒈响应式编程 Project Reactor 概述
文章目录 What is Reactive Programming? Project Reactor & Reactive Programming 总览 Features Best pract ...
- 响应式编程知多少 | Rx.NET 了解下
1. 引言 An API for asynchronous programming with observable streams. ReactiveX is a combination of the ...
- 未来:spring响应式编程 Hands-On Reactive Programming in Spring 5(二)------Basic Concepts
看完这篇文章你会有很大收获! 好学近乎知,力行近乎仁,知耻而后勇. The previous chapter explained why it is important to build reacti ...
- 未来:spring响应式编程 Hands-On Reactive Programming in Spring 5 ,为啥需要响应式编程
Why Reactive Spring? 为什么 使用响应式 的spring In this chapter, we are going to explain the concept of react ...
- 什么是响应式编程(Reactive Programming)
1.什么是响应式编程(Reactive Programming) Wikipedia上这样说: In computing, reactive programming is an asynchronou ...
- 响应式编程(Reactive Programming)是什么?
简介 在计算中,响应式编程(Reactive Programming)是一种面向数据流和变化传播的声明式编程范式. 这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化 ...
最新文章
- 深度学习必懂的 13 种概率分布(附链接)
- 奉劝各位的atas几句话,别怪我没提醒
- 解决Mac上adb: command not found问题
- poj2965 【枚举】
- 如何通过代码获得当前SAP Spartacus Component渲染所基于的slot名称
- python +appium实现原理_python_appium使用原理
- 关于数据库主键和外键
- Oracle Study之--Oracle等待事件(5)
- 程序员奉劝年轻人转行趁早:工作8年存款百万,33岁找不到工作
- Word如何添加楷体_GB2312
- 【图像去噪】基于matlab维纳滤波图像去噪【含Matlab源码 725期】
- 【HDU 6274】Master of sequence【二分答案+下取整转换】
- 摩拜单车开锁实现原理剖析
- arcgis两点之间连线_three3D地图设置两点之间的连线
- 2021年中国嵌入式系统软件业务收入及业务收入结构分析[图]
- 英语词根词缀记忆法(全集)_语言学习 | 英语词根词缀学习参考
- 在BuildConfig中添加自定义字段
- 网络运维系列:GoDaddy Shell DDNS配置
- 小伙教你用C++编写飞机大战,编程学习,有源代码哦
- ICCV2021-Soft Teacher-End-to-End Semi-Supervised Object Detection with Soft Teacher