js设计模式:观察者模式

news2024/11/14 20:21:08

作用:

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

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

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做出自己后续想做的事
        //其实核心就是将观察者中定义的函数保存到通知者身上,在发通知的时候调用这个函数

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

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

相关文章

Web3 基金会推出去中心化之声计划:投入高额 DOT 和 KSM ,助力去中心化治理

作者:Web3 Foundation Team 编译:OneBlock 原文:https://medium.com/web3foundation/decentralized-voices-program-93623c27ae43 Web3 基金会为 Polkadot 和 Kusama 创建了去中心化之声计划(Decentralized Voices Program&…

【Java多线程】分析线程加锁导致的死锁问题以及解决方案

目录 1、线程加锁 2、死锁问题的三种经典场景 2.1、一个线程一把锁 2.2、两个线程两把锁 2.3、N个线程M把锁(哲学家就餐问题) 3、解决死锁问题 1、线程加锁 其中 locker 可以是任意对象,进入 synchronized 修饰的代码块, 相当于加锁&…

亚信安慧AntDB数据库为实时流数据构筑坚实防线

在数字化浪潮中,企业对实时流数据处理的依赖日益增强。在此背景下,AntDB数据库应运而生,提供一种创新性解决方案,专注于解决实时流数据处理中的数据容灾和一致性问题。AntDB的设计理念是确保在处理高吞吐量的流数据时,…

web前端安全性——CSRF跨站请求伪造

承接上篇讲述的XSS跨站脚本攻击 跨站请求伪造(CSRF) 1、概念 CSRF(Cross-site request forgery) 跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注…

【Git】:标签功能

标签功能 一.标签操作二.推送远程标签 标签 tag ,可以简单的理解为是对某次commit的⼀个标识,相当于起了⼀个别名。例如,在项⽬发布某个版本的时候,针对最后⼀次commit起⼀个v1.0这样的标签来标识⾥程碑的意义。这有什么⽤呢&…

代码随想录算法训练营第21天—回溯算法01 | ● 理论基础 ● *77. 组合

理论基础 回溯是一种纯暴力搜索的方法,它和递归相辅相成,通常是执行完递归之后紧接着执行回溯相较于以往使用的for循环暴力搜索,回溯能解决更为复杂的问题,如以下的应用场景应用场景 组合问题 如一个集合{1,2,3,4},找…

【讨论】Web端测试和App端测试的不同,如何说得更有新意?

Web 端测试和 App 端测试是针对不同平台的上的应用进行测试,Web应用和App端的应用实现方式不同,测试时的侧重点也不一样。 Web端应用和App端应用的区别: 平台兼容性 安装方式 功能和性能 用户体验 更新和维护 测试侧重点有何不同 平台…

springboot208基于springboot物流管理系统

基于spring boot物流管理系统设计与实现 摘 要 社会发展日新月异,用计算机应用实现数据管理功能已经算是很完善的了,但是随着移动互联网的到来,处理信息不再受制于地理位置的限制,处理信息及时高效,备受人们的喜爱。…

想高薪就业鸿蒙HarmonyOS 开发岗位,到底该学习些啥?

鸿蒙是什么? 经过十多年的发展,传统移动互联网的增长红利已渐见顶。万物互联时代正在开启,应用的设备底座将从几十亿手机扩展到数百亿 IoT 设备。GSMA 预测到 2025 年,全球物联网终端连接数量将达 246 亿个,其中消费物…

redis源码阶段性完成

这个真的是耗费我很长的时间 一个是太忙了,一个是内容确实太多了 断断续续的,终于基本完成了,但也只限于基本哈 在这期间也阅读了相关书籍 其实书籍讲的都很好,讲了大体思路 但是,到具体实现细节就复杂的多了 因…

【2024 R1 版本更新】Ansys Speos

上期我们讲到了Ansys系列的三大光学软件于2024年的更新,在小宇快马加鞭的信息收集下,更加具体的内容也整理完毕了,一起来看看Ansys Speos又有哪些具体的功能更新吧~

智能搬运机器人|海格里斯将如何持续推进工业和物流的智能化升级与发展?

存取、搬运、分拣是物流行业中的通用功能,但具体到每个行业又十分不同,例如:新能源电池领域,它所搬运的东西是电池,50KG~200KG;快递行业领域,所要处理的物料是那种扁平件和信封等等,…

【计算机网络】网络基础知识

一. 网络发展史 独立模式(单机模式):计算机之间相互独立,各自拥有独立的数据。 网络互连:将多台计算机连接在一起,完成数据共享。 随着时代的发展,越来越需要计算机之间进行互相通信&#…

人工智能_CPU安装运行ChatGLM大模型_ChatGlm-6B_启动命令行对话_安装API调用接口_005---人工智能工作笔记0100

然后我们再进入 /data/module/ChatGLM-6B-main文件夹 然后我们去启动,命令行工具 python3 cli_demo.py 可以看到也是可以用了. 正常可以用了. 然后主要来看,如何使用api来调用呢,这样才可以,做自己的界面 可以看到就非常简单了只需要: 走到 /data/module/

高盛:日本这轮通胀是否可持续,关键看房租

租金在日本CPI中的权重高达20%,高盛预计短期内租金将继续拖累通胀至1.7%或以下,长期有望温和上行,使通胀稳在2%的水平。 日本正在转向“去通缩”,房租能否支撑通胀态势? 在日股今年一路高歌、有望“收复失地”时&…

如何在OpenWRT安装内网穿透工具实现远程访问本地搭建的web网站界面

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器,目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器,并且和…

JAVA高并发——单例模式和不变模式

文章目录 1、探讨单例模式2、不变模式 由于并行程序设计比串行程序设计复杂得多,因此我强烈建议大家了解一些常见的设计方法。就好像练习武术,一招一式都是要经过学习的。如果自己胡乱打,效果不见得好。前人会总结一些武术套路,对…

嵌入式学习-qt-Day2

嵌入式学习-qt-Day2 一、思维导图 二、作业 1.使用手动连接,将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中,在自定义的槽函数中调用关闭函数 2.将登录按钮使用qt5版本的连接到自定义的槽函数中,在槽函数中判断ui界面上输入的账…

关于windows上Python3.12.0安装FastAPI入坑指南

#工作笔记# 先说下起因: 年前兄弟说有个webapi的需求看怎么解决,抽空想到Python比较容易上手,而且FastAPI性能号称拥有可与NodeJS和Go并肩的极高性能。 FastAPI官网注明使用 Python 3.8+ ,而我本机又有从Py3.6到Py3.12的每个大版本,见下图 接着入坑开始了。。。 #问题描述…

webpack的使用(上)

前言:在项目中安装和配置webpack、配置打包的入口与出口、配置webpack的自动打包功能、配置 html-webpack-plugin 生成预览页面、配置自动打包相关的参数等相关内容 一、了解webpack 1、概念 webpack 是一个流行的前端项目构建工具(打包工具),可以解决…