前端开发设计模式——观察者模式

news2024/11/8 10:27:53

目录

一、定义和特点

1. 定义

2. 特点

二、实现方式

1. 使用 JavaScript 实现观察者模式的基本结构

2. 实际应用中的实现示例

三、使用场景

1. 事件处理

2. 数据绑定

3. 异步通信

4. 组件通信

四、优点

1. 解耦和灵活性

2. 实时响应和数据一致性

3. 提高代码的可复用性

五、缺点

1. 内存泄漏风险

2. 通知顺序和复杂性

3. 性能开销

六、注意事项

1. 正确管理观察者的生命周期

2. 注意通知的频率和时机

3. 处理好观察者之间的关系

4. 测试和调试


一、定义和特点

1. 定义

        观察者模式是一种软件设计模式,它定义了对象之间的一种一对多的依赖关系。当一个对象(被观察对象,也称为主题或可观察对象)的状态发生改变时,所有依赖于它的对象(观察者)都会得到通知并自动更新。

2. 特点

  • 一对多关系:一个主题可以有多个观察者与之关联。主题负责通知观察者,而观察者只需关注主题的状态变化并做出相应反应,它们之间的耦合度较低。
  • 自动更新:观察者无需主动查询主题的状态,而是在主题状态变化时自动接收通知并进行更新操作,保证了数据的一致性和及时性。
  • 解耦性强:主题和观察者相互独立,它们只通过定义好的接口进行交互。这使得系统的各个模块可以独立开发、修改和扩展,增强了系统的灵活性和可维护性。

二、实现方式

1. 使用 JavaScript 实现观察者模式的基本结构

// 定义主题(可观察对象)类
class Subject {
    constructor() {
        this.observers = []; // 存储观察者的数组
    }

    // 添加观察者
    addObserver(observer) {
        this.observers.push(observer);
    }

    // 删除观察者
    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index!== -1) {
            this.observers.splice(index, 1);
        }
    }

    // 通知观察者状态更新
    notifyObservers() {
        this.observers.forEach(observer => {
            observer.update(this);
        });
    }
}

// 定义观察者类
class Observer {
    update(subject) {
        // 在这里实现具体的更新逻辑,不同的观察者可以有不同的实现
        console.log('观察者收到主题状态更新通知');
    }
}

2. 实际应用中的实现示例

        假设我们正在开发一个简单的天气预报应用,其中天气数据是主题,而在页面上显示天气信息的组件以及根据天气情况进行提醒的功能模块等都是观察者。

// 天气数据主题类
class WeatherData extends Subject {
    constructor() {
        super();
        this.temperature = 0;
        this.humidity = 0;
    }

    // 更新天气数据并通知观察者
    setWeatherData(newTemperature, newHumidity) {
        this.temperature = newTemperature;
        this.humidity = newHumidity;
        this.notifyObservers();
    }
}

// 显示天气信息的观察者类
class DisplayWeatherObserver extends Observer {
    update(weatherData) {
        const temperature = weatherData.temperature;
        const humidity = weatherData.humidity;
        // 在这里更新页面上显示天气信息的元素
        document.getElementById('temperature').textContent = `温度: ${temperature}°C`;
        document.getElementById('humidity').textContent = `湿度: ${humidity}%`;
    }
}

// 天气提醒观察者类
class WeatherAlertObserver extends Observer {
    update(weatherData) {
        const temperature = weatherData.temperature;
        const humidity = weatherData.humidity;
        // 根据天气情况进行提醒
        if (temperature > 30 && humidity > 70) {
            alert('天气炎热潮湿,注意防暑防潮!');
        }
    }
}

// 使用示例
const weatherData = new WeatherData();
const displayObserver = new DisplayWeatherObserver();
const alertObserver = new WeatherAlertObserver();

weatherData.addObserver(displayObserver);
weatherData.addObserver(alertObserver);

// 模拟天气数据更新
weatherData.setWeatherData(28, 60);
weatherData.setWeatherData(32, 75);

        在上述示例中,WeatherData类作为主题,负责维护天气数据和观察者列表,并在数据更新时通知观察者。DisplayWeatherObserverWeatherAlertObserver类分别是不同的观察者,它们根据主题的通知进行相应的操作,一个更新页面显示,一个进行天气提醒

三、使用场景

