我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心发布(publish)一个信号,其他任务可以向信号中心订阅(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(publish-subscribe pattern)
常见的发布/订阅模式:Vue 的自定义事件、node的事件处理机制。
let vm = new Vue() vm.$on('dataChange', () => { console.log('dataChange') }) vm.$on('dataChange', () => { console.log('dataChange1') }) vm.$emit('dataChange')在vue中vue实例既是发布者,也是订阅者,又是消息中心。
兄弟组件通信过程: // eventBus.js // 事件中心 let eventHub = new Vue() // ComponentA.vue // 发布者 addTodo: function () { // 发布消息(事件) eventHub.$emit('add-todo', { text: this.newTodoText }) this.newTodoText = '' } // ComponentB.vue // 订阅者 created: function () { // 订阅消息(事件) eventHub.$on('add-todo', this.addTodo) }观察者(订阅者)-watcher
update():当事件发生时,具体要做的事情目标(发布者) – Dep
subs 数组:存储所有的观察者addSub():添加观察者 notify():当事件发生,调用所有观察者的 update() 方法没有事件中心
常用场景:Vue.js的响应机制中使用了观察者模式。
1.定义一个发布者响应类和一个观察者订阅类 2.具有addSub方法用于新增订阅后将方法添加到subs数组中 3.具有notify方法用于发布后通知所有订阅者调用他们的update方法
实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 发布者-目标 class Dep { constructor () { // 记录所有的订阅者 this.subs = [] } // 添加订阅者 addSub (sub) { if (sub && sub.update) { this.subs.push(sub) } } // 发布通知 notify () { this.subs.forEach(sub => { sub.update() }) } } // 订阅者-观察者 class Watcher { update () { console.log('update') } } // 测试 let dep = new Dep() let watcher = new Watcher() dep.addSub(watcher) dep.notify() </script> </body> </html>观察者模式是由具体目标调度,比如当事件触发,Dep 就会去调用观察者的方法,所以观察者模 式的订阅者与发布者之间是存在依赖的。
发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在。事件中心隔离了发布者与订阅者,减少了互相依赖的关系。