一、背景

在学习Rx编程的过程中，了解Observable这个概念至关重要，惯例学习过程中，通常须要进行屡次“碰壁”能力逐步“开悟”。这个有点像小时候学骑自行车，必须摔几次能力把握一样。当然如果有方法能“言传”，则能够少走一些弯路，尽快领悟Rx的精妙。

二、Observable

Observable从字面翻译来说叫做“可观察者”，换言之就是某种“数据源”或者“事件源”，这种数据源具备可被察看的能力，这个和你被动去捞数据有本质区别。用一个形象的比喻就是Observable好比是水龙头，你能够去关上水龙头——订阅Observable，而后水——数据就会源源不断流出。这就是响应式编程的核心思想——变被动为被动。不过这个不在本篇文章中详解。

（图片起源自网络）

Observable是一种概念，能够通过不同的形式去具体实现，本文通过高阶函数来实现两个罕用Observable：fromEvent和Interval。通过解说对Observable的订阅和勾销订阅两个行为来帮忙读者真正了解Observable是什么。

三、高阶函数

高阶函数的概念来源于函数式编程，简略的定义就是一个函数的入参或者返回值是一个函数的函数。例如：

function foo(arg){    return function(){        console.log(arg)    }}const bar = foo(“hello world”)bar()  // hello world

ps：高阶函数能做的事件很多，这里仅仅针对本文须要的情景进行应用。

下面这个foo函数的调用并不会间接打印hello world，而只是把这个hello world给缓存起来。前面咱们依据理论须要调用返回进去的bar函数，而后真正去执行打印hello world的工作。

为啥要做这么一步封装呢？实际上这么做的成果就是“提早”了调用。而所有的精华就在这个“提早”两个字外面。咱们实际上是对一种行为进行了包装，看上去就像某种统一的货色，好比是快递盒子。

（图片起源自网络）

外面能够装不同的货色，但对于物流来说就是对立的货色。因而，就能够造成对快递盒的对立操作，比方重叠、运输、存储、甚至是关上盒子这个动作也是统一的。

回到后面的例子，调用foo函数，相当于打包了一个快递盒，这个快递盒外面有一个固定的程序，就是当关上这个快递盒（调用bar）时执行一个打印操作。

咱们能够有foo1、foo2、foo3……外面有各种各样的程序，然而这些foos，都有一个独特的操作就是“关上”。（前提是这个foo会返回一个函数，这样能力满足“关上”的操作，即调用返回的函数）。

function foo1(arg){    return function(){       console.log(arg+"?")    }}function foo2(arg){      return function(){         console.log(arg+"!")     }}const bar1 = foo1(“hello world”)const bar2 = foo2("yes")bar1()+bar2() // hello world? yes!

四、快递盒模型

4.1 快递盒模型1：fromEvent

有了下面的根底，上面咱们就来看一下Rx编程中最罕用的一个Observable—fromEvent(……)。对于Rx编程的初学者，起初很难了解fromEvent(……)和addEventListener(……)有什么区别。

btn.addEventListener("click",callback)rx.fromEvent(btn,"click").subscribe(callback)

如果间接执行这个代码，的确成果是一样的。那么区别在哪儿呢？最间接的区别是，subscribe函数作用在fromEvent(……)上而不是btn上，而addEventListener是间接作用在btn上的。subscribe函数是某种“关上”操作，而fromEvent(……)则是某种快递盒。

fromEvent实际上是对addEventListener的“提早”调用

function fromEvent(target,evtName){    return function(callback){        target.addEventListener(evtName,callback)    }}const ob = fromEvent(btn,"click")ob(console.log)// 相当于 subscribe

哦！fromEvent实质上是高阶函数

至于如何实现subscribe来实现“关上”操作，不在本文探讨范畴，在Rx编程中，这个subscribe的动作叫做“订阅”。“订阅”就是所有Observable的对立具备的操作。再次强调：本文中对Observable的“调用”在逻辑上相当于subscribe。

上面再举一个例子，根本能够让读者举二反N了。

4.2 快递盒模型2：interval

Rx中有一个interval，它和setInterval有什么区别呢？

预计有人曾经开始抢答了，interval就是对setInterval的提早调用！bingo！

function interval(period){    let i = 0    return function(callback){        setInterval(period,()=>callback(i++))    }}const ob = interval(1000)ob(console.log)// 相当于 subscribe

从下面两个例子来看，无论是fromEvent(……)还是Interval(……)，尽管外部是齐全不同的逻辑，然而他们同属于“快递盒”这种货色，咱们把它称之为Observable——可观察者。

fromEvent和Interval自身只是制作“快递盒”的模型，只有调用后返回的货色才是“快递盒”，即fromEvent(btn,"click")、interval(1000) 等等...

五、高阶快递盒

有了下面的根底，上面开始进阶：咱们领有了那么多快递盒，那么就能够对这些快递盒再封装。

