观察者模式和发布订阅模式（续）

两年前写过一篇关于消息发布订阅的文章，当时是结合了实际的应用场景。看起来不够抽象，概括。今天试图抽象话的再去写一下自己的理解。

此文续上篇发布 订阅 消息系统（一），可点击查看，取名改为观察者和发布订阅模式。

什么是观察者模式？

观察者模式（Observer Pattern）定义了一种当对象之间存在一对多的关系时的一种行为模式。比如当一个对象被修改时，则会通知它的依赖对象并自动更新状态。它主要解决了一个对象状态改变给其他对象通知的问题，并且考虑到易用和低耦合度，保证高度的协作性。

比如一个应用的实例：军训时，教官（目标对象）的状态发生改变，发出“立正”的口令，则所有的学生（观察者对象）此时得到通知，状态随之更新，做出"立正“的动作响应。

一个极简的观察者模式代码案例

该案例的特征：

• 一个目标者对象 Subject，拥有方法：添加 / 删除 / 通知 Observer；
• 多个观察者对象 Observer，拥有方法：接收 Subject 状态变更通知并处理；
• 目标对象 Subject 状态变更时，通知所有 Observer。

//发布者
class Subject {
	constructor() {
		this.observers = []
	}
	add(observer) {
		this.observers.push(observer)
	}
	delete(observer) {
		let idx = this.observers.findIndex( item => item === observer);
		idx > -1 && this.observers.splice(idx, 1)
	}
	notify() {
		for(let observer of this.observers) {
			observer.update()
		}
	}		
}

//观察者
class Observer {
	constructor(name) {
		this.name= name
	}
	update() {
		console.log(`我是${this.name},我立正了`)
	}
}
// 实例化目标者
let subject = new Subject();

// 实例化两个观察者
let obs1 = new Observer('刘德华');
let obs2 = new Observer('吴彦祖');

// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);

// 目标者通知更新
subject.notify();
//打印结果
//我是刘德华,我立正了
//我是吴彦祖,我立正了

上面代码可以添加、删除观察者，当然你可以定制自己需求的功能函数。

当然这种模式是存在一些不足的，比如：

• 一个目标者有很多观察者的话，将所有通知者都通知到会花费不少时间
• 若目标者和观察者之间存在循环依赖的话，目标发生变化，观察者变化，进而又影响目标者，处理不好，很容易导致系统崩溃。
• 目标者通知更新的话，所有观察者都接收到了通知。比如上面教官说立正，刘同学和吴同学都是进行相应，做出立正的动作。但实际情况是，教官可能只是指定刘同学 立正，只需刘同学做出响应更新而已。

什么是发布订阅模式？

发布订阅模式: 订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（Publish topic）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

一个极简的发布订阅模式案例

var pubsub = {
	//事件调度中心
    topics: {},
    //注册事件到调度中心
    subscribe(topic, fn) {
        this.topics[topic] = this.topics[topic] || []
        this.topics[topic].push(fn)
    },
    //将事件发布到调度中心
    publish(topic, ...args) {
        if (!this.topics[topic]) return
        for (let fn of this.topics[topic]) {
            fn(...args)
        }
    },
    //解绑到调度中心的事件
    unsubScribe(topic, fn) {
        let fnList = this.topics[topic]
        if (!fnList) return
        //若不传入指定的要取消的订阅的方法(fn),则清除所有topic下的订阅
        if (!fn) {
            fnList && (fnList.length == 0)
        } else {
            fnList.forEach((item, index) => {
                if (item == fn) {
                    fnList.splice(index, 1)
                }
            })
        }
    }
}

//注册eat事件
pubsub.subscribe('eat', time => {
    console.log(`now is ${time},time to eat lunch`);
})

//注册work事件
pubsub.subscribe('work', time => {
    console.log(`now is ${time},time to work`);
})

//发布work，eat事件
pubsub.publish('work', '8:30 AM') //now is 8:30 AM,time to work
pubsub.publish('eat', '12:30 AM') //now is 12:30 AM,time to eat lunch

//取消eat事件的订阅
pubsub.unsubScribe('eat')

发布订阅模式与观察者模式的不同，在于第三者的出现：事件中心（topic)的出现。目标对象并不直接通知观察者，而是通过事件中心来派发事件。订阅者只关心自己订阅事件以此来响应变化。

就像上文说的那样，DOM的监听事件其实也是该模式的应用。比如jQuery的onclick事件，one()只触发一次响应事件，off()解除绑定事件（类比上面代码的unsubScribe事件）

借用一张图表示如下：

观察者模式是不是发布订阅模式

借用一个同学的总结：

网上关于这个问题的回答，出现了两极分化，有认为发布订阅模式就是观察者模式的，也有认为观察者模式和发布订阅模式是真不一样的。

其实我不知道发布订阅模式是不是观察者模式，就像我不知道辨别模式的关键是设计意图还是设计结构（理念），虽然《JavaScript设计模式与开发实践》一书中说了分辨模式的关键是意图而不是结构。

如果以结构来分辨模式，发布订阅模式相比观察者模式多了一个中间件订阅器，所以发布订阅模式是不同于观察者模式的；如果以意图来分辨模式，他们都是实现了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新，那么他们就是同一种模式，发布订阅模式是在观察者模式的基础上做的优化升级。

不过，不管他们是不是同一个设计模式，他们的实现方式确实有差别，我们在使用的时候应该根据场景来判断选择哪个。

---

此文没有长篇大论，力争以最简的话语表述我所理解的内容。其中借鉴了以下三位的同学的一些理解。如果看完还是云里雾里，可以去看下他们的文章，写的很不错。

发布订阅模式与观察者模式 https://segmentfault.com/a/1190000018706349 作者：hfhan

重学JS（九）—— 观察者模式和发布/订阅模式真不一样：https://www.jianshu.com/p/f0f22398d25d 作者：闪闪发光的狼

JavaScript 设计模式（六）：观察者模式与发布订阅模式 https://segmentfault.com/a/1190000019722065 作者： 以乐之名