设计模式~观察者模式和发布订阅模式的比较：

设计模式~观察者模式和发布订阅模式的区别

 

1，简单区分：,

• 观察者模式：观察者+被观察者 （观察者与被观察者~紧耦合）          被观察者更新内容后，直接通知观察者
• 发布订阅模式：订阅者+ 经纪人（中间人） + 被订阅者（观察者与被观察者~完全不耦合），被订阅者更新内容后，是先通知经纪人，经纪人再发布给订阅者。

 

2，设计模式解析+举例子:

观察者模式：微博大V（被观察者）内部创建有一个粉丝集合（存放观察者），这里对于粉丝需要先注册该大V（才能成为该大V的粉丝，即与该大V建立联系），

然后两者之间有联系后，大V再发布微博，就会将更新状态直接通知粉丝。

 

✿ 观察者模式的设计：在被观察者内部创建有一个存放观察者的集合（外部的观察者通过注册，被存放进该观察者集合），一旦有消息更新，被观察者，

只需要调用一个方法，就可以直接通知到所有的观察者。

 

观察者模式代码示例：

// 观察者
class Observer {
    constructor() {

    }
    update(val) {

    }
}
// 观察者列表
class ObserverList {
    constructor() {
        this.observerList = []
    }
    add(observer) {
        return this.observerList.push(observer);
    }
    remove(observer) {
        this.observerList = this.observerList.filter(ob => ob !== observer);
    }
    count() {
        return this.observerList.length;
    }
    get(index) {
        return this.observerList[index];
    }
}
// 目标
class Subject {
    constructor() {
        this.observers = new ObserverList();
    }
    addObserver(observer) {
        this.observers.add(observer);
    }
    removeObserver(observer) {
        this.observers.remove(observer);
    }
    notify(...args) {
        let obCount = this.observers.count();
        for (let index = 0; index < obCount; index++) {
            this.observers.get(i).update(...args);
        }
    }
}

 

 

 

发布订阅模式：之前是大V将消息直接发送给所有粉丝，但是消息有好消息跟坏消息，粉丝有黑粉真粉，为了消息更好的被接收，获取到更多的利益，

大V选择了一个经纪人（broker），经纪人通过分类，将大V 的内容划分成不同的主题，提供给不同粉丝选择。（订阅者实现一种多样化选择）


✿ 发布订阅模式的设计：被订阅者内部有一个经纪人，在经纪人内部有存放根据类型划分的粉丝集合对象 {对象的元素可以是类型粉丝数组}

 

发布订阅模式代码示例：

/*发布者（经纪人）*/
class PubSub {
  constructor() {
　　//存放类型粉丝的对象
    this.subscribers = {}
  }
  subscribe(type, fn) {
    //判断 subscribers[type]是否存在
    if (!Object.prototype.hasOwnProperty.call(this.subscribers, type)) {
      this.subscribers[type] = [];
    }

    this.subscribers[type].push(fn);
  }
  unsubscribe(type, fn) {
    let listeners = this.subscribers[type];
    if (!listeners || !listeners.length) return;
    this.subscribers[type] = listeners.filter(v => v !== fn);
  }
  publish(type, ...args) {
    let listeners = this.subscribers[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);