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

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

坚持努力,不惧未来!

相关文章
|
7天前
|
设计模式 Java 关系型数据库
设计模式——观察者模式
观察者模式介绍、观察者模式优化天气预报案例、JDK 的Observable类和Observer类
设计模式——观察者模式
|
1月前
|
设计模式 存储 前端开发
【十四】设计模式~~~行为型模式~~~观察者模式(Java)
文章详细介绍了观察者模式(Observer Pattern),这是一种对象行为型模式,用于建立对象之间的一对多依赖关系。当一个对象状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。文中通过交通信号灯与汽车的案例以及多人联机对战游戏的设计方案,阐述了观察者模式的动机和应用场景。接着,文章介绍了观察者模式的结构、角色、优点、缺点以及适用情况,并通过代码示例展示了如何在Java中实现观察者模式。此外,还探讨了观察者模式在MVC架构中的应用以及Java中对观察者模式的支持。
【十四】设计模式~~~行为型模式~~~观察者模式(Java)
|
1月前
|
设计模式 安全 Go
[设计模式]行为型模式-观察者模式
[设计模式]行为型模式-观察者模式
|
22天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
14 0
|
1月前
|
设计模式 Go
go 设计模式之观察者模式
go 设计模式之观察者模式
|
1月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
2月前
|
设计模式 安全 Java
Java面试题:设计模式如单例模式、工厂模式、观察者模式等在多线程环境下线程安全问题,Java内存模型定义了线程如何与内存交互,包括原子性、可见性、有序性,并发框架提供了更高层次的并发任务处理能力
Java面试题:设计模式如单例模式、工厂模式、观察者模式等在多线程环境下线程安全问题,Java内存模型定义了线程如何与内存交互,包括原子性、可见性、有序性,并发框架提供了更高层次的并发任务处理能力
60 1
|
2月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
40 7
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
48 6
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
37 6