js设计模式:观察者模式

作用:

和发布订阅模式基本类似。

当某一对象状态发生变化时,所有的观察者都会收到通知。

vue响应式原理就是很经典的案例,数据发生变化,通知各个依赖。

示例:

        class TaobaoShop{
            constructor(){
                this.list = []
            }
            addSub(name,data){
              this.list.push({name,data})
            }
            pubUser(name,data){
                this.list.find(item=>item.name === name).data.awaitMsg(data)
            }
        }

        class User{
            constructor(name){
                this.name = name
            }
            awaitMsg(msg){
            console.log(`我是${this.name},商家通知我有货了,消息如下:${msg}`)
            awaitHandler(this.name)
            }
        }
        
        function awaitHandler(name){
         switch(name){
            case '王惊涛':
                console.log('可以开心的去学习react了')
                break
            case '孙悟空':
                console.log('可以开心的去学习打妖怪了')
         }

        }

        const tb = new TaobaoShop()
        const wjt = new User('王惊涛')
        const sunwukong = new User('孙悟空')
        tb.addSub('王惊涛',wjt)
        tb.addSub('孙悟空',sunwukong)
        tb.pubUser('王惊涛','王先生,您的《react从入门到精通》有货了')
        tb.pubUser('孙悟空','孙大圣,您的《72变化从入门到精通》有货了')

        //跟发布订阅模式类似
        //客户订阅淘宝的消息,就在淘宝商家处添加一个通知名单list,对象格式为{通知人:事件对象}
        //然后根据用户去通知不同的内容,用户获取通知后,可以调用awaitHandler做出自己后续想做的事
        //其实核心就是将观察者中定义的函数保存到通知者身上,在发通知的时候调用这个函数

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习数据结构和算法的第9天

题目讲解 移除元素 ​ 给你一个数组nums和一个值 val,你需要 原地 移除所有数值等于 val的元素,并返回移除后数组的新长度。 ​ 不要使用额外的数组空间,你必须仅使用0(1)额外空间并 原地 修改输入数组。 ​ 元素的顺序可以改变。你不需要…

Mouse Anti-HDM IgE Antibody Assay Kit

哮喘作为一种常见的慢性炎症类疾病,影响着全世界约3亿各年龄段的人。哮喘一般是由于暴露于过敏原(尘螨、宠物皮屑、花粉及霉菌等)引起的,其特征是气流阻塞和支气管痉挛。屋尘螨(house dust mite, HDM)是最常…

ASUS华硕枪神8笔记本电脑G614JIR,G814JVR,G634JYR,G834JZR工厂模式出厂Windows11系统 带重置还原功能

适用ROG枪神8系列笔记本型号: G614JIR、G614JVR、G634JYR、G634JZR G814JIR、G814JVR、G834JYR、G834JZR 链接:https://pan.baidu.com/s/1tYZt6XFNC2d6YmwTbtFN7A?pwd3kp8 提取码:3kp8 带有ASUS RECOVERY恢复功能、自带所有驱动、出厂主…

人工智能学习与实训笔记(十六):OpenAI SORA模型技术报告全文中英对照 (GPT4翻译+人工润色)

目录 Video generation models as world simulators(视频生成模型作为世界模拟器) Turning visual data into patches (将视觉数据转换为图像块) Video compression network (视频压缩网络) Spacetim…

2.16日学习打卡----初学Dubbo(一)

2.16日学习打卡 目录: 2.16日学习打卡一. 什么是分布式?二. 什么是RPC?三. Dubbo概念_简介四. Dubbo核心组件五.Dubbo配置开发环境六. Dubbo配置开发环境_管理控制台 一. 什么是分布式? 可以看我的这篇文章–2.14日学习打卡----初学Zookeeper(一) 二.…

Code Composer Studio (CCS) - Comment (注释)

Code Composer Studio [CCS] - Comment [注释] References Add Block Comment: 选中几行代码 -> 鼠标右键 -> Source -> Add Block Comment shortcut key: Ctrl Shift / Remove Block Comment: 选中几行代码->鼠标右键->Source->Remove Block Comment s…

Chrome 关闭F12 网络选项下的大时间段图