1. 事件处理

        在前端页面中,用户的交互操作会触发各种事件,如按钮点击、表单提交等。可以将触发事件的元素看作主题,而处理这些事件的函数或模块看作观察者。例如,当用户点击一个登录按钮时,按钮是主题,登录验证逻辑、页面跳转逻辑等都是观察者,按钮点击后(主题状态改变),相应的观察者会执行各自的任务。

2. 数据绑定

        在现代前端框架中广泛应用的数据双向绑定机制通常基于观察者模式实现。当数据模型(主题)发生变化时,与之绑定的视图(观察者)会自动更新显示;反之,当用户在视图中进行操作修改数据时,数据模型也会相应更新,同时通知其他相关的视图进行更新。例如,在 Vue.js 中,当一个数据属性发生变化时,所有依赖该属性的模板部分都会自动重新渲染。

3. 异步通信

        当进行异步数据请求(如 AJAX 请求获取数据)时,请求对象可以看作主题,而请求成功后的后续处理逻辑(如更新页面数据、显示提示信息等)可以看作观察者。一旦数据请求完成(主题状态改变为获取到数据),观察者就会收到通知并进行相应的处理。

4. 组件通信

        在大型前端应用中,不同组件之间可能需要进行通信。例如,一个父组件可以作为主题,子组件作为观察者。当父组件的某些数据或状态发生变化时,它可以通知子组件进行相应的更新或操作,而子组件无需直接访问父组件的内部状态,保持了组件之间的独立性和解耦性。

四、优点

1. 解耦和灵活性

        主题和观察者之间的松散耦合使得它们可以独立变化和扩展。可以方便地添加新的观察者或修改现有观察者的行为,而不需要对主题的代码进行大量修改。同样,主题的内部实现可以改变,只要它仍然能够正确地通知观察者状态变化,观察者的代码也无需做太大调整。这使得系统更容易维护和扩展,适应不断变化的需求。

2. 实时响应和数据一致性

        观察者能够实时接收到主题状态变化的通知,并立即进行相应的更新操作,保证了系统中数据的一致性。用户在前端界面上看到的信息始终是最新的,提升了用户体验。例如,在数据绑定的场景中,用户对数据的修改可以立即反映在界面上,反之亦然。

3. 提高代码的可复用性

        观察者模式将不同的功能模块(观察者)分离出来,每个观察者只关注自己的特定任务和对主题状态变化的响应。这些观察者可以在不同的项目或场景中复用,只需要将它们与适当的主题进行关联即可。例如,一个用于显示数据变化的观察者组件可以在多个不同的数据展示页面中使用。

五、缺点

1. 内存泄漏风险

        如果在观察者不再需要关注主题状态变化时,没有正确地从主题的观察者列表中删除,那么即使观察者所关联的对象已经不再使用,它仍然会占用内存。这可能导致内存泄漏问题,尤其是在长时间运行的前端应用中。例如,当一个页面组件被销毁,但与之绑定的观察者没有被解除绑定,就会出现这种情况。

2. 通知顺序和复杂性

        当有多个观察者时,通知的顺序可能会影响系统的行为和结果。如果观察者之间存在依赖关系或者对通知顺序有要求,需要额外的机制来保证通知的正确顺序,这会增加系统的复杂性。而且,在复杂的系统中,可能难以追踪和理解所有观察者之间的交互关系以及它们对主题状态变化的响应逻辑。

3. 性能开销

        当主题频繁地发生状态变化并且有大量观察者时,通知所有观察者并执行它们的更新方法可能会带来一定的性能开销。特别是当观察者的更新操作比较复杂或者耗时较长时,可能会影响系统的整体性能和响应速度。例如,在一个实时数据更新的场景中,如果每秒都有大量数据更新并且有多个观察者进行复杂的计算和渲染操作,可能会导致页面卡顿。

六、注意事项

1. 正确管理观察者的生命周期

        在添加观察者时,要确保在合适的时机(通常是在观察者对象创建并准备好接收通知时)进行添加操作。同时,当观察者不再需要关注主题状态时,一定要及时从主题的观察者列表中删除,以避免内存泄漏。可以在观察者对象的销毁方法或者相关的生命周期钩子函数中执行删除操作。

