前言

很久之前面试字节跳动的时候被问到，发布订阅模式和订阅者模式一样吗？我说一样。面试官问我：你确定吗？这是，我意识到应该是不一样的。面试结束之后，我就在网上百度：发布订阅模式和观察者模式一样吗？得到的结果是：70%的人说是一样的，30%的人说是不一样的。我就接着百度：发布订阅模式和观察者模式的区别。结果发现不同的人说的区别也是不一样的。就连vue的双向绑定的实现，有的人说是观察者模式，还有的人说是发布订阅模式。今天我想结合从网上找到的信息，记录一下我对发布订阅者模式和观察者模式的理解。

观察者模式

场景：有多个顾客在淘宝的同一家店找客服买水杯，可不巧的是，水杯缺货了。顾客就和客服协商，等进货了以后，联系他们。有的顾客要求用短信联系，有的顾客要求用电话联系，有的顾客要求用微信联系，还有的顾客要求用qq联系。

代码实现

// 目标者类
class Subject {
  constructor() {
    this.observers = [];  // 观察者列表
  }
  // 添加
  add(observer) {
    this.observers.push(observer);
  }
  // 删除
  remove(observer) {
    let idx = this.observers.findIndex(item => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }
  // 通知
  notify() {
    for (let observer of this.observers) {
      observer();
    }
  }
}

// 实例化目标者
let subject = new Subject();

// 向目标者添加观察者
subject.add(() => {
    console.log("电话联系：水杯到了");
});
subject.add(() => {
    console.log('短信联系：水杯到了');
});
subject.add(() => {
    console.log("微信联系：水杯到了");
});
subject.add(() => {
    console.log('qq联系：水杯到了');
});


// 目标者通知更新
subject.notify();  

发布订阅模式

场景：有一个员工给他的老板说：你过年需要给我发红包，国庆要给我送五星红旗，端午节你要给我送粽子，元宵节你要送我元宵，这样你才是一个好老板。老板心想：那我不亏啊，送这么点东西，我就是好老板了，那必须送啊！

代码实现

class EventEmiter {
    constructor() {
        this.listenerList = {};
    }
    on(type, fn) {
        this.listenerList[type] = fn;
    }
    emit(type) {
        let fn = this.listenerList[type];
        fn();
    }
}

let eventBus = new EventEmiter();

eventBus.on("XinNian", ()=> {
    console.log("新年礼物");
});
eventBus.on("ZhongQiuJie", ()=> {
    console.log("中秋礼物");
});
eventBus.on("DuanWuJie", ()=> {
    console.log("端午节礼物");
});
eventBus.on("GuoQingJie", ()=> {
    console.log("国庆节礼物");
});
eventBus.emit('XinNian');

总结

我的代码里把发布订阅模式和观察者模式写的很简单，实际使用，可以根据项目情况进行代码的增加。要想知道区别，可以细细品味一下我写的场景情况。

结论

• 发布订阅模式和观察者模式不同