位置: 编程技术 - 正文
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就会被触发.
那么到底什么是观察者模式呢. 先看看生活中的观察者模式。
好莱坞有句名言. “不要给我打电话， 我会给你打电话”. 这句话就解释了一个观察者模式的来龙去脉。 其中“我”是发布者， “你”是订阅者。
再举个例子，我来公司面试的时候，完事之后每个面试官都会对我说：“请留下你的联系方式， 有消息我们会通知你”。 在这里“我”是订阅者， 面试官是发布者。所以我不用每天或者每小时都去询问面试结果， 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。
观察者模式可以很好的实现2个模块之间的解耦。 假如我正在一个团队里开发一个html5游戏. 当游戏开始的时候，需要加载一些图片素材。加载好这些图片之后开始才执行游戏逻辑. 假设这是一个需要多人合作的项目. 我完成了Gamer和Map模块, 而我的同事A写了一个图片加载器loadImage.
loadImage的代码如下
当图片加载好之后, 再渲染地图, 执行游戏逻辑. 嗯, 这个程序运行良好. 突然有一天, 我想起应该给游戏加上声音功能. 我应该让图片加载器添上一行代码.
可是写这个模块的同事A去了外地旅游. 于是我打电话给他, 喂. 你的loadImage函数在哪, 我能不能改一下, 改了之后有没有副作用. 如你所想, 各种不淡定的事发生了. 如果当初我们能这样写呢:
loadImage完成之后, 它根本不关心将来会发生什么, 因为它的工作已经完成了. 接下来它只要发布一个信号.
那么监听了loadImage的'ready'事件的对象都会收到通知. 就像上个面试的例子. 面试官根本不关心面试者们收到面试结果后会去哪吃饭. 他只负责把面试者的简历搜集到一起. 当面试结果出来时照着简历上的电话挨个通知.
说了这么多概念, 来一个具体的实现. 实现过程其实很简单. 面试者把简历扔到一个盒子里， 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.
最后用观察者模式来做一个成人电视台的小应用.
js实现微信分享代码 通常自己做的一个页面想通过微信像朋友分享时，展示的标题和描述都是不是自己想要的，自己查了一些资料，原来是通过js来进行控制展示效果如下：
js实现新年倒计时效果 一年又一年，新年又快到了，最近大家又开始抢回家过年的车票了，我们就来算一算离新年还有多少天，总结总结在即将过去的年大家都收获了什么
原生js实现数字字母混合验证码的简单实例 本文实例讲述了原生js实现数字字母混合验证码的全部代码，重点是注释很详细，便于大家理解，特分享给大家供大家参考。具体如下：运行效果截图如
标签: 代码实现观察者模式
本文链接地址:https://www.jiuchutong.com/biancheng/387173.html 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706497689.jpg)
![[置顶]
快速上手Unity中最好的补间动画插件DFTween([置顶] 快来貌相则不达很好skmzx5)](/img.jpg)