当前位置：首页 > article >正文

前端开发的观察者模式

article 2024/9/20 13:34:47

什么是观察者设计模式

观察者模式（Observer Pattern）是前端开发中常用的一种设计模式。它定义了一种一对多的依赖关系，使得当一个对象的状态发生改变时，其所有依赖对象都能收到通知并自动更新。观察者模式广泛应用于事件驱动的系统，如浏览器事件、发布-订阅系统，以及各类框架的状态管理机制。

观察者设计模式定义了一种 一对多 的依赖关系，当 一个对象的状态发生变化 时，所有依赖它的对象都会自动收到通知。这种模式可以解耦观察者和被观察者，使得它们可以独立变化。

观察者模式的关键角色：

Subject（被观察者）: 负责维护观察者列表，并在自身状态发生变化时通知所有观察者。
Observer（观察者）: 订阅目标的变化，并在收到通知时执行相关操作。

观察者模式的实现

1. 简单观察者模式

// 观察者接口
interface Observer {
  update(state: string): void;
}

// 被观察者
class Subject {
  private observers: Observer[] = [];
  private state: string = '';

  // 添加观察者
  public attach(observer: Observer): void {
    this.observers.push(observer);
  }

  // 移除观察者
  public detach(observer: Observer): void {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // 通知所有观察者
  public notify(): void {
    this.observers.forEach(observer => observer.update(this.state));
  }

  // 改变状态并通知观察者
  public setState(state: string): void {
    this.state = state;
    this.notify();
  }
}

// 具体的观察者
class ConcreteObserver implements Observer {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  // 收到通知时的动作
  public update(state: string): void {
    console.log(`${this.name} received update: ${state}`);
  }
}

// 测试观察者模式
const subject = new Subject();

const observer1 = new ConcreteObserver('Observer 1');
const observer2 = new ConcreteObserver('Observer 2');

subject.attach(observer1);
subject.attach(observer2);

subject.setState('State A');
subject.setState('State B');

在这个例子中，我们实现了基本的观察者模式：一个 Subject 类可以被多个 Observer 观察，每当 Subject 的状态发生变化时，它会通知所有观察者。

2. 发布-订阅模式

发布-订阅模式（Publish-Subscribe Pattern） 是观察者模式的一种变体，通常通过事件系统来实现。发布者不直接通知观察者，而是通过中介（消息中心）将事件广播出去，由订阅者选择性地接收。

// 消息中心
class EventEmitter {
  private events: { [key: string]: Function[] } = {};

  // 订阅事件
  public subscribe(event: string, listener: Function): void {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // 发布事件
  public publish(event: string, data?: any): void {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  }

  // 取消订阅
  public unsubscribe(event: string, listener: Function): void {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(l => l !== listener);
    }
  }
}

// 测试发布-订阅模式
const eventEmitter = new EventEmitter();

const handler = (data: any) => console.log('Event received:', data);

// 订阅事件
eventEmitter.subscribe('eventA', handler);

// 发布事件
eventEmitter.publish('eventA', { message: 'Hello, World!' });

// 取消订阅
eventEmitter.unsubscribe('eventA', handler);

在发布-订阅模式中，发布者和订阅者是通过 EventEmitter 消息中心进行通信的，发布者无需知道订阅者的存在，这使得它们之间的耦合度进一步降低。

3. 双向绑定模式（MVVM）

MVVM（Model-View-ViewModel） 是一种常见的双向绑定模式，在前端框架如 Vue、Angular 中很常见。它通过数据绑定使得 View 和 Model 可以双向通信，通常是通过一个 ViewModel 来桥接二者。

// ViewModel
class ViewModel {
  private state: string = '';
  private observers: Function[] = [];

  // 获取当前状态
  public getState(): string {
    return this.state;
  }

  // 设置状态并通知视图更新
  public setState(newState: string): void {
    this.state = newState;
    this.notify();
  }

  // 添加视图更新的回调
  public bind(observer: Function): void {
    this.observers.push(observer);
  }

  // 通知视图更新
  private notify(): void {
    this.observers.forEach(observer => observer(this.state));
  }
}

// 视图更新函数
const updateView = (state: string) => {
  console.log('View updated:', state);
};

// 测试双向绑定
const viewModel = new ViewModel();
viewModel.bind(updateView);

viewModel.setState('New State');
console.log('Current State:', viewModel.getState());

在这个例子中，ViewModel 充当了模型和视图之间的桥梁，确保视图在数据更新时及时反应。这是 MVVM 模式的一个简单实现。