前言
最近,接手了一个新的项目,在研究其技术栈的时候,发现了一个叫响应式编程的库,名也 "RxJS"。该库是采用异步处理事件流的响应式编程的工具库。在处理事件流的形式非常的妙,为了更清晰的了解其库的设计思想,于是造一个mini-RxJS。
下面将讲解如何用几十行代码来实现一个简易版的RxJS。
RxJS的使用
首先,我们先通过npm安装一下 rxjs 三方库。接着引入RxJS,创建一个Observable,由它发出每一个事件。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/23b2783967fc13e926b29a75bdfde134.png)
在Observable回调函数里面创建了一个定时器,不断通过next传入事件流。有了Observable监听,那必然有subscribe订阅。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/fda29c5ef2b000805689e9406c22d2db.png)
订阅者可以接收next传递过来的事件流,传输过程可以执行error, complete等操作。
当然,有订阅就有取消订阅的存在。上面创建的Observable里,我们还返回了一个unsubscribe函数进行取消订阅。
我们设置一个定时器,在3.2秒后取消订阅。
![](https://i-blog.csdnimg.cn/blog_migrate/43b17f60fe363a97db2eeca65919a712.png)
现在,我们来运行一下代码,看看控制台输出了什么。
![](https://i-blog.csdnimg.cn/blog_migrate/5baf5b7402cbce127ae4eb04476c1e0c.png)
事件的发送,监听只是RxJS的前菜,而处理事件流的过程才是RxJS的主食。在RxJS有一个pipe管道的概念,可以通过操作符operator组合处理这个管道。
下面我们在订阅前,引入RxJS的pipe进行事件流的处理:
![](https://i-blog.csdnimg.cn/blog_migrate/cde3be0d27a1939bb3e1bc70a2a1f549.png)
接下来,我们再来看看控制台的输出。
![](https://i-blog.csdnimg.cn/blog_migrate/96a0b41d5243485512c77deeaae9a0d1.png)
事件经过管道处理之后,再传到Observer,传输的过程可以进行各种操作符的处理。
根据上述,RxJS的简单使用代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/2f50debddeb7dd36b567d4b18ec8015f.png)
mini-RxJS的实现
在实现mini-RxJS前,是少不了看RxJS源码的,通过借鉴源码来实现一个简易版RxJS,只需要几十行代码。
我们先简单的实现Subscription类,从使用的角度出发,可以知道Observable接收一个回调函数,那么我们需要创建个私有变量来收集这些回调函数。回调函数如果是返回函数为unsubscribe的话,就执行该函数进行回调取消订阅。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/88c87cad5abfd3f97fa5073499c45e52.png)
接着实现Subscriber订阅者类,该类是用来添加Observable的订阅,返回Subscription。也就是我们将要继承Subscription。
回调函数是拥有:next、error、complete方法,是用于传递事件流的。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/bc2ebd5e22680e9a0530db69f709b22a.png)
接下来创建Observable类,Observable接收一个回调函数,那么需要调用Subscription的add方法对象进行收集回调函数。而Observable类同时也提供subscribe方法。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ba29bc5260098b70a9d2dd9c58f38677.png)
导出该Observable类,供外面调用。至此,我们已经差不多实现好了RxJS的Observable、Subscription、Subscriber的响应式编程的概念。
接下来实现核心的异步事件流的处理的pipe管道方法。管道的意思是上个的输出是下个的输入。
pipe管道方法是基于operator操作符进行事件流的处理。那么,我们还需要简单实现operator操作符。在Observable类上添加pipe方法。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/01014c5789e148e9e4f12ec96aa9ec3e.png)
pipe的管道组成实现是通过reduce方法传递,pipe方法对应的pipeFormArray的实现如下:
![](https://i-blog.csdnimg.cn/blog_migrate/d2119991222de4dcdfddb69792b54a45.png)
其operator操作符的实现是监听上一个Observable,返回一个新的Observable。最后实现map操作符,就大功告成啦~
![](https://i-blog.csdnimg.cn/blog_migrate/c6bc84aeb2c3825a77df2314e108e78b.png)
至此,几十行代码已经实现好了一个RxJS,接着我们需要来测试一下是否可行。
![](https://i-blog.csdnimg.cn/blog_migrate/e8f4b08246aeff58ae2b446a06380090.png)
执行后的输出:
![](https://i-blog.csdnimg.cn/blog_migrate/1c575b604449da0cd1bf8d595ac6dd95.png)
再来试一下接入pipe管道的输出:
![](https://i-blog.csdnimg.cn/blog_migrate/9015f0698cc6b68ca138102f03f96b46.png)
输出结果:
![](https://i-blog.csdnimg.cn/blog_migrate/43ece377a8cbf5fd63f7c1902b42a4a3.png)
现在,我们已经通过几十行代码实现了一个简易版的RxJS。看到这的小伙伴,希望你有所收获。
源码地址:
GitHub - jobinben/mini-RxJS: 实现一个简易版的RxJS,使用Observables的响应式编程的库