实现RxJS只需几十行代码！

前言

最近，接手了一个新的项目，在研究其技术栈的时候，发现了一个叫响应式编程的库，名也 "RxJS"。该库是采用异步处理事件流的响应式编程的工具库。在处理事件流的形式非常的妙，为了更清晰的了解其库的设计思想，于是造一个mini-RxJS。

下面将讲解如何用几十行代码来实现一个简易版的RxJS。

RxJS的使用

首先，我们先通过npm安装一下 rxjs 三方库。接着引入RxJS，创建一个Observable，由它发出每一个事件。

代码如下：

在Observable回调函数里面创建了一个定时器，不断通过next传入事件流。有了Observable监听，那必然有subscribe订阅。

代码如下：

订阅者可以接收next传递过来的事件流，传输过程可以执行error, complete等操作。

当然，有订阅就有取消订阅的存在。上面创建的Observable里，我们还返回了一个unsubscribe函数进行取消订阅。

我们设置一个定时器，在3.2秒后取消订阅。

现在，我们来运行一下代码，看看控制台输出了什么。

事件的发送，监听只是RxJS的前菜，而处理事件流的过程才是RxJS的主食。在RxJS有一个pipe管道的概念，可以通过操作符operator组合处理这个管道。

下面我们在订阅前，引入RxJS的pipe进行事件流的处理：

接下来，我们再来看看控制台的输出。

事件经过管道处理之后，再传到Observer，传输的过程可以进行各种操作符的处理。

根据上述，RxJS的简单使用代码如下：

mini-RxJS的实现

在实现mini-RxJS前，是少不了看RxJS源码的，通过借鉴源码来实现一个简易版RxJS，只需要几十行代码。

我们先简单的实现Subscription类，从使用的角度出发，可以知道Observable接收一个回调函数，那么我们需要创建个私有变量来收集这些回调函数。回调函数如果是返回函数为unsubscribe的话，就执行该函数进行回调取消订阅。

代码如下：

接着实现Subscriber订阅者类，该类是用来添加Observable的订阅，返回Subscription。也就是我们将要继承Subscription。

回调函数是拥有：next、error、complete方法，是用于传递事件流的。

代码如下：

接下来创建Observable类，Observable接收一个回调函数，那么需要调用Subscription的add方法对象进行收集回调函数。而Observable类同时也提供subscribe方法。

代码如下：

导出该Observable类，供外面调用。至此，我们已经差不多实现好了RxJS的Observable、Subscription、Subscriber的响应式编程的概念。

接下来实现核心的异步事件流的处理的pipe管道方法。管道的意思是上个的输出是下个的输入。

pipe管道方法是基于operator操作符进行事件流的处理。那么，我们还需要简单实现operator操作符。在Observable类上添加pipe方法。

代码如下：

pipe的管道组成实现是通过reduce方法传递，pipe方法对应的pipeFormArray的实现如下：

其operator操作符的实现是监听上一个Observable，返回一个新的Observable。最后实现map操作符，就大功告成啦~ 

至此，几十行代码已经实现好了一个RxJS，接着我们需要来测试一下是否可行。

执行后的输出：

再来试一下接入pipe管道的输出：

输出结果：

现在，我们已经通过几十行代码实现了一个简易版的RxJS。看到这的小伙伴，希望你有所收获。

源码地址：

GitHub - jobinben/mini-RxJS: 实现一个简易版的RxJS，使用Observables的响应式编程的库