javascript观察者 js观察者模式例子

观察者模式：定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并自动更新

1. 创建一个主题对象，用于接受状态变化，通知每个观察者对象

class SubObserve {
    constructor() {
      this.state = 0
      this.observers = []
    }
    //获取状态
    getState() {
      return this.state
    }
    //设置状态
    setState(state) {
      this.state = state
      this.notify()
    }
    //新增观察者
    attach(observer) {
      this.observers.push(observer)
    }
    //通知每个观察者
    notify() {
      this.observers.forEach(observer =>{
          observer.update(this.state)
      })
    }
  }

2.创建观察者对象

class Observe{
      constructor(name){
          this.name = name
      }
      update(state){
          console.log(`${this.name} 观察者更新了state：${state}`);
      } 
  }

3.在主题对象当中添加观察者对象

let s1 = new SubObserve ()
  let observer1 = new Observe('observer1')
  s1.attach(observer1)

4.使用一个输入框使用输入的内容作为输入的状态，观察改变控制台变化

<input type="text" id="app" oninput="handleInput(event)">
 function handleInput(e){
     let event = e || event
       s1.setState(event.target.value)
   }

效果如下