浏览器的前沿利器——观察者模式在JavaScript中的妙用

前端

2023-03-30 18:31:36

JavaScript中观察者设计模式：赋能灵活且可扩展的应用程序

在瞬息万变的网络世界中，JavaScript作为一种强大的编程语言，以其跨平台性、灵活性以及广泛的应用场景而备受青睐。而提到JavaScript，观察者设计模式是其核心设计模式之一，对于构建灵活、可维护性强的应用程序至关重要。

观察者设计模式：理解本质

观察者设计模式是一种行为设计模式，其目的是将对象及其依赖项松耦合，从而提高代码的扩展性和维护性。它由三个关键角色组成：

主题 (Subject)： 存储观察者的引用并负责在状态发生变化时通知观察者。
观察者 (Observer)： 关注主题的状态变化，并在状态发生变化时做出相应的响应。
具体主题 (ConcreteSubject)： 继承自主题，提供实际的事件通知机制。
具体观察者 (ConcreteObserver)： 继承自观察者，包含响应主题状态变化的具体逻辑。

JavaScript 中的观察者模式实现

在JavaScript中，我们可以利用addEventListener()方法实现观察者模式。下面是一个简单的示例，展示了如何使用观察者模式监听浏览器窗口大小的变化：

class WindowResizeObserver {
  constructor(private element: HTMLElement) {
    this.element.addEventListener("resize", this.onResize);
  }

  onResize = () => {
    // 在这里编写响应窗口大小变化的逻辑
  };

  disconnect() {
    this.element.removeEventListener("resize", this.onResize);
  }
}

const windowObserver = new WindowResizeObserver(window);

// 观察者可以随时取消订阅
setTimeout(() => {
  windowObserver.disconnect();
}, 5000);