ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端开发的观察者模式 [打印本页]
作者: 星球的眼睛    时间: 2024-9-11 12:46
标题: 前端开发的观察者模式
什么是观察者计划模式

观察者模式（Observer Pattern）是前端开发中常用的一种计划模式。它界说了一种一对多的依赖关系，使得当一个对象的状态发生改变时，其所有依赖对象都能收到通知并自动更新。观察者模式广泛应用于事件驱动的体系，如浏览器事件、发布-订阅体系，以及各类框架的状态管理机制。
观察者计划模式界说了一种 一对多 的依赖关系，当 一个对象的状态发生变化 时，所有依赖它的对象都会自动收到通知。这种模式可以解耦观察者和被观察者，使得它们可以独立变化。
观察者模式的关键脚色：
观察者模式的实现

1. 简单观察者模式

  1. // 观察者接口
  2. interface Observer {
  3.   update(state: string): void;
  4. }
  6. // 被观察者
  7. class Subject {
  8.   private observers: Observer[] = [];
  9.   private state: string = '';
  11.   // 添加观察者
  12.   public attach(observer: Observer): void {
  13.     this.observers.push(observer);
  14.   }
  16.   // 移除观察者
  17.   public detach(observer: Observer): void {
  18.     this.observers = this.observers.filter(obs => obs !== observer);
  19.   }
  21.   // 通知所有观察者
  22.   public notify(): void {
  23.     this.observers.forEach(observer => observer.update(this.state));
  24.   }
  26.   // 改变状态并通知观察者
  27.   public setState(state: string): void {
  28.     this.state = state;
  29.     this.notify();
  30.   }
  31. }
  33. // 具体的观察者
  34. class ConcreteObserver implements Observer {
  35.   private name: string;
  37.   constructor(name: string) {
  38.     this.name = name;
  39.   }
  41.   // 收到通知时的动作
  42.   public update(state: string): void {
  43.     console.log(`${this.name} received update: ${state}`);
  44.   }
  45. }
  47. // 测试观察者模式
  48. const subject = new Subject();
  50. const observer1 = new ConcreteObserver('Observer 1');
  51. const observer2 = new ConcreteObserver('Observer 2');
  53. subject.attach(observer1);
  54. subject.attach(observer2);
  56. subject.setState('State A');
  57. subject.setState('State B');
复制代码

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

发布-订阅模式（Publish-Subscribe Pattern） 是观察者模式的一种变体，通常通过事件体系来实现。发布者不直接通知观察者，而是通过中介（消息中心）将事件广播出去，由订阅者选择性地接收。
  1. // 消息中心
  2. class EventEmitter {
  3.   private events: { [key: string]: Function[] } = {};
  5.   // 订阅事件
  6.   public subscribe(event: string, listener: Function): void {
  7.     if (!this.events[event]) {
  8.       this.events[event] = [];
  9.     }
  10.     this.events[event].push(listener);
  11.   }
  13.   // 发布事件
  14.   public publish(event: string, data?: any): void {
  15.     if (this.events[event]) {
  16.       this.events[event].forEach(listener => listener(data));
  17.     }
  18.   }
  20.   // 取消订阅
  21.   public unsubscribe(event: string, listener: Function): void {
  22.     if (this.events[event]) {
  23.       this.events[event] = this.events[event].filter(l => l !== listener);
  24.     }
  25.   }
  26. }
  28. // 测试发布-订阅模式
  29. const eventEmitter = new EventEmitter();
  31. const handler = (data: any) => console.log('Event received:', data);
  33. // 订阅事件
  34. eventEmitter.subscribe('eventA', handler);
  36. // 发布事件
  37. eventEmitter.publish('eventA', { message: 'Hello, World!' });
  39. // 取消订阅
  40. eventEmitter.unsubscribe('eventA', handler);
复制代码
在发布-订阅模式中，发布者和订阅者是通过 EventEmitter 消息中心举行通讯的，发布者无需知道订阅者的存在，这使得它们之间的耦合度进一步低落。
3. 双向绑定模式（MVVM）

MVVM（Model-View-ViewModel） 是一种常见的双向绑定模式，在前端框架如 Vue、Angular 中很常见。它通过数据绑定使得 View 和 Model 可以双向通讯，通常是通过一个 ViewModel 来桥接二者。
  1. // ViewModel
  2. class ViewModel {
  3.   private state: string = '';
  4.   private observers: Function[] = [];
  6.   // 获取当前状态
  7.   public getState(): string {
  8.     return this.state;
  9.   }
  11.   // 设置状态并通知视图更新
  12.   public setState(newState: string): void {
  13.     this.state = newState;
  14.     this.notify();
  15.   }
  17.   // 添加视图更新的回调
  18.   public bind(observer: Function): void {
  19.     this.observers.push(observer);
  20.   }
  22.   // 通知视图更新
  23.   private notify(): void {
  24.     this.observers.forEach(observer => observer(this.state));
  25.   }
  26. }
  28. // 视图更新函数
  29. const updateView = (state: string) => {
  30.   console.log('View updated:', state);
  31. };
  33. // 测试双向绑定
  34. const viewModel = new ViewModel();
  35. viewModel.bind(updateView);
  37. viewModel.setState('New State');
  38. console.log('Current State:', viewModel.getState());
复制代码
在这个例子中，ViewModel 充当了模型和视图之间的桥梁，确保视图在数据更新时实时反应。这是 MVVM 模式的一个简单实现。
总结

观察者计划模式及其变体在前端开发中起着至关重要的作用。通过观察者模式，可以解耦对象之间的直接依赖关系，从而提升体系的机动性和可维护性。无论是基础的观察者模式，还是更为复杂的发布-订阅模式、双向绑定模式，都在差别的场景中发挥了不可替代的作用。
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4