在文章结尾说了，快递盒对立了一些操作，所以咱们能够把许许多多的快递盒重叠在一起，即组合成一个大的快递盒！这个大的快递盒和小的快递盒一样，具备“关上”操作（即订阅）。当咱们关上这个大的快递盒的时候，会产生什么呢？

能够有很多种不同的可能性，比方能够一一关上小的快递盒（concat），或者一次性关上所有小的快递盒（merge），也能够只关上那个最容易关上的快递盒（race）。

上面是一个简化版的merge办法：

function merge(...obs){    return function(callback){        obs.forEach(ob=>ob(callback)) // 关上所有快递盒    }}

咱们还是拿之前的fromEvent和interval来举例吧！

应用merge办法对两个Observable进行组合：

const ob1 = fromEvent(btn,'click') // 制作快递盒1const ob2 = interval(1000) // 制作快递盒2const ob = merge(ob1,ob2) //制作大快递盒ob(console.log) // 关上大快递盒

当咱们“关上”（订阅）这个大快递盒ob的时候，其中两个小快递盒也会被“关上”（订阅），任意一个小快递盒外面的逻辑都会被执行，咱们就合并（merge）了两个Observable，变成了一个。

这就是咱们为什么要辛辛苦苦把各种异步函数封装成快递盒（Observable）的起因了——不便对他们进行对立操作！当然仅仅只是“关上”（订阅）这个操作只是最高级的性能，上面开始进阶。

六、销毁快递盒

6.1 销毁快递盒——勾销订阅

咱们还是以fromEvent为例子，之前咱们写了一个简略的高阶函数，作为对addEventListener的封装：

function fromEvent(target,evtName){    return function(callback){        target.addEventListener(evtName,callback)    }}

当咱们调用这个函数的时候，就生成了一个快递盒（fromEvent(btn,'click'))。当咱们调用了这个函数返回的函数的时候，就是关上了快递盒（fromEvent(btn,'click')(console.log)）。

那么咱们怎么去销毁这个关上的快递盒呢？

首先咱们须要失去一个曾经关上的快递盒，下面的函数调用后果是void，咱们无奈做任何操作，所以咱们须要结构出一个关上状态的快递盒。还是应用高阶函数的思维：在返回的函数外面再返回一个函数，用于销毁操作。

function fromEvent(target,evtName){    return function(callback){        target.addEventListener(evtName,callback)        return function(){            target.removeEventListener(evtName,callback)        }    }}const ob = fromEvent(btn,'click') // 制作快递盒const sub = ob(console.log) // 关上快递盒，并失去一个可用于销毁的函数sub() // 销毁快递盒

同理，对于interval，咱们也能够如法炮制：

function interval(period){    let i = 0    return function(callback){        let id = setInterval(period,()=>callback(i++))        return function(){            clearInterval(id)        }    }}const ob = interval(1000) // 制作快递盒const sub = ob(console.log) // 关上快递盒sub() // 销毁快递盒

6.2 销毁高阶快递盒

咱们以merge为例：

function merge(...obs){    return function(callback){        const subs = obs.map(ob=>ob(callback)) // 订阅所有并收集所有的销毁函数        return function(){            subs.forEach(sub=>sub()) // 遍历销毁函数并执行        }    }} const ob1 = fromEvent(btn,'click') // 制作快递盒1const ob2 = interval(1000) // 制作快递盒2const ob = merge(ob1,ob2) //制作大快递盒const sub = ob(console.log) // 关上大快递盒sub() // 销毁大快递盒

当咱们销毁大快递盒的时候，就会把外面所有的小快递盒一起销毁。

六、补充

到这里咱们曾经将Observable的两个重要操作（订阅、勾销订阅）讲完了，值得注意的是，勾销订阅这个行为并非是作用于Observable上，而是作用于曾经“关上”的快递盒（订阅Observable后返回的货色）之上！

Observable除此以外，还有两个重要操作，即收回事件、实现/异样，（这两个操作属于是由Observable被动发动的回调，和操作的方向是相同的，所以其实不能称之为操作）。

这个两个行为用快递盒就不那么形象了，咱们能够将Observable比做是水龙头，原先的关上快递盒变成拧开水龙头，而咱们传入的回调函数就能够比喻成接水的水杯！因为大家对回调函数曾经十分相熟了，所以本文就不再赘述了。

七、后记

总结一下咱们学习的内容，咱们通过高阶函数将一些操作进行了“提早”，并赋予了对立的行为，比方“订阅”就是提早执行了异步函数，“勾销订阅”就是在下面的根底上再“提早”执行了销毁资源的函数。

这些所谓的“提早”执行就是Rx编程中幕后最难了解，也是最外围的局部。Rx的实质就是将异步函数封装起来，而后形象成四大行为：订阅、勾销订阅、收回事件、实现/异样。

理论实现Rx库的办法有很多，本文只是利用了高阶函数的思维来帮忙大家了解Observable的实质，在官网实现的版本中，Observable这个快递盒并非是高阶函数，而是一个对象，但实质上是一样的，这里引出了一个话题：函数式编程与面向对象的异同，请听下回分解。

作者：vivo互联网开发团队-Li Yuxiang