Vue.js响应式原理(三)——发布订阅模式和观察者模式

tech2023-02-04  79

发布/订阅模式

订阅者发布者信号中心

我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心发布(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) }

模拟vue中的事件发布机制(发布定义模式)

分析: 定义一个事件发布机制类具有$emit方法用于发布事件,会执行。具有$on方法用于订阅事件,可以多次订阅相同事件,订阅时不会执行方法 实现: <!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 EventEmitter { constructor() { // 用于存储所有的注册事件 this.subs = Object.create(null); } // 注册事件 $emit(eventType) { // 为了简便,不考虑参数的情况 if (this.subs[eventType]) { this.subs[eventType].forEach((item) => { item(); }); } } // 触发事件 $on(eventType, handler) { this.subs[eventType] = this.subs[eventType] || []; this.subs[eventType].push(handler); } } // 测试 let em = new EventEmitter(); em.$on("click", () => { console.log("click1"); }); em.$on("click", () => { console.log("click2"); }); em.$emit("click"); </script> </body> </html>

观察者模式

观察者(订阅者)-watcher

update():当事件发生时,具体要做的事情

目标(发布者) – Dep

subs 数组:存储所有的观察者addSub():添加观察者 notify():当事件发生,调用所有观察者的 update() 方法

没有事件中心

常用场景:Vue.js的响应机制中使用了观察者模式。

模拟vue的响应机制(观察者模式)

分析:

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 就会去调用观察者的方法,所以观察者模 式的订阅者与发布者之间是存在依赖的。

发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在。事件中心隔离了发布者与订阅者,减少了互相依赖的关系。

最新回复(0)