vue|Vue.js响应式原理（三）——发布订阅模式和观察者模式 javascript|前端|vue.js

发布/订阅模式

订阅者
发布者
信号中心

我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心发布（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方法用于订阅事件，可以多次订阅相同事件，订阅时不会执行方法

实现：

Document - 锐客网 >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");

观察者模式

观察者（订阅者）-watcher
- update():当事件发生时，具体要做的事情
目标(发布者) – Dep
- subs 数组:存储所有的观察者
- addSub():添加观察者 notify():当事件发生，调用所有观察者的 update() 方法
没有事件中心
【vue|Vue.js响应式原理（三）——发布订阅模式和观察者模式】常用场景：Vue.js的响应机制中使用了观察者模式。

模拟vue的响应机制（观察者模式）

分析：

1.定义一个发布者响应类和一个观察者订阅类
2.具有addSub方法用于新增订阅后将方法添加到subs数组中
3.具有notify方法用于发布后通知所有订阅者调用他们的update方法

实现：

Document - 锐客网 >// 发布者-目标 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()

发布订阅模式与观察者模式对比