JavaScript设计模式-观察者模式(8)

简介: JavaScript设计模式-观察者模式(8)

观察者设计模式


观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件

这里需要俩个构造函数进行观察者设计模式一个是被观察者一个是观察者

我们来利用观察者监听对象某个属性的修改操作,对象某个属性的修改会触发观察者的某些方法

初始数据


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

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

坚持努力,不惧未来!

相关文章
|
6天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
|
27天前
|
设计模式 传感器
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
33 0
|
2天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
11 3
|
14天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
32 9
|
13天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
25 2
|
21天前
|
设计模式 监控 UED
设计模式之观察者模式
【10月更文挑战第12天】 观察者模式是一种行为型设计模式,定义了一对多的依赖关系,当一个对象状态改变时,所有依赖它的对象都会自动更新。主要由主题(被观察者)和观察者组成,实现对象间的松耦合,广泛应用于用户界面、事件驱动系统和数据监控等领域。
|
23天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
本教程详细讲解Kotlin语法,适合深入学习。对于快速掌握Kotlin,推荐“简洁”系列教程。本文特别介绍了观察者模式,包括使用Java API和Kotlin委托属性(如Delegates.observable)实现的方法,旨在帮助开发者更高效地实现和优化观察者模式的应用。
31 3
|
1月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
29 3
|
2月前
|
设计模式 Java 关系型数据库
设计模式——观察者模式
观察者模式介绍、观察者模式优化天气预报案例、JDK 的Observable类和Observer类
设计模式——观察者模式
|
26天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
28 0