JavaScript实现观察者模式和发布订阅模式

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

观察者模式

观察者直接订阅主题，主题被激活时会触发观察者里的事件。

主题创建一个数组来存放观察者

观察者创建一个函数来等待被触发，主题创建一个函数用来改变状态，状态一改变就遍历每个观察者执行里面的响应函数

// 观察者模式
// 主题Subject
class Subject{
    
    
  constructor(name){
    
    
    //小宝宝状态
    this.name = name
    this.state = '开心'
    this.observer = [] //存放观察者
  }
  // 将观察者存在observer数组
  attach(ther){
    
    
    this.observer.push(ther)
  }
  // 主题变化后，通知观察者变换状态
  setState(state){
    
    
    this.state = state
    // 循环取出每个观察者
    this.observer.forEach(ther=>{
    
    
      ther.update(this)
    })
  }
}

// 观察者Observer
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('妈妈')

baby.attach(father)
baby.attach(mother)

baby.setState('不开心')
baby.setState('非常开心')

发布订阅者模式

订阅者把自己想订阅的事件注册到调度中心，发布者发布该事件，即触发该事件时，调度中心统一调度订阅者的方法

订阅用on，发布用emit

// 订阅者模式
// 邮局(调度中心)
let e = {
    
    
  // 存订阅者
  _callback:[],
  on(callback){
    
    
    this._callback.push(callback)
  },
  // 发布者
  emit(value){
    
    
    this._callback.forEach(method=>{
    
    
      method(value)
    })
  }
}
// 订阅
e.on(function(value){
    
    
  console.log("张三订阅："+value);
})
// 订阅
e.on(function(value){
    
    
  console.log("李四订阅："+value);
})
// 订阅
e.on(function(value){
    
    
  console.log("王五订阅："+value);
})

// 发布
e.emit('中央日报')