前端设计模式(4)--发布订阅模式

81 阅读1分钟

一, 定义

定义对象之间的一种一对多依赖关系,当一个对象的状态发生改变时, 所有依赖它的对象都将得到通知.

二,场景

售楼: 小红,小明去售楼处买房子, 留下电话给售楼处, 开始卖房子的时候, 售楼处给留下电话的人打电话通知.

发布者: 售楼处.

订阅者: 留下电话的人.

三, 实现方式

1, 指定谁当发布者, 谁当订阅者.

2, 发布者:

添加一个缓存列表, 用于存放回调函数通知订阅者(至少要暴露一个接口用于订阅者订阅消息, 还要再暴露一个接口用于遍历发布消息给订阅者)

const SalesOffices = {
  clientMap: {}, //订阅者信息
  listen: function (key, fn) { //订阅消息接口
    if (!this.clientMap[key]) {
      this.clientMap[key] = [];
    }
    this.clientMap[key].push(fn);
  },
  trigger: function (key, ...args) { //发布消息接口
    const clientList = this.clientMap[key];
    for (let i = 0; i < clientList.length; i++) {
      clientList[i].apply(this, args);
    }
  },
};
//订阅者订阅消息
SalesOffices.listen('square88', (price) => {
  console.log('square88, 价格:', price);
});

SalesOffices.listen('square100', (price) => {
  console.log('square100, 价格:', price);
});

//发布者发布消息
SalesOffices.trigger('square88', '2w');
SalesOffices.trigger('square100', '3w');

四, 总结

实现了时间上的解耦(应用与异步编程中).

实现了对象间的解耦.