前端设计模式:观察者与发布订阅模式

时间:2023-02-10 15:06:30

观察者模式

描述:

观察者模式(Observer Pattern)由被观察者和观察者组成,观察者可以是多个,被观察者维护着多个观察者,如添加或删除观察者;当被观察着数据变化时,会通过广播的方式通知维护的每一个观察者(即调用观察者提供的回调函数)。

概要:

观察者模式:定义了对象间一种一对多的依赖关系,当目标对象 Subject 的状态发生改变时,所有依赖它的对象 Observer 都会得到通知

举个栗子:

小美通过自己的努力吸引了2个追求者.小美每次发朋友圈必定会得到两个追求者的回应.小美与两个追求者的关系形成了观察者模式.小美是被观察者,两个舔狗是观察者.小美发朋友圈这个动作会触发舔狗的回应

// 被观察者
class ABeautifulGirl {
  TIAN_GOU_LIST = [] // 舔狗们
  // 添加观察者
  attractTianGou(...tianGous) {
    Array.prototype.push.apply(this.TIAN_GOU_LIST, tianGous)
  }
  // 删除观察者
  kickOffTianGou(tianGou) {
    const index = this.TIAN_GOU_LIST.indexOf(tianGou)
    this.TIAN_GOU_LIST.splice(index, 1)
  }
  // 女神技能:发朋友圈(发布通知)
  sendPost(data) {
    this.TIAN_GOU_LIST.forEach(tianGou => {
      tianGou.callback.call(tianGou, data)
    })
  }
}
// 观察者
class TianGou {
  constructor(name, fn) {
    this.name = name
    this.lick = fn
  }
  callback(data) {
    console.log(
      `我是${this.name}今天女神发朋友圈说她${data},我要给女神发信息:`
    )
    this.lick()
  }
}
// 定义两个观察者
const tiangou1 = new TianGou('tiangou1', () => {
  console.log('多喝热水')
})
const tiangou2 = new TianGou('tiangou2', () => {
  console.log('请一定要多喝热水呀')
})
// 小美通过自己的努力有了吸引别人关注的能力
const xiaomei = new ABeautifulGirl()
xiaomei.attractTianGou(tiangou1, tiangou2)
// 小美发了个朋友圈
xiaomei.sendPost('肚子疼')

前端设计模式:观察者与发布订阅模式

再举个栗子

舔狗舔了数次始终没有的到小美的青睐, 这次他学会了主动, 他准备再勾搭一个女神, 于是他想办法加了小丽的微信, 开始了同时对两人的观察.

class ABeautifulGirl {
  constructor(name) {
    this.name = name
  }
  TIAN_GOU_LIST = []
  sendPost(data) {
    console.log(`${this.name},发个朋友圈`)
    this.TIAN_GOU_LIST.forEach(tianGou => {
      tianGou.callback.call(tianGou, data)
    })
  }
}
// 观察者:(主动)关注或取消关注
class TianGou {
  constructor(name, fn) {
    this.name = name
    this.lick = fn
  }
  subscribe(publish) {
    var sub = this
    var alreadyExists = publish.TIAN_GOU_LIST.some(function (item) {
      return item === sub
    })
    // 如果女神的好友名单中没有这个人,则加入进去
    if (!alreadyExists) publish.TIAN_GOU_LIST.push(sub)
    return this
  }
  unsubscribe(publish) {
    var sub = this
    publish.TIAN_GOU_LIST = publish.TIAN_GOU_LIST.filter(function (item) {
      return item !== sub
    })
    return this
  }
  callback(data) {
    console.log(
      `    ${this.name} 看到女神发朋友圈说她 ${data} ,我要给女神发信息:`
    )
    this.lick()
  }
}
// 小美 & 小丽
const xiaomei = new ABeautifulGirl('xiaomei')
const xiaoli = new ABeautifulGirl('xiaoli')
// 两个舔狗
const tiangou1 = new TianGou('tiangou1', () => {
  console.log('    多喝热水')
})
const tiangou2 = new TianGou('tiangou2', () => {
  console.log('    请一定要多喝热水呀')
})
// 舔狗主动订阅女神们的消息
tiangou1.subscribe(xiaomei).subscribe(xiaoli)
tiangou2.subscribe(xiaomei)
// 小美小丽肚子疼
xiaomei.sendPost('肚子疼')
xiaoli.sendPost('腰子疼')

前端设计模式:观察者与发布订阅模式

优缺点:

  优点明显:降低耦合,两者都专注于自身功能;   缺点也很明显:所有观察者都能收到通知,无法过滤筛选;

发布订阅模式

Publisher && Subscriber

描述:

舔狗们订阅了很多女神, 但大都无疾而终, 舔狗中有一只聪明狗, 姑且就叫它二哈吧, 二哈首先意识到, 女神们生病的时候只是发 [多喝热水] 是没有用的, 还要在早上对女神说早上好, 下班了对女生下班好, 去输液了要对女神说说输的的想你的夜. 二哈开始行动了, 于是二哈学习了发布订阅模式.

概要:

发布订阅模式:基于一个事件(主题)通道,希望接收通知的对象 Subscriber 通过自定义事件订阅主题,被激活事件的对象 Publisher 通过发布主题事件的方式通知各个订阅该主题的 Subscriber 对象。 发布订阅模式与观察者模式的不同,“第三者” (事件中心)出现。目标对象并不直接通知观察者,而是通过事件中心来派发通知。

举个栗子:

const GirlsHub = function () {
  this.grils = {}
  this.on = function (name, cb) {
    if (this.grils[name]) {
      this.grils[name].push(cb)
    } else {
      this.grils[name] = [cb]
    }
  }
  this.trigger = function (name, ...arg) {
    if (this.grils[name]) {
      this.grils[name].forEach(eventListener => {
        eventListener(...arg)
      })
    }
  }
}
let girls = new GirlsHub()
girls.on('morring', () => {
  console.log('对小美说早安')
})
girls.on('morring', () => {
  console.log('对小丽说早安')
})
girls.on('morring', () => {
  console.log('对小美丽说早安')
})
girls.on('noon', () => {
  console.log('对小美说午安')
})
girls.on('noon', () => {
  console.log('对小丽说午安')
})
girls.on('noon', () => {
  console.log('对小美丽说午安')
})
girls.on('evening', () => {
  console.log('对小美说晚安')
})
girls.on('evening', () => {
  console.log('对小丽说晚安')
})
girls.on('evening', () => {
  console.log('对小美丽说晚安')
})
girls.trigger('morring')
girls.trigger('noon')
girls.trigger('evening')

前端设计模式:观察者与发布订阅模式

学会之后,二哈化被动为主动, 每到时辰就开始给女神们发消息, 本以为能够收获女神们的芳心,到后来发现,自己被一半人都拉黑了.

看来功力还不够深厚啊.需要学习以下其他的设计模式来优化以下方案。

优缺点:

  优点:解耦更好,细粒度更容易掌控;

  缺点:不易阅读,额外对象创建,消耗时间和内存

两种模式的关联和区别

发布订阅模式更灵活,是进阶版的观察者模式,指定对应分发。

  1. 观察者模式维护单一事件对应多个依赖该事件的对象关系;
  2. 发布订阅维护多个事件(主题)及依赖各事件(主题)的对象之间的关系;
  3. 观察者模式是目标对象直接触发通知(全部通知),观察对象*接收通知。发布订阅模式多了个中间层(事件中心),由其去管理通知广播(只通知订阅对应事件的对象);
  4. 观察者模式对象间依赖关系较强,发布订阅模式中对象之间实现真正的解耦。