Observable 原生 JS 实现，竟如此简单？且听我娓娓道来！

2024-02-10 19:28:07

在异步编程的世界中，Observable 是一种处理异步操作的利器，它基于发布-订阅模式，允许开发人员轻松地处理异步事件。本篇文章将以原生 JavaScript 为基础，一步步带领您构建一个简单的 Observable 实现，让您亲身体验这种编程范式的魅力。

1. Observable 的基本原理

Observable 本质上是一个对象，它有两个主要功能：

订阅(subscribe)：允许其他对象(称为观察者)订阅它，以便在 Observable 发出值或错误时得到通知。
发布(publish)：Observable 可以通过调用 next() 方法来发布值，或者通过调用 error() 或 complete() 方法来发布错误或完成信号。

观察者通过订阅 Observable 来接收其发出的值，而 Observable 则通过发布值来通知观察者。这种发布-订阅模式使得 Observable 非常适合处理异步事件，因为它允许开发人员以一种解耦和可扩展的方式来处理这些事件。

2. 原生 JS 实现 Observable

以下是如何使用原生 JavaScript 实现 Observable 的一个简单示例：

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  next(value) {
    this.observers.forEach((observer) => observer.next(value));
  }

  error(error) {
    this.observers.forEach((observer) => observer.error(error));
  }

  complete() {
    this.observers.forEach((observer) => observer.complete());
  }
}

const observable = new Observable();

observable.subscribe({
  next(value) {
    console.log(value);
  },
  error(error) {
    console.error(error);
  },
  complete() {
    console.log('Completed!');
  }
});

observable.next(1);
observable.next(2);
observable.next(3);
observable.complete();

在这个例子中，我们创建了一个 Observable 类，它具有 subscribe()、next()、error() 和 complete() 方法。我们还创建了一个观察者对象，它具有 next()、error() 和 complete() 方法，用于处理 Observable 发出的值、错误和完成信号。然后，我们将观察者订阅到 Observable，并使用 next() 方法向 Observable 发布一些值。最后，我们调用 complete() 方法来通知 Observable 完成。