2. 注意通知的频率和时机

        要合理控制主题状态变化的通知频率,避免过于频繁的通知导致性能问题。可以考虑对主题的状态变化进行适当的缓存或合并处理,在一定条件下再进行通知。同时,要确保通知的时机是合适的,即在主题的状态确实发生了有意义的变化并且观察者需要进行相应处理时才发送通知。

3. 处理好观察者之间的关系

        如果多个观察者之间存在依赖关系或者需要协同工作,要设计好它们之间的交互方式和顺序。可以通过引入中间协调者或者规定明确的通知顺序规则来解决。同时,要注意避免观察者之间的循环依赖等问题,以免导致系统出现异常行为或死锁。

4. 测试和调试

        由于观察者模式涉及多个对象之间的交互,在开发过程中要进行充分的测试和调试。可以编写单元测试来验证主题和观察者的功能是否正确,以及它们之间的交互是否符合预期。在调试时,可以利用浏览器的开发者工具等手段来跟踪观察对象的状态变化和通知过程,以便及时发现和解决问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

思科--交换网络综合实验

前言 之前一直在学华为ENSP的命令,最近来了个实验(被坑了),要求是用思科完成。没法子,就弄呗 拓扑图 实验目标 首先配置以太通道(逻辑上的)实现链路冗余和负载共享 在交换机接口配置trunk&#…

推荐一款开源的免费PDF编辑工具:CubePDF Utility

CubePDF Utility是一款功能强大的开源免费PDF编辑器,它采用了基于缩略图的界面设计,为用户提供了直观且高效的PDF编辑体验。该软件特别针对那些希望以简单直观方式编辑 PDF 文件的用户而设计,支持多种操作,如合并、提取、拆分、更…

探索C嘎嘎:初步接触STL

#1024程序员节|征文# 前言: 在前文小编讲述了模版初阶,其实讲述模版就是为了给讲STL提前铺垫,STL是C中很重要的一部分,各位读者朋友要知道它的份量,下面废话不多说,开始走进STL的世界。 目录&am…

【java】java的基本程序设计结构03-charboolean

char类型 代表 字符--符号---几何图形 大小由编码类型决定。 char是基本类型,但String不是。 String是Java中的一个类,属于引用类型; char中只能放一个字符。 char a‘a’; //任意单个字符,加单引号。 char a‘中’;//任意单个中文…

22-Carla AD 代理

CARLA AD agent是一种AD agent,它可以遵循给定的路线,避免与其他车辆相撞,并通过访问地面真实数据来遵守红绿灯的状态。CARLA AD demo使用它来提供一个如何使用ROS桥接的示例。 在内部,CARLA AD Agent使用单独的节点进行局部规划。…

Could not find the planner configuration ‘None‘ on the param server

moveit中运行demo.launch报错:Could not find the planner configuration ‘None’ on the param server 打开config文件夹下的config,找到ompl_planning.yaml文件,找到: arm: default_planner_config: None gripper: default_p…

微信支付宝小程序SEO优化的四大策略

在竞争激烈的小程序市场中,高搜索排名意味着更多的曝光机会和潜在用户。SEO即搜索引擎优化,对于小程序而言,主要指的是在微信小程序商店中提高搜索排名,从而增加曝光度和用户访问量。有助于小程序脱颖而出,提升品牌知名…

Servlet 3.0 注解开发

文章目录 Servlet3.0注解开发修改idea创建注解的servlet模板内容讲解 关于servlet3.0注解开发的疑问_配置路径省略了属性urlPatterns内容讲解内容小结 Servlet3.0注解开发 【1】问题 说明:之前我们都是使用web.xml进行servlet映射路径的配置。这样配置的弊端&…

如何把网页的图片批量下载?3批量下载方法有详细步骤

如何把网页的图片批量下载?在浏览网页时,我们经常会遇到内容丰富、图片繁多的页面,无论是欣赏美图集、研究设计案例,还是收集教学素材,这些图片往往都是宝贵的资源。然而,一张张手动保存不仅耗时费力&#…

Linux中SPI

参考资料 https://www.cnblogs.com/aaronLinux/p/6219146.html1.SPI 2.SPI传输 2.1传输示例 首先,CS0拉低选中的SPI Flash , 然后在每个时钟周期, DO输出对应的电平。 SPI FLASH会在每个时钟的上升沿读取D0的电平。2.2SPI模式 根据SCK的电平以及数据在…

