设计模式之观察者模式

观察者模式

/*
1.创建被观察者
=> 属性，自己的状态
=> 队列，记录都有谁观察自己，数组[]
=> 方法，能设置自己的状态，当我需要改变时，要触发这个方法改变状态
=> 方法，添加观察者
=> 方法，删除观察者
2. 创建观察者
=> 属性， 需要一个身份证明
=> 方法， 需要一个技能
*/

• 观察者构造函数

class Observer {
      constructor(name, fn = () => { }) {
        this.name = name
        this.fn = fn
      }
    }

• 被观察者构造函数

class Subject {
      constructor(state) {
        // 记录自己的状态
        this.state = state;
        // 数组用来保存观察者
        this.observers = [];
      }

      // 设置状态的方法
      setState(val) {
        this.state = val

        // 遍历this.observers 依次触发观察者技能
        this.observers.forEach(item => {
          // item 是观察者
          // console.log(item);
          item.fn(this.state)
        })
      }
      // 添加观察者
      addObserver(obs) {
        // 判断观察者是否已经存在，若存在则不再添加
        // const res = this.observers.some(item => item === obs)
        // const res = this.observers.find(item => item === obs)
        // const res = this.observers.indexOf(obs);
        this.observers = this.observers.filter(item => item !== obs)
        // console.log(res);

        this.observers.push(obs);
      }

      delObserver(obs) {
        // 把obs观察者删除
        this.observers = this.observers.filter(item => item !== obs)
      }
    }

• 创建两个观察者

    const bzr = new Observer('班主任', (state) => { console.log('因为' + state + '把你爸找来'); })
    const xz = new Observer('校长', (state) => { console.log('因为' + state + '你是哪个班的'); })

• 创建被观察者

 const xiaoming = new Subject('学习');

• 给xiaoming 添加观察者

 xiaoming.addObserver(bzr)
 xiaoming.addObserver(xz)

• 控制台打印结果