# 发布订阅模式和观察者模式

# 发布/订阅模式

  • 订阅者
  • 发布者
  • 事件中心

我们假定,存在一个“事件中心”,某个任务执行完成,就向事件中心“发布”(publish)一个事件,其他任务可以向事件中心“订阅”(subscribe)这个事件,从而知道什么时候自己可以执行。这就叫做“发布/订阅模式”(publish-subscribe pattern)

// vue 实现的中央事件总线

let vm = new Vue()

// { 'dataChange': [fn1, fn2], 'handleData: [fn]' }
// 注册事件(订阅消息)
vm.$on('dataChange', () => {
    console.log('dataChange1')
})

vm.$on('dataChange', () => {
    console.log('dataChange2')
})

// 触发事件(发布消息)
vm.$emit('dataChange')

下面实现一个发布订阅:

// 手写实现发布订阅

// 事件触发器
class EventEmitter {
    constructor () { 
        // { 'click': [fn1, fn2], 'change: [fn]' }
        // 用一个对象来储存事件订阅信息,同一个事件可被订阅多次,故事件的回调函数用数组储存
        this.subs = Object.create(null)
    }
    
    // 注册事件
    $on (eventType, handler) {
        // 需要找到储存事件订阅信息对象里是否有当前事件,有则获取已有数组,否则赋值为空数组
        this.subs[eventType] = this.subs[eventType] || []   
        // 新注册事件处理函数
        this.subs[eventType].push(handler)
    }
    
    // 触发事件
    $emit (enventType) {
        // 先判断是否有当前事件,有则执行,没有则不作处理
        if(this.subs[eventType]){
            // 遍历数组调用事件函数
            this.subs[eventType].forEach(handler => {
                handler()       
            })
        }
    }
}

const 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() 方法
  • 没有事件中心

关于为什么目标(发布者)用 Dep 表示,是因为 Dep 是 dependence(依赖)的缩写。因为 Watcher 观察者(订阅者)需要依赖 Dep 才能了解数据的变化,没有 Dep,Watcher 根本不可能知道数据发生了变化,当有数据变化发生时,Dep 会通知 Watcher。

// 发布者-目标
class Dep {
    constructor () {
        // 记录所有的订阅者
        this.subs = []
    }
    
    // 添加订阅者
    addSub (sub) {
        // 在添加之前,要确保订阅者存在且具有update方法
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }
    
    // 发布通知
    notify () {
        // 找到所有的订阅者并调用它们的update方法
        this.subs.forEach(sub => {
            sub.updatre()
        })
    }
}

// 订阅者-观察者
class Watcher {
    update () {
        console.log('update')
    }
}

let dep = new Dep()
let watcher = new Watcher()

dep.addSub(watcher)

dep.notify()

# 总结

  • 观察者模式 是由具体目标调度,比如当事件触发,Dep 就会去调用观察者的方法,所以观察者模式的订阅者和发布者之间是存在依赖的
  • 发布/订阅模式 由统一调度中心(事件中心)调用,因此发布者和订阅者不需要知道对方的存在

事件中心隔离了发布者和订阅者,去除它们之间的相互依赖。观察者模式中,目标与观察者是相互依赖的,而发布订阅模式中,多了个事件中心。事件中心是隔离发布者和订阅者的,减少发布者和订阅者的依赖关系,会变得更加灵活。

图示

上次更新: 1/13/2021, 5:51:22 PM