JavaScript 设计模式之观察者模式

观察者模式

观察者模式又被称为发布-订阅模式,使用一个对象来收集订阅者,在发布时遍历所有订阅者,然后将信息传递给订阅者,可以这样来实现一个简单的模式

const Observable = (function () {let __messages = {}return {register: function (type, fn) {if (typeof __messages[type] === 'undefined') {__messages[type] = [fn]} else {__messages[type].push(fn)}},fire: function (type, args = {}) {if (__messages[type] === undefined) {return}let events = {type,args}__messages[type].forEach(fn => {fn.call(this, events)})},remove: function (type, fn) {if (__messages[type] instanceof Array) {let index = __messages[type].indexOf(fn)if (index >= 0) {__messages[type].splice(index, 1)}}}}
})()const fn = function (e) {console.log(e.type,e.args.msg)
}
Observable.register('test', fn)
Observable.remove('test',fn)
Observable.register('test', function (e) {console.log(e.type,e.args.msg,2122)
})Observable.fire('test', { msg: 'hello world' }) // test hello world 2122

案例

假使有一个学生跟老师的互动


// 学生类
const Student = function (result) {this.result = resultthis.say =  ()=> {console.log(this.result)}
}// 学生回答问题
Student.prototype.answer = function (que) {// 注册事件Observable.register(que, this.say)
}Student.prototype.sleep = function (que) {console.log(this.result + ' ' + que + '被注销')Observable.remove(que, this.say)
}// 老师类
const Teacher = function () {
}
Teacher.prototype.ask = function (que) {console.log('老师提问:' + que)Observable.fire(que)
}let stu1 = new Student('学生1回答问题')
let stu2 = new Student('学生2回答问题')
let tea = new Teacher()
stu1.answer('1+1等于多少')
stu1.answer('2+2等于多少')
stu2.answer('1+1等于多少')
stu2.answer('2+2等于多少')
stu2.sleep('1+1等于多少')
tea.ask('1+1等于多少')
tea.ask('2+2等于多少')

输出

/*
学生2回答问题 1+1等于多少被注销
老师提问:1+1等于多少
学生1回答问题
老师提问:2+2等于多少
学生1回答问题
学生2回答问题*/

结论

通过观察者模式可以团队开发中模块间通讯问题

解耦两个相互依赖的对象,使其侧重依赖于观察者的消息机制。这样对于任意一个订阅者对象来说,其他订阅者对象的改变不会影响到自身。对于每一个订阅者来说,其自与既可以是消息的发出者也可以是消息的执行者,这都依赖于调用观察者对象的三种方法(订消息,注销消息,发布消息)中的哪一种

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

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

相关文章

win系统下安装mysql5.7并配置环境变量、设置root用户和服务启动的详细操作教程

本篇文章主要讲解:win系统下安装mysql5.7并配置环境变量、设置root用户和服务启动的详细操作教程 日期:2024年2月22日 作者:任聪聪 一、mysql5.7版本的下载 官方下载地址:https://downloads.mysql.com/archives/community/ 步骤…

服务器生信环境配置脚本

服务器生信环境配置脚本的重要性在于它为生物信息学的数据分析提供了一个统一和标准化的计算环境。通过自动化的配置脚本,可以快速地在服务器上部署和设置生物信息学的软件和依赖库,确保分析的可重复性和准确性。这样,生物信息学家和研究人员…

【鸿蒙 HarmonyOS 4.0】状态管理

一、介绍 资料来自官网:文档中心 在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状…

Stable Diffusion 模型的概念、类型、下载、安装、使用

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 大家好,我是水滴~~ 我们在《Stable Diffusion WebUI 界面介绍》 时,第一个就讲到了 Stable Diffusion 模型,那么这个模型是什么?该从哪儿下载&…

多输入分类|GWO-CNN-LSTM|灰狼算法优化的卷积-长短期神经网络分类预测(Matlab)

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 灰狼优化算法: 卷积神经网络-长短期记忆网络: 四、完整程序下载: 一、程序及算法内容…

【EI会议征稿通知】第五届人工智能与机电自动化国际学术会议(AIEA 2024)

第五届人工智能与机电自动化国际学术会议(AIEA 2024) 2024 5th International Conference on Artificial Intelligence and Electromechanical Automation 优秀评选已启动,设置优秀论文、优秀报告及优秀海报多个奖项,丰厚奖金等…

【Java程序设计】【C00280】基于Springboot的校友社交系统(有论文)

基于Springboot的校友社交系统(有论文) 项目简介项目简介项目获取开发环境项目技术运行截图 项目简介 项目简介 这是一个基于Springboot的校友社交系统 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块:在系统首页…

数据结构与算法——排序算法

目录 文章目录 前言 一.排序的基本概念 1.什么是就地排序 2.什么是内部排序和外部排序 3.什么是稳定排序 4.判定一个排序算法的是稳定的 二.插入排序算法 1.直接插入排序 1.1基本思想 1.2复杂度 1.3稳定性 1.4代码演示 2.折半插入排序 2.1基本思想 2.2性能 3.…

