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('前端若水')

观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性，但是被观察者拥有过多的观察者进行监听会提高运行时间以及程序的复杂程度

到此这篇关于JavaScript设计模式中的观察者模式的文章就介绍到这了,更多相关JavaScript 观察者模式内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！