位置: 编程技术 - 正文

JavaScript观察者模式(经典)(代码实现观察者模式)

编辑:rootadmin

推荐整理分享JavaScript观察者模式(经典)(代码实现观察者模式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:观察者模式前端,观察者模式 php,代码实现观察者模式,用js实现一个观察者发布订阅模式,观察者模式java实现,观察者模式java实现,观察者模式前端,js的观察者模式,内容如对您有帮助,希望把文章链接给更多的朋友!

Observer模式也叫观察者模式,是由GoF提出的种软件设计模式的一种。Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态。

Observer模式的概念

Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态。Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步。

Observer模式的角色:

Subject(被观察者)被观察的对象。当需要被观察的状态发生变化时,需要通知队列中所有观察者对象。Subject需要维持(添加,删除,通知)一个观察者对象的队列列表。ConcreteSubject被观察者的具体实现。包含一些基本的属性状态及其他操作。Observer(观察者)接口或抽象类。当Subject的状态发生变化时,Observer对象将通过一个callback函数得到通知。ConcreteObserver观察者的具体实现。得到通知后将完成一些具体的业务逻辑处理。

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.

只要订阅了div的click事件. 当点击div的时候, function click就会被触发.

那么到底什么是观察者模式呢. 先看看生活中的观察者模式。

JavaScript观察者模式(经典)(代码实现观察者模式)

好莱坞有句名言. “不要给我打电话, 我会给你打电话”. 这句话就解释了一个观察者模式的来龙去脉。 其中“我”是发布者, “你”是订阅者。

再举个例子,我来公司面试的时候,完事之后每个面试官都会对我说:“请留下你的联系方式, 有消息我们会通知你”。 在这里“我”是订阅者, 面试官是发布者。所以我不用每天或者每小时都去询问面试结果, 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

观察者模式可以很好的实现2个模块之间的解耦。 假如我正在一个团队里开发一个html5游戏. 当游戏开始的时候,需要加载一些图片素材。加载好这些图片之后开始才执行游戏逻辑. 假设这是一个需要多人合作的项目. 我完成了Gamer和Map模块, 而我的同事A写了一个图片加载器loadImage.

loadImage的代码如下

当图片加载好之后, 再渲染地图, 执行游戏逻辑. 嗯, 这个程序运行良好. 突然有一天, 我想起应该给游戏加上声音功能. 我应该让图片加载器添上一行代码.

可是写这个模块的同事A去了外地旅游. 于是我打电话给他, 喂. 你的loadImage函数在哪, 我能不能改一下, 改了之后有没有副作用. 如你所想, 各种不淡定的事发生了. 如果当初我们能这样写呢:

loadImage完成之后, 它根本不关心将来会发生什么, 因为它的工作已经完成了. 接下来它只要发布一个信号.

那么监听了loadImage的'ready'事件的对象都会收到通知. 就像上个面试的例子. 面试官根本不关心面试者们收到面试结果后会去哪吃饭. 他只负责把面试者的简历搜集到一起. 当面试结果出来时照着简历上的电话挨个通知.

说了这么多概念, 来一个具体的实现. 实现过程其实很简单. 面试者把简历扔到一个盒子里, 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.

最后用观察者模式来做一个成人电视台的小应用.

js实现微信分享代码 通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制展示效果如下:

js实现新年倒计时效果 一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的年大家都收获了什么

原生js实现数字字母混合验证码的简单实例 本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考。具体如下:运行效果截图如

标签: 代码实现观察者模式

本文链接地址:https://www.jiuchutong.com/biancheng/387173.html 转载请保留说明!

上一篇:常用的Javascript设计模式小结(常用的javascript对象)

下一篇:js实现微信分享代码(h5实现微信分享)

  • 保单税优识别码图片
  • 什么情况下进项税额需要转出
  • 股份有限公司董事会决议必须经过
  • 资金什么情况下退出企业
  • 公司替个人交的水电费计入哪里了
  • 回单一定要在开户行打吗
  • 营改增的增值税
  • 车购税申报表如何作废重开
  • 丢失增值税发票最新处理办法
  • 行政事业单位资产管理工作总结
  • 公司账户存定期 定期要做利息出纳账吗
  • 如何解决私账流水过大的问题?
  • 老板垫付的费用怎么做凭证
  • 公司成立初期费用入账
  • 一般纳税人出售固定资产税率
  • 企业缴印花税分录
  • 旧设备投资的账务处理
  • 委托加工物资在初级第几章
  • 清包工一般记取哪些费用
  • 成品加工为另一个产品
  • mac系统的桌面
  • 王者荣耀怎么快速获得金币
  • 苹果Mac电脑怎么锁屏
  • 在win7中,为什么打开盘符在新窗口中出现?
  • 股份公司注销流程及费用
  • 电脑找不到ie浏览器
  • 劳务公司开发票,劳务公司怎么转取收入
  • php中cookie的值存储在哪
  • springboot集成camunda+bpmn
  • 总公司拨给分公司款需要交税吗
  • 购入已提完折旧的固定资产怎么入账
  • 固定资产前期购买的后期入账怎么入?
  • 房地产企业土地增值税预缴
  • 溢价对外投资账务处理
  • PHP:pcntl_waitpid()的用法_PCNTL函数
  • 微信小程序获取手机号
  • 主播录屏软件哪个好
  • 个体户文化事业建设费免征
  • php实现简单的登录验证
  • vue页面嵌套iframe vue页面
  • php的基本知识
  • 私募基金成立的规模条件
  • 企业财务报表有附注吗
  • 勾选认证发票的时候找不到这张发票号码怎么办
  • 设计模式适配器模式代码编写
  • 出口汽车配件怎么报关
  • 小规模纳税人免增值税的账务处理
  • 帐务处理程序
  • 应付账款尾款怎么处理
  • 银行汇票与商业汇票的本质不同
  • 以前年度损失如何记账
  • 出口货物进项税额转出的原理
  • 工会经费计提按照应发工资还是实发工资
  • 员工的报销
  • 应收账款多收了退回怎么做账
  • sql server分页查询sql语句
  • mysql教程入门
  • utilman.exe - utilman是什么进程
  • debian修改中文
  • ubuntu安装quagga
  • win7右下角的网络连接不显示
  • linux调整桌面分辨率
  • cocos2dx 3.17
  • 音频焦点是什么
  • pycharm远程调试django
  • Unity3D游戏开发标准教程
  • android:gravity和android:layout_gravity的区别
  • linux系统启动进程命令
  • nodejs基础知识
  • Backbone.js 0.9.2 源码注释中文翻译版
  • Errors running builder 'Android Resource Manager' on Project java.lang.NullPointerException
  • shell嵌套for循环
  • 台湾 游戏论坛
  • nodejs怎么连接mysql
  • jquery插件免费下载
  • python对比go
  • 新领取的发票怎么读入金税盘
  • 国税局内设机构
  • 重庆电子税务局怎么开电子发票
  • 新疆皮山县概况
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设