前言：

网上有很多讲这两种模式的文章，但是看起来很枯燥，而且也没有特别清晰的表达出来，有点含糊， 甚至表达得有一些模棱两可，今天就来谈一下我对今天谈谈我对观察者模式和发布订阅模式的理解。往下看

观察者模式

观察者模式指的是一个对象(Object a)维持一系列依赖(关注这个词感觉更好)它的对象（Object b,c,d） 当它的有关状态发生变化时 Object a 就要通知一系列 Object b,c,d 对象进行更新

在该模式下 “Object a”拥有添加，删除和通知一系列“Object b,c,d”对象的方法，而“Object b,c,d”拥有更新等方法

下面我们实现一个观察者模式

class Subject{ constructor () { this.observers =[] } add (observer) { this.observers.push(observer) } remove (observer) { this.observers.map((item, index) => { if (item === observer) { this.observers.splice(index, 1) } }) } notify () { this.observers.map((item, index) => { item.update() }) }}class Observer { constructor (name) { this.name = name } update () { console.log("I`m " + this.name) }}var sub = new Subject()var obs1 = new Observer("obs1")var obs2 = new Observer("obs2")sub.add(obs1)sub.add(obs2)sub.notify() // I`m obs1 I`m obs2sub.remove(obs2)sub.notify() //I`m obs1

上述代码，我们创建了一个Subject对象和两个Observer对象 当相关信息发生变化 即通知变化 我们也可以移出相关依赖的对象

发布订阅模式

发布订阅模式指的是订阅者基于一个事件通过自定义事件订阅主题 被订阅者(发布者)通过发布主题事件方式通知订阅该主题的订阅者进行更新等操作

举个栗子吧

我喜欢看NBA，特别喜欢湖人队 （湖人总冠军），我在新浪体育关注了湖人队，但是没关注火箭队， 那么只要湖人一有新消息就会通知我，而火箭队就算夺冠了，也不会有消息推送给我。所以一般我们需要做埋点，这个时候就可以用到，只要我在这块埋点用的图片被请求， 我就让你触发相应的事件

下面我们来看看具体的代码吧

let event= { list:[], on (key, fn) { if (!this.list[key]) { this.list[key] = [] } this.list[key].push(fn) }, emit () { let key = [].shift.call(arguments), fns = this.list[key] if (!fns || fns.length === 0 ) { return false } fns.forEach(element => { element.apply(this,arguments)  }); }, remove (key,fn) { let fns = this.list[key] if (!fns) return false if (!fn) { fns && (fns.length = 0) }else { fns.forEach((item,i) => { if(item === fn) { fns.splice(i, 1) } }) } }}function car () { console.log("我是劳斯莱斯幻影")}function rocket () { console.log("我是真理")}event.on('thing',data => { console.log("接收") console.log(data)})event.on('thing',car)event.on('thing',rocket)event.emit('thing',['宝马','奔驰'])

思路

创建一个对象（缓存队列）on方法把回调函数添加到缓存列表emit方法取arguments里第一个作为key 根据key值去执行对应缓存队列中的函数remove方法根据key取消订阅总结

其实，两者都是定义了一个一对多的依赖关系， 当有关状态发生变化时执行相应的更新的时候， 本质上的思想都是一样的， 而发布订阅可以看做是观察者的进阶版， 设计模式是一种思想 ，具体的需求实现有不同的方式， 我们在使用上也要基于不同的场景。不过，不管他们是不是同一个设计模式，他们的实现方式确实有差别，在使用的时候就应该根据场景来判断选择哪个。需要我们自己各自把握哦。

我是小架，我们下篇文章见！