观察者模式

        + 例子:监控

          => 我们坐在教室里就是 被观察者

          => 监控后面的老师,就是 观察者

          => 当被观察者触发了一些条件的时候,观察者就会触发技能

        + 观察者模式:监控一个 对象 的状态,一旦状态发生变化,马上触发技能

          => 需要两个构造函数来实现

            1.创建被观察者

              => 属性,自己的状态

              => 队列,记录都有谁观察着自己,数组[]

              => 方法,能设置自己的状态,当我需要改变的时候,要触发这个方法改变状态

              => 方法,添加观察者

              => 方法,删除观察者

            2.创建观察者

              => 需要一个身份证明

              => 需要一个技能或多个技能

       

   // 观察者构造函数
    class Observer{
      constructor(name,fn = ()=>{}){
        this.name = name
        this.fn = fn
      }
    }

    // 创建两个观察者
    const bzr = new Observer('班主任',function(state){ console.log('介孩子' + state + '了') })
    const xz = new Observer('校长',function(state){ console.log(state + '了') })


    // 被观察者的构造函数
    class Subject{
      constructor(state){
        // 记录自己的状态
        this.state = state

        // 数组用来保存观察着我的人
        this.observers = []
      }

      // 设置自己的状态
      setState(val){
        this.state = val

        // 就需要把 我们所有观察者 的技能都触发
        // 遍历 this.observers 依次触发技能
        this.observers.forEach(item=>{
          // item就是每一个观察者,就是一个一个的对象
          // 告诉他我改变成了什么状态
          item.fn(this.state)
        })
      }

      // 添加观察者
      addObserver(obs){
        // 谁是观察者,就是传递谁进来
        // 判断一下,如果观察者已经存在,就不再添加了
        // some()
        const res = this.observers.some(item => item === obs)
        if(res) return
        this.observers.push(obs)
      }
    
      delObserver(obs){
        // 把obs观察者删除
        // 直接使用filter方法
        this.observers = this.observers.filter((item)=>{ return item!==obs })
      }
    }

    // 创建一个被观察者
    const xiaoming = new Subject('学习')

    // 给 xiaoming 添加一个观察者
    xiaoming.addObserver(bzr)
    xiaoming.addObserver(xz)