[译] ECMAScript 的 Observables 提案

阅读：评论：0

开始之前

在之前读redux源码时，遇到了关于Symbol.observable的使用，发现从没有看到过这个特性，在国内的技术论坛上逛了许久发现提及此的文章甚少，恰巧今天在摸鱼时发现了一篇聊ECMAScript中新提案observables的文章，故翻译出来加深印象~

原文点此

ECMAScript 中的 Observables 提案

ps: 在下文中将以 ES 代替 ECMAScript

本文介绍的是当前还在ES提案阶段中的observables特性，在下文中通过本文，我们将带你了解该提案，该提案的api，以及一些使用案例

在写下这篇文章的时候，javascript的Observables(观察)正在通过RXJs、Bacon.js等各种类库逐渐普及。Jafar Husain，这位长久以来主张函数式编程的Netfix的技术leader（同时也是TC39的委员）也提出了将observables集成到我们js core中的议案，并且已经通过了stage1(征求意见阶段)且已经确定该提案即将进入stage2(草案阶段)。

`Observable` 和 `observer` 的api

在当前提案中，Observable是一个内建的被用来处理事件流的类，Obsservalbe的构造函数可以接受一个定义事件流的回调函数。在接下来的例子中，我们的observable将只返回值为1或者2的事件流。< 方法是用来在observalbe流中添加事件的：

new Observable(observer => {(1);(2);
})
复制代码

我们也可以使用<来记录在流处理时遇到的错误：

new Observable(observer => {(new Error(`Failed to stream events`))
})
复制代码

我们还可以使用observerplete来在流处理完结的时候发出信号：

new Observable(observer => {((2)observerplete()
})
复制代码

传递给我们Observable构造函数的这个回调函数会返回一个清理我们Observable实例的方法，它可以执行清理事件监听，定时任务等等类似的清理任务。举个例子，当然这个例子就要比上面这些有趣的多了，他追踪了用户在移动鼠标时，光标相对于页面的位置，并同时产生了描述当前光标坐标的事件流：

function mouseTracking () {return new Observable(observer => {const handler = ({ pageX, pageY }) => {({ x: pageX, y: pageY })}document.body.addEventListener(`mousemove`, handler)return () =>  {veEventListener(`mousemove`, handler)}})
}复制代码

为了订阅一个Observable的事件流，我们会使用Observable实例上的subscribe方法，这样做会调用我们之前实例化Observable时传入的回调函数，绑定事件的监听，并且启动整个事件流。这样做之后我们就能在移动鼠标的时候在事件流里捕获到它啦：

mouseTracking().subscribe({next({ x, y }) { console.log(`New position: ${ x }, ${ y }`) },error(err) { console.log(`Error: ${ err }`) },complete() { console.log(`Done!`) }
})
复制代码

订阅对象上的 unsubscribe

每次订阅我们都会生成一个订阅对象Subscription，这个订阅对象上会有一个unsubscribe方法让我们用来取消订阅，执行清理方法（我猜大家应该都还记着之前提到的清理函数吧~），当我们不再需要关注观察流里的事件的时候，just unsubscribe it，让我们将其解放吧。

const subscription = mouseTracking().subscribe({next({ x, y }) { console.log(`New position: ${ x }, ${ y }`) },error(err) { console.log(`Error: ${ err }`) },complete() { console.log(`Done!`) }
})subscription.unsubscribe()
复制代码

Observable.of

Observable.of(...items) 是一个简单有效的能帮助我们从提供的items中创建Observable的方法，在使用了Observable.of方法之后，items生成的Observable实例会在调用subscribe的同时生成事件流，返回items中的value：

Observable.of(1, 2, 3, 4).subscribe({next(item) { console.log(item) }
})
// <- 1
// <- 2
// <- 3
// <- 4
复制代码

我们甚至可以认为，Observable.of可以理解为跟以下接受一个入参，然后回传事件流的简单例子一样：

Observable.of = (...items) => {return new Observable(observer => {items.forEach(item => {(item)})observerplete()})
}
复制代码

Observable.from

Observable.from静态方法接受一个类型为对象的入参，如果这个对象中有键值为Symbol.observable的方法，那么就会返回这个方法的返回值。

Observable.from({[Symbol.observable]() { return Observable.of(1, 2, 3) }}).subscribe({next(item) { console.log(item) }})
// <- 1
// <- 2
// <- 3
复制代码

当然如果这个传入的对象没有实现Symbol.observable，那么我们就假定其传入的是一个可迭代的元素，Observable.from在这个时候的作用就是将迭代元素遍历并生成一个Observable实例，依次将被遍历的结果放入事件流中：

Observable.from([1, 2, 3]).subscribe({next(item) { console.log(item) }})
// <- 1
// <- 2
// <- 3
复制代码

在这种情况下，我们的Observable.from实现的功能和Observable.of是类似的，据此我们甚至可以这样去理解Observable.from的实现：

Observable.from = value => {if (typeof value[Symbol.observable] === `function`) {return value[Symbol.observable]()}return Observable.of(Array.from(value))
}
复制代码