RxJS - Observables, observers 和 operators 简介

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_34040079

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009924164

版权

RxJS 是响应式编程 (reactive programming) 强大的工具，今天我们将深入介绍 Observables 和 Observers 的内容，以及介绍如何创建自己的操作符 (operators)。

如果你之前已经使用过 RxJS，并希望了解 Observable 及 Operators (操作符) 的内部工作原理，那么这篇文章非常适合你。

什么是 Observable

Observable 就是一个拥有以下特性的函数：

它接收一个 observer 对象作为参数，该对象中包含 next、error 和 complete 方法
它返回一个函数，用于在销毁 Observable 时，执行清理操作

在我们实现的示例中，我们将定义一个简单的 unsubscribe 函数来实现取消订阅的功能。然而在 RxJS 中，返回的是 Subcription 对象，该对象中包含一个 unsubscribe 方法。

一个 Observable 对象设置观察者 (observer)，并将它与生产者关联起来。该生产者可能是 DOM 元素产生的 click 或 input 事件，也可能是更复杂的事件，如 HTTP。

为了更好地理解 Observable，我们来自定义 Observable。首先，我们先来看一个订阅的例子：

const node = document.querySelector('input[type=text]');

const input$ = Rx.Observable.fromEvent(node, 'input');

input$.subscribe({
  next: (event) => console.log(`You just typed ${event.target.value}!`),
  error: (err) => console.log(`Oops... ${err}`),
  complete: () => console.log(`Complete!`)
});

该示例中，Rx.Observable.formEvent() 方法接收一个 input 元素和事件名作为参数，然后返回一个 $input Observable 对象。接下来我们使用 subscribe() 方法来定于该 Observable 对象。当触发 input 事件后，对应的值将会传递给 observer 对象。

什么是 Observer

Observer (观察者) 非常简单，在上面的示例中，观察者是一个普通的对象，该对象会作为 subscribe() 方法的参数。此外 subscribe(next, error, complete) 也是一个有效的语法，但在本文中我们将讨论对象字面量的形式。

当 Observable 对象产生新值的时候，我们可以通过调用 next() 方法来通知对应的观察者。若出现异常，则会调用观察者的 error() 方法。当我们订阅 Observable 对象后，只要有新的值，都会通知对应的观察者。但在以下两种情况下，新的值不会再通知对应的观察者：

已调用 observer 对象的 complete() 方法
消费者对数据不再感兴趣，执行取消订阅操作

此外在执行最终的 subscribe() 订阅操作前，我们传递的值可以经过一系列的链式处理操作。执行对应操作的东西叫操作符，每个操作符执行完后会返回一个新的 Observable 对象，然后继续我们的处理流程。

什么是 Operator

正如上面所说的，Observable 对象能够执行链式操作，具体如下所示：

const input$ = Rx.Observable.fromEvent(node, 'input')
  .map(event => event.target.value)
  .filter(value => value.length >= 2)
  .subscribe(value => {
    // use the `value`
});

上面代码的执行流程如下：

假设用户在输入框中输入字符 a
Observable 对象响应对应的 input 事件，然后把值传递给 observer
map() 操作符返回一个新的 Observable 对象
filter() 操作符执行过滤操作，然后又返回一个新的 Observable 对象
最后我们通过调用 subscribe() 方法，来获取最终的值

简而言之，Operator 就是一个函数，它接收一个 Observable 对象，然后返回一个新的 Observable 对象。当我们订阅新返回的 Observable 对象时，它内部会自动订阅前一个 Observable 对象。

自定义 Observable

Observable 构造函数

function Observable(subscribe) {
  this.subscribe = subscribe;
}

每个 subscribe 回调函数被赋值给 this.subscribe 属性，该回调函数将会被我们或其它 Observable 对象调用。

Observer 示例

在我们深入介绍前，我们先来看一个简单的示例。之前我们已经创建完 Observable 函数，现在我们可以调用我们的观察者 (observer)，然后传递数值 1，然后订阅它：

const one$ = new Observable((observer) => {
  observer.next(1);
  observer.complete();
});

one$.subscribe({
  next: (value) => console.log(value) // 1
});

即我们订阅我们创建的 Observable 实例，然后通过 subscribe() 方法调用通过构造函数设置的回调函数。

Observable.fromEvent

下面就是我们需要的基础结构，即在 Observable 对象上需要新增一个静态方法 fromEvent ：

