一、背景

在学习 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') // 制作快递盒 1
const ob2 = interval(1000) // 制作快递盒 2
const 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') // 制作快递盒 1
const ob2 = interval(1000) // 制作快递盒 2
const ob = merge(ob1,ob2) // 制作大快递盒
const sub = ob(console.log) // 关上大快递盒
sub() // 销毁大快递盒

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

六、补充

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

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

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

七、后记

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

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

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

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