实现一个简单的观察者模式js

前言

观察者模式是一种设计模式，它允许对象之间的松耦合通信。当对象发生更改时，观察者模式允许其他对象得到通知并自动更新自己。

在这篇文章中，我们将深入了解观察者模式及其如何在JavaScript中实现。

观察者模式说起来简单，但实际上需要多个对象之间的通信才能实现。通信应该是双向的，就像一个发行者发布一个事件，所有的观察者都能够接受这个事件。每当发生重大的更改时，发行者都会发布一个事件，所有的观察者都会收到一个通知。

如果您熟悉事件驱动的编程，观察者模式就是一个自然的扩展。在事件驱动编程中，对象可以发布事件，并允许其他对象注册回调函数以响应该事件。

在本文中，我们将介绍如何使用纯JavaScript实现一个基本的观察者模式。我们将首先讨论观察者模式的基本概念，然后演示如何使用JavaScript实现它。

观察者模式的基本概念

在观察者模式中，存在两类对象：发行者和观察者。发行者是生成事件的对象，观察者是需要知道该事件的对象。发行者在发送通知时不需要知道有哪些观察者注册了该事件。观察者注册发行者的事件并在一定条件下准备好对接收到的通知做出响应。

让我们看一个实际的例子来帮助理解。考虑一个电影订阅服务。电影公司发布了新电影，这时期待该电影上映的用户将收到电子邮件通知。在这个例子中，电影公司是发行者，电影订阅服务是观察者。发行者不需要知道有多少用户已经注册了该通知服务。只要有用户注册，电影公司就可以发布通知。

现在让我们看看如何实现观察者模式。

实现观察者模式

我们将需要一个观察者列表来存储所有已注册的观察者。我们还需要一些函数来将观察者添加到列表中，将观察者从列表中删除，并向观察者发布通知。

首先，我们将创建一个观察者类，该类将具有两个方法：update和subscribe。 update方法是观察者注册的方法，当事件发生时，该方法将被执行。subscribe方法将观察者添加到观察者列表中。

```

class Observer {

update(value) { console.log(value) }

subscribe(publisher) { publisher.subscribe(this); }

}

```

现在，我们需要一个具有发布功能的发行者。发布者需要具有一个观察者列表，该列表存储已注册的观察者。publish方法将通知所有已注册的观察者。

```

class Publisher {

observers = []

add(observer) {

this.observers.push(observer)

}

remove(observer) {

this.observers = this.observers.filter(o => o !== observer)

}

notify(value) {

this.observers.forEach(o => o.update(value))

}

subscribe(observer) {

this.add(observer)

observer.subscribe(this)

}

unsubscribe(observer) {

this.remove(observer)

}

}

```

现在我们可以创建一个发布者对象并向其中添加观察者。观察者将向其创建的发布者对象注册。现在任何更改都会通知所有观察者。

```

let publisher = new Publisher()

let observer1 = new Observer()

let observer2 = new Observer()

publisher.subscribe(observer1)

publisher.subscribe(observer2)

publisher.notify('Hello world') // logs "Hello world" twice

```

现在我们看到了如何在JavaScript中实现一个基本的观察者模式！