状态机模型

文章目录 一、大盗阿福二、股票买卖 IV三、股票买卖 V四、设计密码4.1kmp题目4.2设计密码 一、大盗阿福 题目链接 #include<iostream> #include<cstring> #include<algorithm> using namespace std; const int N 1e5 10; int f[N][2]; int main() {int…

用户统计开发思路

1. 需求分析 所谓用户统计&#xff0c;实际上统计的是用户的数量。通过折线图来展示&#xff0c;上面这根蓝色线代表的是用户总量&#xff0c;下边这根绿色线代表的是新增用户数量&#xff0c;是具体到每一天。所以说用户统计主要统计两个数据&#xff0c;一个是总的用户数量&…

我开源了一个短视频应用(Go+React)|DouTok2.0 项目介绍

前言 大家好&#xff0c;这里是白泽&#xff0c;拖更了一段时间&#xff0c;抱歉。在 DouTok2.0 可以初步允许大家接入开发之后&#xff0c;这篇文章才得以出炉。 DouTok&#xff1a;一个开源的 web 端的短视频应用&#xff0c;采用微服务架构&#xff0c;包含前后端&#xff…

JavaEE初阶---网络原理之TCP篇(二)

文章目录 1.断开连接--四次挥手1.1 TCP状态1.2四次挥手的过程1.3time_wait等待1.4三次四次的总结 2.前段时间总结3.滑动窗口---传输效率机制3.1原理分析3.2丢包的处理3.3快速重传 4.流量控制---接收方安全机制4.1流量控制思路4.2剩余空间大小4.3探测包的机制 5.拥塞控制---考虑…

玩转HF/魔搭/魔乐社区

下载依赖 下载指定文件 玩转HF/魔搭/魔乐社区 1. 闯关任务 &#x1f600;Hello大家好&#xff0c;这节课为大家带来“玩转HF/魔搭/魔乐社区”的课程&#xff0c;课程任务请访问闯关任务 2. 课程内容 &#x1f600;Hello大家好&#xff0c;欢迎来到书生大模型实战营第四期…

ReactNative Fabric渲染器和组件(5)

ReactNative Fabric渲染器和组件 简述 Fabric是ReactNative中新架构最核心的模块&#xff0c;本章我们会来了解一下自定义一个Fabric组件&#xff0c;然后在JS文件中声明之后如何&#xff0c;是怎么映射到原生构建一个View的。 关于Fabric架构理念官网已经有说明了&#xff0…

DataSophon集成ApacheImpala的过程

注意: 本次安装操作系统环境为Anolis8.9(Centos7和Centos8应该也一样) DataSophon版本为DDP-1.2.1 整合的安装包我放网盘了: 通过网盘分享的文件&#xff1a;impala-4.4.1.tar.gz等2个文件 链接: https://pan.baidu.com/s/18KfkO_BEFa5gVcc16I-Yew?pwdza4k 提取码: za4k 1…

计算机网络-MSTP概述

一、RSTP/STP的缺陷与不足 前面我们学习了RSTP对于STP的一些优化与快速收敛机制。但在划分VLAN的网络中运行RSTP/STP&#xff0c;局域网内所有的VLAN共享一棵生成树&#xff0c;被阻塞后的链路将不承载任何流量&#xff0c;无法在VLAN间实现数据流量的负载均衡&#xff0c;导致…

字节青训-兔群繁殖之谜

问题描述 生物学家小 R 正在研究一种特殊的兔子品种的繁殖模式。这种兔子的繁殖遵循以下规律&#xff1a; 每对成年兔子每个月会生育一对新的小兔子&#xff08;一雌一雄&#xff09;。新生的小兔子需要一个月成长&#xff0c;到第二个月才能开始繁殖。兔子永远不会死亡。 小 R…

uniapp写移动端,适配苹果手机底部导航栏,ios安全区问题,苹果手机遮挡底部信息,uview的u-action-sheet组件

手机上有很多组件&#xff0c;需要手机底部弹窗来做选择,picker选择器&#xff0c;select列选择器呀这些&#xff0c;在苹果手机上会被底部nav遮住 采用了好几种配置的方式&#xff0c;多多少少都不太行&#xff0c;还是采用css来做吧&#xff0c;但是css来写想让它生效&#x…