JavaScript之观察者模式

本文作者为 360 奇舞团前端开发工程师

概述

在日常开发中，开发人员经常使用设计模式来解决软件设计中的问题。其中，观察者模式是一种常用的模式，它可以帮助开发人员更好地处理对象之间的通信。在 JavaScript 中，观察者模式的应用非常广泛，可以用于实现事件处理、数据绑定等功能。本文将介绍观察者模式的基本概念和实现方式。

什么是观察者模式？

观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象（observer）同时监听某一个主题对象（subject）。当主题对象发生变化时，它会自动通知所有的观察者对象，使它们能够及时更新自己的状态。

观察者模式的优点在于它可以实现对象之间的松耦合，使得 Subject 和 Observer 可以独立地变化，而不会相互影响。它还可以提高代码的复用性和可维护性，使得代码更加清晰和易于理解。

事件观察者

该模式的视图如下所示：

EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
|
└── broadcast: 执行带有绑定数据的所有事件

首先要执行初始化EventObserver操作：

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

从观察到的事件的空列表开始，并对每个新实例执行此操作。

订阅方法

要添加新事件，请执行以下操作：

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

获取观察到的事件列表并将新项目推送到数组中，事件列表是回调函数列表。

要测试这个方法，请执行以下操作：

const fn = () => {};

observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);

取消订阅方法

要删除事件，请执行以下操作：

unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}

从列表中过滤掉与回调函数匹配的内容。如果没有匹配，回调将保留在列表中，过滤器返回一个新列表并重新分配观察者列表。

要测试这个方法，请执行以下操作：

const observer = new EventObserver();
const fn = () => {};

observer.subscribe(fn);

observer.unsubscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 0);

回调必须与列表中的相同函数匹配，如果存在匹配项，取消订阅方法会将其从列表中删除。

广播法

要调用所有事件，请执行以下操作：

broadcast(data) {
  this.observers.forEach((subscriber) => subscriber(data));
}

这会遍历观察到的事件列表并执行所有回调。这样，你就可以获得与订阅事件必要的一对多关系，传入data是回调数据绑定的参数。

要测试这个方法，请执行以下操作：

const observer = new EventObserver();

let subscriberHasBeenCalled = false;
const fn = (data) => subscriberHasBeenCalled = data;

observer.subscribe(fn);

observer.broadcast(true);

// Assert
assert(subscriberHasBeenCalled);

使用 let 而不是 const 这样我们就可以更改变量的值，这使得变量可变，然后允许我在回调内部重新分配它的值。let 在代码中会向其他程序员发送一个信号，表明该变量在某个时刻正在发生变化，这样就增加了 JavaScript 代码的可读性和清晰度。

好了，我们已经学会了一个简单的观者模式在 javaScript 中的实现。

总结

这篇主要简单介绍了观察者模式和其简单的实现，设计模式还有很多种，例如：单例模式、策略模式、工厂模式等，我们的核心目的是要学习其思想，而不是死记硬背每一种模式的实现方式。只有理解了设计模式的思想，才能在各种业务场景中灵活地应用它们。

参考链接

https://www.digitalocean.com/community/tutorial-series/javascript-design-patterns

https://developer.mozilla.org/zh-CN/docs/learn/JavaScript https://zhuanlan.zhihu.com/p/77275289