js实现（发布订阅模式和观察者模式有什么区别（）） js实现：发布订阅模式和观察者

发布订阅模式

应用场景：vue事件监听（兄弟组件之间传递数据）、nodejs事件监听
成员：
发布者：在发布者中调用 notify()
订阅者：在订阅者中调用 addSub()
事件中心：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)=>{ }) }

模拟实现代码：

发布订阅模式 - 锐客网

观察者模式
应用场景：vue响应式原理
成员：
发布者：为一个对象，拥有subs数组、addSub()、notify()
订阅者（观察者）：为一个对象，必须拥有update()
模拟实现代码

观察者模式 - 锐客网

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

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

观察者模式

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

【js实现（发布订阅模式和观察者模式有什么区别（））】