简单认识 观察者模式和订阅者模式的区别？

/*
    观察者模式和 订阅模式的区别？
    就是发布订阅模式有个事件调度中心。

*/


一、观察者模式

               触发事件
        目标 ------------》观察者
            《------------
              订阅目标
              
二、订阅者模式？
    
    目标----发布消息----》调度中心-------触发事件----》订阅者
    
    订阅者----订阅-------》调度中心

三、分析订阅者模式和观察者模式的不同之处。
/*
    观察者模式是观察者和目标直接进行交互，
    发布订阅式模式可以实现更细粒度的一些控制。
    发布者可以控制自己发布的消息，不让某些订阅者接收到。可以在调度中心
    进行相关的处理，类似于权限控制。 还可以做一些节流操作。
    
        
*/

四、观察模式代码的具体实现


// 观察者   我的粉丝都是我的观察者
class Observer{
    constructor(){
        
    }
    
    update(val){
        
    }
}

// 观察者列表   就是粉丝的数量
class ObserverList{
    constructor(){
        this.observerList = []
    }
    
    add(observer){
        return this.observerList.push(observer);
    }
    
    remove(observer){
        this.observer = this.observerList.filter(ob=> ob !== observer);
    }
    
    count(observer){
        return this.observerList.length;
    }
    
    get(index){
        return this.observerList[index];
    }
}

//目标   我是主播。是被观察的目标。
class Subject{
    constructor(){
        this.observer = new ObserverList();
    }
    
    addObserver(observer){
        this.observer.add(observer);
    }
    
    removeObserver(observer){
        this.observer.remove(observer);
    }
    
    notify(...args){
        let obCount = this.observer.count();
        for (let index=0; index < obCount; index++){
            this.observer.get(i).update(...args);
        }
    }
}


订阅者模式？    
class PubSub{
    //构造函数，构造器
    constructor(){
        this.subscribe ={}
    }
    
    // 订阅
    subscribe(type,fn){
        if(!Object.prototype.hasOwnProperty.call(this.subscribe,type)){
            this.subscribe[type]=[];
        }
        this.subscribe[type].push(fn);
        
    }
    
    unsubscribe(type,fn){
        let listeners = this.subscribe[type];
        if(!listeners || !listeners.length) return;
        this.subscribe[type] = listeners.filter(v =>v !== fn);        
    }
    
    publish(type, ...args){
        let listeners = this.subscribe[type];
        if(!listeners || !listeners.length) return;
        listeners.forEach(fn => fn(...args));
    }
}

let ob= new PubSub();
ob.subscribe('add',(val)=> console.log(val));
ob.publish('add',1);

/*
    观察者模式有具体目标调度，每个被订阅的目标里都需要有对观察者的处理
    会造成代码的冗余，
    
    发布订阅模式则有统一由调度中心处理，消除了发布者和订阅者之间的依赖。
    
    
    

*/


总结！
/*
    观察者模式的优点
        实现表示层和数据逻辑层的分离。
        在观察目标和观察者之间建立一个抽象的耦合，支持广播通信。
        
    缺点：
        如果一个观察目标对象有很多直接和间接的观察者，

*/

记录。