观察者模式和发布订阅模式

观察者模式

 

 接下来会举例小孩被大人观察的例子,大人时刻监听小孩的状态,如何做到,给小孩添加监护人,小孩状态改变就调用大人身上的某个函数,达到通知效果,说白了就是subject被激活了, 就会触发观察者的事件

---

被观察的类

//小孩
class Subject {
  constructor(name) {
    this.name = name
    this.state = '开心'
    //家长/监护人
    this.observers = []
  }
  //绑定观察者/家长到小孩身上
  attach(observer) {
    this.observers.push(observer)
  }
  //小孩状态改变时通知观察者状态(也就是调动观察者的功能)
  setState(state) {
    this.state = state
    //循环取出每个观察者
    this.observers.forEach(observer => {
      //调用观察者身上的某个功能
      observer.update(this)
    })
  }

}

观察者类

//观察者类
class Observer {
  constructor(name) {
    this.name = name
  }
  //小孩有变化就会调用观察者的这个功能
  update(subject) {
     console.log(`${this.name}说:${subject.name}的状态是${subject.state}`);
  }
}

---

 

好了,接下来写代码测试一下

let baby = new Subject('小宝宝')
let father = new Observer('爸爸')
let mother = new Observer('妈妈')
//绑定2个观察者
baby.attach(father)
baby.attach(mother)
//改变小宝宝哦状态
baby.setState('兴奋')
//2秒后改变状态
setTimeout(() => {
  console.log('2秒后');
  baby.setState('难过')
}, 2000);

---

---

 发布订阅者模式

 

class eventBus {
  messages = {}
  on(msgName, callBack) {
    //如果有人订阅了,就直接把它添加到消息队列里去,没有的话创建一个,然后再添加进去
    if (this.messages[msgName]) {
      this.messages[msgName].push(callBack)
    } else {//没有这个事件,就创建一个消息队列
      this.messages[msgName] = []
      this.messages[msgName].push(callBack)
    }
  }
  emit(msgName, ...params) {
    if (this.messages[msgName]) {//看看有谁订阅这个事件,如果有订阅的,就执行此事件的订阅队列函数
      this.messages[msgName].forEach(callBack =>
        callBack.call(this, ...params)
      )
    }
  }
}
let bus = new eventBus()
bus.on('hello', (msg) => {
  console.log('1收到了消息:', msg);
})
bus.on('hello', (msg) => {
  console.log('2收到了消息:', msg);
})
setTimeout(() => {
  bus.emit('hello', '我爱你', '我也')
}, 2000);

发布订阅者模式在哪里有用到?在vue2的全局事件总线有用到,一个发布一个订阅,一个订阅先,另一个发布,在发布里执行的操作是:先看看有人订阅这个事件名没有,有的话,就循环队列里待执行的函数

 学自b站

【观察者模式/发布订阅】Javascript中的常见设计模式（一）_哔哩哔哩_bilibili

2.观察者和发布订阅者模式_哔哩哔哩_bilibili