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)=>{ })
}

3. 模拟实现代码：

   观察者模式

4. 应用场景：vue响应式原理
5. 成员：
6. 发布者：为一个对象，拥有subs数组、addSub()、notify()
7. 订阅者（观察者）：为一个对象，必须拥有update()

8. 模拟实现代码

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

发布订阅模式

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

观察者模式

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

特别鸣谢：拉勾教育前端高薪训练营；