观察者模式和发布订阅模式

设计模式

一、观察者模式

监控一个对象，一旦对象的状态发生变化，马上触发技能 需要两个构造函数实现

• 创建被观察者

​ =>属性:自己的状态

​ =>队列:记录有谁在观察自己，数组[]

​ =>方法:改变状态、添加观察者、删除观察者

• 创建观察者

​ =>需要一个身份

​ =>需要一个技能

	//被观察者
    class Subject {
      constructor(state) {
        //被观察者的状态
        this.state = state;
        //存储观察者的队列
        this.observers = [];
      }
        
        
      setState(val) {
        this.state = val;
        //被观察者的状态改变了,触发观察者的技能
        this.observers.forEach((item) => {
          item.fn(this.state);
        })
      }
        
        
      addObserver(obs) {
        this.observers.push(obs);
      }
        
        
      removeObserver(obs) {
        this.observers = this.observers.filter((item) => item !== obs);
      }
    }

   
	//观察者
    class Observer {
      constructor(name, fn) {
        this.name = name;
        this.fn = fn;
      }
    }

    let bzr = new Observer('班主任', function (state) { console.log(`因为${state},班主任批判学生`); })
    let xz = new Observer('校长', function (state) { console.log(`因为${state},校长批判班主任`); })

    let xm = new Subject('学习');
    xm.addObserver(bzr);
    xm.addObserver(xz);
    xm.setState('玩手机');
    xm.removeObserver(xz);
    xm.setState('玩游戏');

二、发布订阅模式

 class Observer {
      constructor() {
        //消息队列
        this.message = {}
      }

      //1.向消息队列中添加内容
      on(type, fn) {
        if (!this.message[type]) {
          this.message[type] = []
        }
        this.message[type].push(fn);

      }

      //2.删除消息队列的内容
      off(type, fn) {
        //fn不存在
        if (!fn) {
          delete this.message[type];
          return;
        }
        //fn存在
        //判断没有订阅过
        if (!this.message[type]) return;
        //订阅过
        this.message[type] = this.message[type].filter(item => item !== fn);

      }

      //3.触发消息队列的内容
      emit(type) {
        if (!this.message[type]) return;//没有订阅，直接返回
        this.message[type].forEach((item) => item());//有订阅，遍历执行
      }
    }

    let person1 = new Observer();
    person1.on('click', handlerA)
    person1.on('click', handlerB)
    person1.on('enter', handlerC)
    person1.on('enter', handlerD)
    person1.off('click', handlerB)
    person1.off('enter')
    person1.emit('click')
    console.log(person1);


    function handlerA() {
      console.log("handlerA");
    }
    function handlerB() {
      console.log("handlerB");
    }
    function handlerC() {
      console.log("handlerC");
    }
    function handlerD() {
      console.log("handlerD");
    }