likes
comments
collection
share

typescript实现观察者模式&发布订阅模式

作者站长头像
站长
· 阅读数 5

观察者模式

《Head First 设计模式》原文:

观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新。

观察者模式是一种对象行为型模式。

要点

  1. 有观察者和被观察者
  2. 所有观察者一视同仁(所有观察者的回调函数,函数签名都相同)
  3. 将观察者添加到被观察者
  4. 遍历所有观察者,执行回调函数

思路

基于类实现

创建 2 个类 Observer:观察者,Subject:被观察者

Observer

有 1 个函数:update

函数参数作用
update任意,根据业务逻辑来添加参数回调函数,供 Subject 调用
Subject

有一个私有属性:list/set,用于保存所有已注册的观察者

有 3 个函数:add,remove,notify

函数参数作用
add1 个,为 Observer将观察者添加进 Subject 的观察者数组中
remove1 个,为 Observer将观察者从 Subject 的观察者数组中移除
notify2 个:传给观察者的 update 的参数(可选参数),和 update 的 this 上下文(可选参数)通知所有观察者,执行观察者的回调函数

基于函数实现

创建 1 个类

Subject:被观察者

有一个私有属性:Map<string,Function>,用于保存所有已注册的观察者,根据 key 来区分,相同 key 的观察者,后面注册的会覆盖前面的

其实可以用 Map<string,Array<Function>>来定义类型,将同一个事件的多个回调都保存下来,notify 时全部执行一遍。

函数参数作用
add2 个:事件名,和事件回调函数将观察者添加进 Subject 的观察者集合中
remove1 个:事件名将观察者从 Subject 的观察者集合中移除
notify2 个:回调函数的参数(可选参数),和回调函数的 this 上下文(可选参数)通知所有观察者,执行观察者的回调函数

实现

编程语言:typescript

基于类实现

class Observer {
  constructor(/* sub?: Subject */) {
    // if (sub) {
    //   sub.add(this);
    // }
  }
  update(args: any[]) {
    console.log("param: ", args);
    console.log("this: ", this);
  }
}

class Subject {
  private set: Set<Observer> = new Set();

  add(obj: Observer) {
    this.set.add(obj);
  }
  remove(obj: Observer) {
    this.set.delete(obj);
  }
  notify(args: any, context?: any) {
    for (const obj of this.set) {
      // 考虑到update函数可能带有参数,update函数体内部可能用到了this,所以函数参数和this上下文需要从外部传入。这里用了apply来改变update的this指向
      obj.update.apply(context, args);
    }
  }
}

测试代码

const observer = new Observer();
const observer2 = new Observer();
const subject = new Subject();
subject.add(observer);
subject.add(observer2);
subject.notify(["init"]);
subject.remove(observer2);
subject.notify(["after remove"], "fake this");

基于函数实现

class FnSubject {
  private map: Map<string, Function> = new Map();

  add(event: string, fn: Function) {
    this.map.set(event, fn);
  }
  remove(event: string) {
    this.map.delete(event);
  }
  notify(args: any, context?: any) {
    for (const [key, value] of this.map.entries()) {
      // 考虑到回调函数可能带有参数,回调函数体内部可能用到了this,所以回调函数的参数和this上下文需要从外部传入。这里用了apply来改变回调函数的this指向
      value.apply(context, args);
    }
  }
}

测试代码

const fnSub = new FnSubject();
fnSub.add("event1", (args: any[]) => {
  console.log("param: ", args);
  console.log("this: ", this);
});
fnSub.add("event1", (args: any[]) => {
  console.log("new param: ", args);
  console.log("new this: ", this);
});
fnSub.add("event2", function (args: any[]) {
  console.log("event2 param: ", args);
  console.log("event2 this: ", this);
});
fnSub.notify(["init"]);
fnSub.remove("event1");
fnSub.notify(["after remove"], "fake this");

缺点

一次性通知所有观察者的回调函数(广播),无法只通知一部分观察者(单播/多播)

所有观察者的函数参数类型,个数必须完全一致,不够灵活

js 中的使用场景

  • dom0 级事件:onerror,onmessage
  • Vue 响应式(Object.defineProperty 和 Proxy)

其他语言的实现

java 原生的实现:observer-observable 接口

发布订阅模式

typescript实现观察者模式&发布订阅模式

要点

  1. 保存所有的事件和每个事件的所有回调函数(同一个事件,允许注册多个回调函数)
  2. 发布消息时,传入事件名和事件参数,根据事件名找到所有该事件的回调函数,逐个执行

思路

创建一个类:PubSub

有 1 个私有属性:Map<string, Array<Function>>,用于保存所有事件的回调

有 3 个函数

on,off,emit

函数参数作用
on2 个:事件名,回调函数添加订阅
off1 个:事件名取消订阅
emit必选:事件名,可选:回调函数的参数和 this 上下文发布消息

实现

编程语言:typescript

PubSub 类

class PubSub {
  private map: Map<string, Array<Function>> = new Map();
  on(event: string, fn: Function) {
    const item = this.map.get(event);
    if (item) {
      item.push(fn);
    } else {
      this.map.set(event, [fn]);
    }
  }
  emit(event: string, payload: any[], context?: any) {
    const callbacks = this.map.get(event);
    if (callbacks) {
      callbacks.forEach((fn) => {
        fn.apply(context, payload);
      });
    }
  }
  off(event: string) {
    this.map.delete(event);
    console.log(`remove event: ${event}`);
  }
}

测试代码

const pubsub = new PubSub();
pubsub.on("event1", (param1: string) => {
  console.log(`event1 params: ${param1}`);
});
pubsub.on("event1", function (param2: string) {
  console.log(`event1 callback params: ${param2}`);
  console.log(`this: ${this}`);
});
pubsub.on("event2", (param2: string) => {
  console.log(`event2 params: ${param2}`);
});
pubsub.emit("event1", ["event1 payload"]);
pubsub.emit("event1", ["event1 next payload"], "fake this");
pubsub.emit("event2", ["event2 payload"]);
pubsub.off("event1");
pubsub.emit("event2", ["after remove event1, event2 payload"]);

注意事项

先订阅再发布,否则回调函数永远不会执行

和观察者模式的区别

观察者模式中,Subject是知道Observer的,但是发布订阅模式中,发布者、订阅者彼此不知道对方的存在。

js 中的使用场景

  • dom2 级事件:addEventListener
  • EventEmitter
  • rxjs
  • vue 的 EventBus
转载自:https://juejin.cn/post/7338835708504129574
评论
请登录