Javascript轻松理解发布订阅模式

首先声明，本文的创作灵感和基础来源于 这篇文章

发布订阅模式，也可以称之观察者模式，定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。发布订阅模式与观察者模式也有着些许区别。请看下面。

观察者模式

小王和小李知道张三是卖报的伙计，他们都想在张三那里买报纸。小王和小李便和张三约定，一旦张三有了新报纸，就通知他俩。这里，小王和小李作为观察者，张三作为被观察者，张三和王、李建立起一对多的通讯关系。此时一旦有消息发布，依赖于被观察者的对象都将得到通知，并自动更新。

下面p1、p2代表王、李，p3代表张三。

function Person(name) {
    this.name = name;
    this.list = []
}
Person.prototype.publish = function (money){
    console.log(this.name + '卖报一份'+money+"元")
    this.list.forEach(function(item, index){
        item(money)
    })
}
Person.prototype.subscribe  = function (targrt,fn){
    console.log(this.name + '准备买' + targrt.name+'的报纸');
    targrt.list.push(fn)
}
let p1 = new Person('p1')
let p2 = new Person('p2')
let p3 = new Person('p3')

p1.subscribe(p3 ,(money)=>{
    console.log(money >= 100 ? '太贵了，不买' : '买一份');
})
p2.subscribe(p3 ,(money)=>{
    console.log(money >= 200 ? '太贵了，不买' : '买一份');
})
p3.publish(120)

张三发布了120元的报纸。 王、李立即做出响应。

订阅发布模式

订阅发布模式的不同在于，观察者订阅者和订阅目标是联系在一起的，也就是王、李、张都是熟人，互相有联系。

发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为消息代理或调度中心或中间件，它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅者。 引用片段来源

也就是说，现在的小王、小李，开始在报社订阅报纸了，张三也把自己的报纸卖到报社，由报社进行销售。这个报社，就是 调度中心。订阅和发布事件，由这个调度中心统一管理。

let Topic = {
    topics: {},
    subscribe(topic, fn) {
        if (!this.topics[topic]) {
            this.topics[topic] = []
        }
        this.topics[topic].push(fn)
    },
    publish(topic, money) {
        if (this.topics[topic]) {
            for (let fn of this.topics[topic]) {
                fn(money)
            }
        }
    }
}

function Person(name) {
    this.name = name
}

Person.prototype.subscribe = function (topic, fn) {
    console.log('订阅者' + this.name + '订阅了' + topic )
    Topic.subscribe(topic, fn)
}
Person.prototype.publish = function (topic, money) {
    console.log('发布者' + this.name + '发布了' + topic )
    Topic.publish(topic, money)
}

let p1 = new Person('p1')
let p2 = new Person('p2')
let p3 = new Person('p3')

p1.subscribe('北京日报',(money)=>{
    console.log(money >= 100 ? '太贵了，不买' : '订阅');
})
p2.subscribe('上海日报',(money)=>{
    console.log(money >= 200 ? '太贵了，不买' : '订阅');
})
p2.subscribe('北京日报',(money)=>{
    console.log('订阅');
})
p3.publish('北京日报', 198)

---

有没有豁然开朗。哈哈。