js简单实现观察者模式

1、什么是观察者模式？

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

2、代码具体实现

• 首先定义一个主题，用于接收状态变化，并通知每个观察者

// 主题，接收状态变化，并通知每个观察者
        class Sub{
            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()
                })
            }
        }

• 然后再定义一个观察者，里面有一个用于更新状态的方法，主要职责：等待被通知

 // 观察者，等待被通知
        class Observe{
            constructor(name,sub){
                this.name = name
                this.sub = sub
                this.sub.attach(this)
            }
            
            update(){
                console.log(`${this.name} 观察者更新了state：${this.sub.getState()}`);
            }
        }

• 测试代码

		// 实例化一个主题
		let s = new Sub()
		// 添加观察者实例
		let o1 = new Observe('o1',s)
		// 设置状态
		s.setState(2)

• 使用以上方式观察可能效果不够明显，可使用一个输入框使用输入的内容作为输入的状态，观察改变控制台变化（此种方式需要在页面写一个输入框，并绑定事件）

 <input type="text" id="app" oninput="handleInput(event)">

 function handleInput(e){
            let event = e || event
            s.setState(event.target.value)
            // s2.setState(event.target.value)
        }

实现效果如下