把所有的按钮点了一遍,终于找到了 点开F12点右上的小齿轮,把概览取消勾选就可以了 英文的控制台中叫Overview

Android 13.0 SystemUI下拉状态栏定制二 锁屏页面横竖屏通知栏都居中功能实现

1.前言 在13.0的系统rom定制化开发中,在关于systemui的锁屏页面功能定制中,由于在平板横屏通知栏功能中,通知栏总是显示在右边,并且是在右边居中显示的, 由于需要和竖屏显示一样,所以就需要用到在时钟下面显示通知栏,然后同样需要居中显示通知栏,所以就来分析下相关的…

12 个顶级音频转换器软件(免费)

当涉及不受支持的音乐文件时,音频文件转换器软件总是会派上用场。当您希望缩小大量大型音乐文件的大小以节省设备存储空间时,它也很有帮助。您在寻找传输音频的软件吗?好吧,请仔细选择音频转换器,因为最好的音乐转换器…

定制你的【Spring Boot Starter】,加速开发效率

摘要: 本文将介绍如何创建一个自定义的 Spring Boot Starter,让您可以封装常用功能和配置,并在多个 Spring Boot 项目中共享和重用。 1. 简介 Spring Boot Starter 是 Spring Boot 框架中的一种特殊的依赖项,它用于快速启动和配置…

媒体邀约能干什么?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 新的一年首先祝大家好运连连,万事兴龙! 媒体邀约能够为企业带来多方面的好处,具体包括: 1. 提升品牌知名度:通过媒体邀约&…

移动机器人的控制逻辑全解析。

你是否曾对那些在工厂中穿梭自如的移动机器人感到好奇?它们是如何准确无误地执行任务的?这一切都归功于移动机器人的控制逻辑!今天,就让我们深入探讨一下移动机器人控制逻辑的重点。 一、环境感知与建模技术是移动机器人实现自主导…

【Vue前端】vue使用笔记0基础到高手第2篇:Vue知识点介绍(附代码,已分享)

本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件…

多元统计分析课程论文-聚类效果评价

数据集来源:Unsupervised Learning on Country Data (kaggle.com) 代码参考:Clustering: PCA| K-Means - DBSCAN - Hierarchical | | Kaggle 基于特征合成降维和主成分分析法降维的国家数据集聚类效果评价 目录 1.特征合成降维 2.PCA降维 3.K-Mean…

开年炸裂-Sora/Gemini

最新人工智能消息 谷歌的新 Gemini 模型 支持多达 1M的Token,可以分析长达一小时的视频 1M Token可能意味着分析700,000 个单词、 30,000 行代码或11 小时的音频、总结、改写和引用内容。 Comment:google公司有夸大的传统,所以真实效果需要上…

开工大吉!秀一下我们假期の战绩

开工大吉,新年新气象 首先祝大家开工大吉,新年新气象。 祝我的粉丝股东们都能:顺利上岸,升职加薪,日进斗金! 开工就要冲冲冲! 春节假期我是好好放松了,在努力克制自己不要像之前…

《数字图像处理-OpenCV/Python》连载:形态学图像处理

《数字图像处理-OpenCV/Python》连载:形态学图像处理 本书京东 优惠购书链接 https://item.jd.com/14098452.html 本书CSDN 独家连载专栏 https://blog.csdn.net/youcans/category_12418787.html 第 12 章 形态学图像处理 形态学图像处理是基于形状的图像处理&…

java生成pdf

1.pdf预览 2.maven <!--pdf--><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.9</version></dependency><dependency><groupId>com.itextpdf</groupId>…

python-自动化篇-办公-将PDF文件转存为图片

因工作中的某些奇葩要求&#xff0c;需要将PDF文件的每页内容转存成按顺序编号的图片。用第三方软件或者在线转换也可以&#xff0c;但批量操作还是Python方便&#xff0c;所谓搞定办公自动化&#xff0c;Python出山&#xff0c;一统天下&#xff1b;Python出征&#xff0c;寸草…

中小学信息学奥赛CSP-J认证 CCF非专业级别软件能力认证-入门组初赛模拟题第三套(阅读程序题)

CSP-J入门组初赛模拟题第三套 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计40分) 第一题 1 #include<iostream> 2 #include<cstdio> …