vue实现递归组件

父组件&#xff1a; <Tree :data"data"></Tree> import Tree from "/components/Tree.vue"; const data reactive([{name: "1",checked: true,children: [{name: "1-1",checked: false,},],},&#xff09; 子组件&#…

若依logback日志配置采坑

问题描述 若依使用的appender过滤器是level&#xff0c;如下述代码&#xff0c;这种过滤器只能导出级别为INFO的日志&#xff0c;warn和error都导出不出来。查询不是很方便。 <!-- 系统日志输出 --><appender name"file_info" class"ch.qos.logback.…

JAVA IDEA 项目打包为 jar 包详解

前言 如下简单 maven 项目&#xff0c;现在 maven 项目比较流行&#xff0c;你还没用过就OUT了。需要打包jar 先设置&#xff1a;点击 File > Project Structure > Artifacts > 点击加号 > 选择JAR > 选择From modules with dependencies 一、将所有依赖和模…

VirtualBox+Vagrant快速搭建Centos7

目录 安装VirtualBox&#xff1a; 安装Vagrant&#xff1a; 创建Vagrant项目目录&#xff1a; 初始化Vagrant配置文件&#xff1a; 本地Vagrantfile中的镜像名称&#xff1a; 启动虚拟机&#xff1a; SSH登录虚拟机&#xff1a; 备注&#xff1a;安装镜像的另一种方式是…

springmvc+ssm+springboot房屋中介服务平台的设计与实现 i174z

本论文拟采用计算机技术设计并开发的房屋中介服务平台&#xff0c;主要是为用户提供服务。使得用户可以在系统上查看房屋出租、房屋出售、房屋求购、房屋求租&#xff0c;管理员对信息进行统一管理&#xff0c;与此同时可以筛选出符合的信息&#xff0c;给笔者提供更符合实际的…

Autodesk CAD如何建立图层方框?

在AutoCAD中&#xff0c;要建立图层方框&#xff08;Layer Box&#xff09;可以通过以下步骤实现&#xff1a; 打开图层管理器&#xff1a; 在 AutoCAD 中&#xff0c;您可以通过输入“LA”命令或在菜单栏中选择“格式” > “图层管理器”来打开图层管理器对话框。 创建新图…

记阿里云mysql丢表丢数据的实践记录

第一时间挂工单&#xff0c;联系工程师指引&#xff0c;现在回过来想&#xff0c;第一时间要确认发生时间。 1.通过性能视图&#xff08;马后炮的总结&#xff0c;实际凭记忆恢复了三四次才找到数据&#xff09; 2.先恢复数据 通过Navicat工具&#xff0c;结构同步&#xff0…

解决IntelliJ IDEA 2023版本创建Spring项目时Java只能选择17或21的问题

问题描述&#xff1a; 当使用IntelliJ IDEA2023版本中Spring Initializr新建Spring项目时&#xff0c;即使JDK配置项为1.8&#xff0c;Java配置项仍然只能选17或21. 在JDK为1.8版本情况下&#xff0c;Java选择17或21&#xff0c;点击NEXT按钮&#xff0c;则会弹窗提示SDK不支持…

Sora: 开启AI视频创作的新纪元

随着人工智能技术的飞速进步&#xff0c;AI视频模型已迅速成为科技界的新焦点。在这股创新浪潮中&#xff0c;OpenAI推出的Sora&#xff0c;不仅以其前所未有的性能吸引了全球的目光&#xff0c;更以前瞻性的技术定义了AI视频领域的未来。Sora不仅是一个里程碑式的产品&#xf…

java面试题之SpringMVC篇

Spring MVC的工作原理 Spring MVC的工作原理如下&#xff1a; DispatcherServlet 接收用户的请求找到用于处理request的 handler 和 Interceptors&#xff0c;构造成 HandlerExecutionChain 执行链找到 handler 相对应的 HandlerAdapter执行所有注册拦截器的preHandler方法调…

音视频面试题集锦

下面是音视频开发面试题精选&#xff1a; 1、谈谈 iOS 音视频采集相关接口和数据结构的设计&#xff1f;2、如何降低处理音视频链路中的内存峰值&#xff1f;3、OpenGL 如何实现二分屏效果&#xff1f;4、使用 OpenGL 绘制时对于二维坐标需要注意什么&#xff1f; 1、谈谈 iO…

Vue中如何使用dayjs

Day.js中文网Day.js是一个极简的JavaScript库&#xff0c;可以为现代浏览器解析、验证、操作和显示日期和时间。https://dayjs.fenxianglu.cn/ 单位不区别大小写&#xff0c;支持复数和缩写形式 单位缩写描述 date D日期 [1,31]dayd星期 [0,6]&#xff08;星期日0&#xff0c…