Observable.fromEvent = (element, name) => { };

接下来我们将参考 RxJS 为我们提供的方法来实现自定义的 fromEvent() 方法：

const node = document.querySelector('input');
const input$ = Observable.fromEvent(node, 'input');

按照上面的使用方式，我们的 fromEvent() 方法需要接收两个参数，同时需要返回一个新的 Observable 对象，具体如下：

Observable.fromEvent = (element, name) => {
  return new Observable((observer) => {
    
  });
};

接下来我们来实现事件监听功能：

Observable.fromEvent = (element, name) => {
  return new Observable((observer) => {
    element.addEventListener(name, (event) => {}, false);
  });
};

那么我们的 observer 参数来自哪里？其实 observer 对象就是包含 next、error 和 complete 方法的对象字面量。

需要注意的是，我们的 observer 参数不会被传递，直到 subscribe() 方法被调用。这意味着 addEventListener() 方法不会被调用，除非你订阅该 Observable 对象。

当我们调用 subscribe() 方法，之前设置的 this.subscribe 回调函数会被调用，对应的参数是我们定义的 observer 对象字面量，接下来将使用新的值，作为 next() 方法的参数，调用该方法。

很好，那接下来我们要做什么？之前版本我们只是设置了监听，但没有调用 observer 对象的 next() 方法，接下来让我们来修复这个问题：

Observable.fromEvent = (element, name) => {
  return new Observable((observer) => {
    element.addEventListener(name, (event) => {
      observer.next(event);
    }, false);
  });
};

如你所知，当销毁 Observables 对象时，需要调用一个函数用来执行清理操作。针对目前的场景，在销毁时我们需要移除事件监听：

Observable.fromEvent = (element, name) => {
  return new Observable((observer) => {
    const callback = (event) => observer.next(event);
    element.addEventListener(name, callback, false);
    return () => element.removeEventListener(name, callback, false);
  });
};

我们没有调用 complete() 方法，因为该 Observable 对象处理的 DOM 相关的事件，在时间维度上它们可能是无终止的。

现在让我们来验证一下最终实现的功能：

const node = document.querySelector('input');
const p = document.querySelector('p');

function Observable(subscribe) {
  this.subscribe = subscribe;
}

Observable.fromEvent = (element, name) => {
  return new Observable((observer) => {
    const callback = (event) => observer.next(event);
    element.addEventListener(name, callback, false);
    return () => element.removeEventListener(name, callback, false);
  });
};

const input$ = Observable.fromEvent(node, 'input');

const unsubscribe = input$.subscribe({
  next: (event) => {
    p.innerHTML = event.target.value;
  }
});

// automatically unsub after 5s
setTimeout(unsubscribe, 5000);

自定义操作符

创建我们自己的操作符应该会更容易一些，现在我们了解 Observable 和 Observable 背后的概念。我们将在 Observable 的原型对象上添加一个方法：

Observable.prototype.map = function (mapFn) { };

该方法的功能与 JavaScript 中的 Array.prototype.map 方法类似：

const input$ = Observable.fromEvent(node, 'input')
        .map(event => event.target.value);

所以我们需要应用回调函数并调用它，这用于获取我们所需要的数据。在我们这样做之前，我们需要流中的最新值。这里是巧妙的部分，在 map() 操作符中，我们需要访问 Observable 实例。因为 map 方法在原型上，我们可以通过以下方式访问 Observable 实例：

Observable.prototype.map = function (mapFn) {
  const input = this;
};

接下来我们在返回的 Observable 对象中执行 input 对象的订阅操作：

Observable.prototype.map = function(mapFn) {
  const input = this;
  return new Observable((observer) => {
    return input.subscribe();
  });
};

我们返回了 input.subscribe() 方法执行的结果，因为当我们执行取消订阅操作时，将会依次调用每个 Observable 对象取消订阅的方法。

最后我们来完善一下 map 操作符的内部代码：

Observable.prototype.map = function (mapFn) {
  const input = this;
  return new Observable((observer) => {
    return input.subscribe({
      next: (value) => observer.next(mapFn(value)),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
};

现在我们已经可以执行链式操作了：

const input$ = Observable.fromEvent(node, 'input')
  .map(event => event.target.value);

input$.subscribe({
  next: (value) => {
    p.innerHTML = value;
  }
});