前端设计模式之观察者模式

前端

2023-10-08 07:47:55

前端代码中，我们常常需要关注某些元素的变化，并及时响应。这种情况下，观察者模式是一种非常实用的设计模式。

观察者模式简介

观察者模式定义了一种一对多的依赖关系，其中一个对象（主题）的状态发生改变时，其所有依赖对象（观察者）都会得到通知并做出相应的反应。

前端中的观察者模式

在前端中，我们可以将一个 DOM 元素视为主题，而对其状态变化感兴趣的事件监听器视为观察者。当元素的状态发生变化时，对应的事件触发，所有监听器都会执行回调函数。

实现观察者模式

实现观察者模式通常涉及以下步骤：

定义主题类： 该类负责维护状态并通知观察者。
定义观察者接口： 该接口定义了观察者接收通知时应执行的回调函数。
实现观察者类： 该类实现观察者接口并包含事件处理逻辑。
将观察者注册到主题： 观察者向主题注册，以便接收通知。
当主题状态发生变化时，通知观察者： 主题触发通知事件，所有注册的观察者都会执行回调函数。

实例

以下是一个简单的前端观察者模式示例：

主题类：

class Button {
  constructor() {
    this.observers = [];
    this.state = "default";
  }

  setState(newState) {
    if (this.state !== newState) {
      this.state = newState;
      this.notifyObservers();
    }
  }

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }
}

观察者类：

class ButtonObserver {
  constructor(button) {
    this.button = button;
    button.addObserver(this);
  }

  update() {
    console.log(`Button state changed to ${this.button.state}`);
  }
}