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

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

坚持努力,不惧未来!

相关文章
|
2月前
|
设计模式 监控 Java
Kotlin - 改良设计模式 - 观察者模式
Kotlin - 改良设计模式 - 观察者模式
56 3
|
15天前
|
设计模式 存储 供应链
前端必须掌握的设计模式——观察者模式
观察者模式(Observer Pattern)是一种行为型设计模式,实现了一种订阅机制。它包含两个角色:**观察者**(订阅消息、接收通知并执行操作)和**被观察者**(维护观察者列表、发送通知)。两者通过一对多的关系实现解耦,当被观察者状态改变时,会通知所有订阅的观察者。例如,商店老板作为被观察者,记录客户的需求并在商品到货时通知他们。前端应用中,如DOM事件注册、MutationObserver等也体现了这一模式。
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
|
3月前
|
设计模式 传感器
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
54 0
|
2月前
|
设计模式 消息中间件 搜索推荐
Java 设计模式——观察者模式:从优衣库不使用新疆棉事件看系统的动态响应
【11月更文挑战第17天】观察者模式是一种行为设计模式,定义了一对多的依赖关系,使多个观察者对象能直接监听并响应某一主题对象的状态变化。本文介绍了观察者模式的基本概念、商业系统中的应用实例,如优衣库事件中各相关方的动态响应,以及模式的优势和实际系统设计中的应用建议,包括事件驱动架构和消息队列的使用。
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
44 1
|
2月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
42 2
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
30 3
|
3月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
37 9
|
3月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
40 2