来讲讲订阅发布与观察者模式

这两天常被人问到你知道什么是观察者模式吗？什么是订阅发布模式？两者又有什么区别？我细细一想，还真是被问到了，脑子里开始绕了起来。

借着这个疑问，就又复习了一下。

订阅发布模式

个人理解，订阅发布模式其实就是像我们去报亭里订阅一份报纸，或者是在微信上订阅公众号，就是我通过报亭订阅了这个事件，然后一旦有这个事件的时

候，报亭呢，就会发布，我就会收到这个事件了。报亭—就是订阅发布的中间人。这个是和观察者模式最大的区别。多说无益，代码来展示一下。

 var pubsub = (() => {
     var events = {};
     function subscripe(eventName, fn) {
         if (!events[eventName]) {
             events[eventName] = []
         }
         events[eventName] = fn;
     }
     function publish(eventName, ...args) {
         if (!events[eventName]) {
             // 说明没有订阅这个事件
             return;
         }
         for (let fn of  events[eventName]) {
             fn(...args);
         }
     }
     return {
         subscripe,
         publish
     }
 })()

// 使用
pubsub.subscribe('aa', (name, age) => {
    console.log(`I am ${name}, my age is ${age}`)
})
pubsub.publish('aa', 'zj', 20)
// => I am zj, my age is 20;
// 因为事件一发布，订阅事件就收到了，然后执行了打印方法。

观察者模式

比如我家里有一个摄像头，然后家人都有权限查看。那么家人就是观察者，家里的情况是被观察者。这个就是一个直接的一对多关系。直接进行观察的。

就好比是拍卖一个东西，好多人都在看着，那么这个东西是被观察者，在座的参加拍卖的都是观察者。再举个例子，比如直播间。主播是被观察者，

观众是观察者。那么主播说了什么的时候，观察者一直在观察者，主播提到谁的名字，所有观察者都可以看到。

// 举个例子，subject 比如是主播
class Subject {
    constructor() {
        this.name = '';
        this.people = [];
    }
    attatch(person) {
        this.people.push(person);
    }
    getName() {
        return this.name;
    }
    setName(name) {
        this.name = name;
        this.notifyAll();
    }
    notifyAll() {
        this.people.forEach((person) => {
            person.update();
        })
    }
}
class Observer {
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        this.subject.attatch(this);
    }
    update() {
        console.log(`${this.name} heard ${this.subject.getName()}`)
    }
}

var s = new Subject()
var a1 = new Observer('a1', s)
var a2 = new Observer('a2', s)
s.setName('zj')

二者区别

订阅发布可以通过一个中间人来完成，观察者模式时观察者和被观察者直接沟通来完成。
订阅发布是通过中间人来订阅一个事件，如果有这个事件的话，则发布后，订阅人就会执行。而观察者模式不同，只要是观察者，那么被观察者一有

动静，所有的观察者都会得到更新。