JS之观察者模式和发布订阅模式--前端面试准备

二者工作原理&区别

观察者模式

• 如同实验进行的过程一般，观察者和被观察者(目标)是紧耦合的，如果目标一旦触发了事件，观察者就会立刻作出响应的举措。

发布订阅模式

• 发布者和订阅者二者之间存在一个中介，有点类似于你去app订阅喜欢的漫画一样，当漫画大大赶工出了新的一话并发布在了app上，app就会通知你：快来看漫画啦！
  漫画大大和宅小吴之间是没有互动的，即发布者和订阅者之间是松耦合的。

区别

• 发布订阅模式比观察者模式多了一个调度中心；这个调度中心实现了解耦，且可以实现更细粒度的一些控制。（进行权限控制和节流操作）
• 观察者模式大多数时候是同步的，而发布-订阅模式大多数时候是异步的（使用消息队列）。

发布订阅模式的代码实现

• 需要有基本的订阅、取消订阅、发布的功能；

class PubSub {
    constructor() {
        this.subscribers = {}//订阅者初始化为空
        //为{订阅种类type:[订阅者队列]，...，}
    }

    sub(type,subscriber){//订阅
        if(!Object.prototype.hasOwnProperty.call(this.subscribers, type)){
            //若subscribers中无关于type的订阅信息，则为其创建一个订阅者列表
            this.subscribers[type] = [];
        }
        this.subscribers[type].push(subscriber);
    }

    unSub(type,subscriber){//取消订阅
        let subscribers=this.subscribers[type];
        //如果并没有订阅这样type的人，那么就返回，不做处理
        if (!subscribers || !subscribers.length) return;
        //反之，将type对应订阅队列里的订阅者筛掉
        else this.subscribers[type] = subscribers.filter(v => v !== subscriber);
    }

    pub(type,...args){//发布type对应的消息，并通知；
        //可以同时发布多个消息；
        let listeners = this.subscribers[type];
        if (!listeners || !listeners.length) return;
        listeners.forEach(fn => console.log(fn,...args));
    }

}
 
let ob = new PubSub();
ob.sub('add', 'wkx');
ob.sub('add', 'yww');

ob.pub('add', 1);

ob.unSub('add','wkx');
ob.pub('add', 2);

console.log(ob.subscribers);

• 输出的效果为
  

• 因为没有太多时间学习更深层面的东西了，这里留个网址，以后学：比较难的版本

参考

参考1