30 天精通 RxJS (01):认识 RxJS

原作者表示:一名來自台灣的小伙子,熱愛學習新技術,喜歡 JS 與 Functional Programming,熱衷於把困難的技術用簡單的語言闡述,歡迎來到我的文章。

原文

在网页中存取数据都是异步(Async)的,比如说我们想从后端拿到一组数据,要先发送一个请求,然后必须等到数据回來,再执行对这个数据的操作。这就是一个异步的行为,而随着网页需求的复杂化,我们所写的 JavaScript 就有各钟针对异步行为的写法,例如使用 callback 或是 Promise 对象甚至是新的语法糖 async/await —— 但随着应用需求越来越复杂,撰写非同步的代码仍然非常困难。

异步常见的问题

  • 竟态条件 (Race Condition)
  • 内存泄漏 (Memory Leak)
  • 复杂的状态 (Complex State)
  • 异常处理 (Exception Handling)

Race Condition

当我们对同一个资源同时做多次的异步存取时,就可能发生 Race Condition 的问题。比如说我们发了一个 Request 更新使用者资料,然后我们又立即发送另一个 Request 取得使用者资料,这时第一个 Request 和第二个 Request 先后顺序就会影响到最终接收到的结果不同,这就是 Race Condition。

Memory Leak

Memory Leak 是最常被大家忽略的一点。原因是在传统网站开发中,我们每次跳转都是整个页面重新加载,重新执行 JavaScript,所以不太需要关注内存的问题!但是当我们希望将网站做得像软件时,这件事就变得很重要。例如做 SPA (Single Page Application) 网站时,我们是通过 JavaScript 来达到切换页面的內容,这时如果有对 DOM 注册监听事件,而沒有在适当的时机把监听的事件移除,就有可能造成 Memory Leak。比如说在 A 页面监听 body 的 scroll 事件,但页面切换时,沒有把 scroll 的监听事件移除。

Complex State

当有异步行为时,函数的状态就会变得非常复杂!比如说我们有一个付费用户才能播放的视频,首先可能要先获取这部视频的信息,接着我们要在播放时去验证使用者是否有权限播放,而使用者也有可能再按下播放后又立即按了取消,而这些都是异步执行,这时就有会各种复杂的状态需要处理。

Exception Handling

JavaScript的try/catch可以捕捉同步的异常,但异步的程序就没这么容易,尤其当我们的异步行为很复杂时,这个问题就愈加明显。

各种不同的API

我们除了要面对异步会遇到的各种问题外,还需要烦恼很多不同的API

  • DOM Events
  • XMLHttpRequest
  • Fetch
  • WebSockets
  • Server Send Events
  • Service Worker
  • Node Stream
  • Timer

上面列的API都是异步的,但他们都有各自的API及写法!如果我们使用RxJS,上面所有的API都可以通过RxJS来处理,就能用同样的API操作(RxJS的API)。

这里我们举一个例子,假如我们想要监听点击事件(click event),但点击一次之后不再监听。

原生JavaScript

var handler = (e) => {
	console.log(e);
	document.body.removeEventListener('click', handler); // 结束监听
}

// 注册监听
document.body.addEventListener('click', handler);
复制代码

使用 Rx

Rx.Observable
	.fromEvent(document.body, 'click') // 注册监听
	.take(1) // 只取一次
	.subscribe(console.log);
复制代码

大致上能看得出来我们在使用RxJS后,不管是针对DOM Event还是上面列的各种API我们都可以通过RxJS的API来做数据操作,示例中用take(n)来设定只取一次,之后就释放內存。

说了这么多,其实就是简单一句话

在面对日益复杂的问题,我们需要一个更好的解决方法。

RxJS 基本介绍

RxJS是一套由 Observable sequences 来组合 异步行为事件基础函数 的Library!

可以把RxJS想成处理异步行为的Lodash。

也可以被称为Functional Reactive Programming,更切确地说是指Functional Programming及Reactive Programming两个编程思想的结合。

RxJS确实是Functional Programming跟Reactive Programming的结合,但能不能称为Functional Reactive Programming(FRP)一直有争议。

Rx在官网上特别指出,有时这会被称为FRP,但这其实是个“误称”。

简单说FRP是操作随着时间连续性改变的数值,而Rx则比较像是操作随着时间发出的离散数值,这个部份读者不用分得太细,因为FRP的定义及解释一直存在着歧异,也有众多大神为此争论,如下

AndréStaltz: Rx著名的推广者,也是RxJS 5主要贡献者之一,同时是Cycle.js的作者。Staltz特别写了一篇文章解释为什么Rx不能说是FRP但他仍然称其为FRP。

Juan Gomez:曾在Netflix工作,目前任职于Fitbit,经常出现在国外演讨会,主要写Android。Juan Gomez在 Droidcon NYC 2015的演讲 中特别提出他坚持称Rx为FRP。

Evan Czaplicki:任职于NoRedInk,Elm的作者。Evan在 StrangeLoop 2014的演讲 中,特别为现在各种FRP的不同解释做分类。

关于Reactive Extension(Rx)

Rx最早是由微软开发的LinQ扩展出来的开源项目,之后主要由社区的工程师贡献,有多种语言支持,也被许多科技公司所采用,如Netflix,Trello,Github,Airbnb…等。

Functional Reactive Programming

Functional Reactive Programming是一种编程思想(programming paradigm),举个例子,像OOP就是一种编程思想,OOP告诉我们要使用对象的方式来思考问题,以及编写程序。而Functional Reactive Programming其实涵盖了Reactive Programming及Functional Programming两种编程思想。

Functional Programming

Functional Programming大部分的人应该多少都有接触过,这也是Rx学习过程中的重点之一,我们之后会花两章的篇幅来细讲Functional Programming。如果要用一句话来总结Functional Programming,那就是 用function来思考我们的问题,以及撰写程序

在下一篇文章会更深入的讲解Functional Programming

Reactive Programming

很多人一谈到Reactive Programming就会直接联想到是在讲RxJS,但实际上Reactive Programming仍是一种编程思想,在不同的场景都有机会遇到,而非只存在于RxJS,尤雨溪(Vue的作者)就曾在twitter对此表达不满!

Reactive Programming简单来说就是 当变量或数据发生变化时,由变量或数据自动告诉我发生变动了

这句话看似简单,其实背后隐含两件事

  • 当发生变动=>异步:不知道什么时候会发生变动,反正变动时要跟我说

  • 由变量自动告知我=>不用通知我的每一步代码

由于最近很红的Vue.js底层就是用Reactive Programming的概念实现,能很好的举例,让大家理解什么是Reactive Programming!

当我们在使用vue开发时,只要一有绑定的变量发生改变,相关的变量及页面也会跟着变动,而开发者不需要写这其中如何 通知 发生变化的每一步代码,只需要 专注在发生变化时要做什么事 ,这就是典型的Reactive Programming(记得必须是由变量或数据主动告知!)

Vue.js在做two-ways data binding是通过ES5 definedProperty的getter/setter。每当变量发生变动时,就会执行getter/setter从而收集有改动的变量,这也被称为 依赖收集

Rx基本上就是上述的两个观念的结合,这个部份在看完之后的文章,会有更深的体悟。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章