JavaScript观察者模式实现原理与代码解析

   let obj = {
            name: "若水"
        }

 // 被观察者类
        class Subject {
        //未传值初始为空
            constructor(state = "") {
                // 初始状态
                this.state = state
                // 观察者方法队列 
                this.observsers = []
            }
            // 设置自己的状态
            setState(val) {
            // 告诉观察者目前改变成了什么状态
                this.state = val;
                // 同时需要把自己身上的观察者方法全部触发
                this.observsers.map(item => {
                    // item是每一个观察者，每一个观察者是一个对象
                    item.callback(this.state);
                })
            }
            // 添加观察者
            addObserver(observer) {
                // 把观察者传递进来
                this.observsers.push(observer)
            }
            // 删除观察者
            removeObserver(observer) {
                // 过滤出来非当前观察者的观察者
                this.observsers = this.observsers.filter(obs => obs !== observer);
            }
        }

    // 观察者类
        class Observer {
            // name需要观察的参数 
            // callback 观察的参数达到边界条件触发的事件
            constructor(name, callback = () => { }) {
                this.name = name;
                this.callback = callback;
            }
        }

     // 创建观察者
        const ObserverName = new Observer('监听obj改变', () => { console.log('obj发生改变'); })
        // 创建一个被观察者
        const name = new Subject(obj.name)
        // 添加一个观察者
        name.addObserver(ObserverName)
        //触发观察者方法
        name.setState('前端若水')