发布订阅模式

什么是发布订阅模式？

发布订阅模式又叫做观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，同时观察者通过订阅这些事件来观察该主体，发布者和订阅者是完全解耦的，彼此不知道对方的存在，两者仅仅共享一个自定义事件的名称。

应用

• 发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。 比如，我们可以订阅ajax请求的error、success等事件。或者如果想在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。

• 发布—订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改;同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就 可以自由地改变它们。

实现

实现思路：

• 发布者有一个缓存列表，里面存放了回调函数，以便发布后通知订阅者

• 发布消息的时候遍历缓存列表，依次触发订阅者的回调;

//创造一个变量，key存储函数名，value是一个数组，存储函数
//on订阅函数，即是将订阅该函数名的函数存到value这个数组
//off取消订阅，即是将订阅该函数名的函数从value这个数组删除
//emit 触发函数，即是将value这个数组里面的函数依次执行

class EventEmitter{
    constructor(){
        // key存储函数名，value是一个数组，存储函数，类似{'hi':[]}
        this.events = {}
    }

    on(eventName, func){
        //键值对：事件名,函数
        let callbacks = eventName in this.events ? this.events[eventName] : []
        callbacks.push(func)
        this.events[eventName] = callbacks
    }

    off(eventName, func){
        //根据事件名找到函数，然后从函数缓存数组里面删除对应的函数
        if (!eventName in this.events) return
        let callbacks = this.events[eventName]
        let index = callbacks.indexOf(func)
        callbacks.splice(index, 1)
    }
    
    //在函数缓存数组执行所有函数
    emit(eventName, ...args){
        if (!eventName in this.events) return
        const callbacks = this.events[eventName]
        callbacks.map(cb => {
            cb(...args)
        })
    }
}

使用：

const emitter = new EventEmitter()
const sayHi = (name) => console.log(`Hello ${name}`)
const sayHi2 = (name) => console.log(`Good night, ${name}`)

emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.emit('hi', 'ScriptOJ')
// => Hello ScriptOJ
// => Good night, ScriptOJ

emitter.off('hi', sayHi)
emitter.emit('hi', 'ScriptOJ')
// => Good night, ScriptOJ

const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
  console.log(`I am ${name}, and I am ${age} years old`)
})
emitter2.emit('hi', 'Jerry', 12)
// => I am Jerry, and I am 12 years old

总结：

发布—订阅模式的优点非常明显，一为时间上的解耦，二为对象之间的解耦。它的应用非常广泛，既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。从架构上来看，无论是 MVC 还是 MVVM， 都少不了发布—订阅模式的参与，而且JavaScript本身也是一门基于事件驱动的语言。

当然，发布—订阅模式也不是完全没有缺点（浪费内存）。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。另外，发布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者（b订阅a的消息并发布给c）嵌套到一起的时候，要跟踪一个bug不是件轻松的事情。

本文章大部分来自于《javascript 设计模式与开发实践》-曾探