js实现:发布订阅模式和观察者模式有什么区别?

发布订阅模式

  1. 应用场景:vue事件监听(兄弟组件之间传递数据)、nodejs事件监听
  2. 成员:
  3. 发布者:在发布者中调用 notify()
  4. 订阅者:在订阅者中调用 addSub()
  5. 事件中心:subs数组、addSub()(也对应on)、notify()(对应emit)
// 事件中心
let eventHub = new Vue()

// 组件A:发布者
addTodo: function (){
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
}

// 组件B:订阅者
created: function (){
    eventHub.$on('add-todo',(e)=>{ })
}
  1. 模拟实现代码:

    
    
    
     
     
     发布订阅模式
     
    
    
    
    
     
    
    
    

    观察者模式

  2. 应用场景:vue响应式原理
  3. 成员:
  4. 发布者:为一个对象,拥有subs数组、addSub()、notify()
  5. 订阅者(观察者):为一个对象,必须拥有update()
  6. 模拟实现代码

    
    
    
     
     
     观察者模式
     
    
    
    
    
     
    
    

发布订阅、观察者模式的区别?

发布订阅模式

  1. 有事件中心、发布者、订阅者三个成员;(事件中心的作用可以隔离发布者和订阅者,去除他们之间的依赖),所有的发布和订阅事件需要存储到事件中心里面。
  2. 事件更新 update() 处理逻辑在订阅时的回调函数中执行。
  3. 发布和订阅者是抽象的,通常是在方法里调用 addSub() 和 notify() 。
  4. 一个发布者多个订阅者:订阅者执行多次 addSub() 添加定义,发布者调用一个 notify() 通知更新。

观察者模式

  1. 没有事件中心,只有发布者、订阅者两个成员。
  2. 发布者中存储所有订阅者 subs 且有添加订阅者的 addSub() 方法、通知订阅者更新的 notify() 方法。订阅者中必须有一个 update() 方法。
  3. 发布和订阅者是一个对象。
  4. 一个发布者多个订阅者:发布者多次添加观察者 dep.addSub(watcher),发布者通知 dep.notify() 触发所有订阅者执行 update()。

js实现:发布订阅模式和观察者模式有什么区别?_第1张图片
特别鸣谢:拉勾教育前端高薪训练营;

你可能感兴趣的:(js实现:发布订阅模式和观察者模式有什么区别?)