JavaScript 观察者模式 ★

最新推荐文章于 2025-07-01 10:12:40 发布
原创 最新推荐文章于 2025-07-01 10:12:40 发布 · 167 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了观察者模式与发布订阅模式的区别，包括它们的通信方式、耦合程度、同步与异步特性以及适用场景。观察者模式中，Subject维护观察者列表并直接通知变化；而发布订阅模式通过消息代理实现组件间松散耦合。

在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。

在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。

观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）。

观察者模式需要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

 

 

 

 

传送门

JavaScript 观察者设计模式
小牛itbull的博客
11-10 929
观察者模式:观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。
JavaScript观察者模式(经典)
10-23
在JavaScript这种事件驱动的语言中，观察者模式有着天然的应用场景，比如DOM事件的处理、Ajax请求的响应等。 观察者模式主要包含以下几种角色： 1. Subject（被观察者）：它持有注册的观察者的列表，并负责在状态...
设计模式 : 观察者模式
李俊标的博客
04-04 1543
观察者模式又叫发布-订阅(publish/subscribe)模式.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己.观察者模式的特点:       观察者模式的动机是讲一个系统分割成一系列相互协作的类有一个很不好的副作用,那就是需要维护相关对象间的一致性.我们不希望为了维持一致性而使各类紧密耦...
JavaScript 观察者模式：前端开发必备技能
领码SPARK - 以无代码之星火，燎原数字之未来！
01-05 2176
观察者模式（Observer Pattern），也称为发布-订阅模式（Publish/Subscribe），定义了一种一对多的依赖关系。当一个对象（被观察对象或主题 Subject）的状态发生变化时，所有依赖于它的对象（观察者 Observer）都会得到通知，并自动进行相应的更新。想象一下，你订阅了某个公众号，这个公众号就是被观察对象，而每一个关注它的读者就是观察者。当公众号发布新文章（状态改变）时，所有订阅的读者都会收到推送通知，这就是观察者模式的典型体现。
深入理解观察者模式及其JavaScript实现
最新发布
chaosweet的博客
07-01 779
Hi，我是布兰妮甜！观察者模式是一种行为设计模式，它定义了对象之间的一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这种模式在事件处理系统、数据绑定和发布-订阅系统中广泛应用。
【JavaScript设计模式】观察者模式
前端学习博客
10-15 2383
这篇文章并不是笔者原创，而是在学习设计模式中对比较好的文章的提炼与总结，作为笔记便于自己复习。观察者模式有一个“别名”，叫（之所以别名加了引号，是因为两者之间存在着细微的差异），这个别名非常形象地诠释了观察者模式里两个核心的角色要素——“发布者”与“订阅者”。周一刚上班，前端开发李雷就被产品经理韩梅梅拉进了一个钉钉群——“员工管理系统需求第99次变更群”。这个群里不仅有李雷，还有后端开发 A，测试同学 B。三位技术同学看到这简单直白的群名便立刻做好了接受变更的准备、打算撸起袖子开始干了。此时韩梅梅却说：“别
JavaScript中的观察者模式
热爱前端的大宝同学。
03-29 1440
主要总结了观察者模式的核心概念、实现方式、应用场景及注意事项等内容。
前端开发设计模式——观察者模式
jxnd123456的博客
10-29 2621
观察者模式是一种软件设计模式，它定义了对象之间的一种一对多的依赖关系。当一个对象（被观察对象，也称为主题或可观察对象）的状态发生改变时，所有依赖于它的对象（观察者）都会得到通知并自动更新。
JavaScript设计模式——观察者模式
量子前端的博客
07-07 2682
JavaScript发布订阅模式（观察者模式）
观察者模式（行为模式）
黑塞的博客
04-14 988
观察者模式（Observer Pattern）的使用场景主要围绕，当一个对象（被观察者）的状态变化需要自动通知其他多个对象（观察者）时，该模式能有效解耦代码。
JS设计模式之观察者模式
MRDONG1的博客
05-04 887
根据代码我们可以看到，首先创建了一个观察目标主体对象（Subject），并且创建了两个观察者，分别是observe1和observer2，并且把观察者添加到我们的主体对象中，此时去获取ul下的所有li节点，并循环，当我们点击其中一个节点（例如首页）的时候就会触发主体对象的通知更新方法，然后触发观察者类中的update方法，并且通过传入的data，也就是我们li标签里的内容，赋值给这两个观察者元素文本，就可以让数据层发生改变同时重新渲染了视图层。一旦观察目标的状态发生改变，所有的观察者都将得到通知。
Javascript 模式实例 观察者模式
12-09
有兴趣的朋友可以先了解一下一些牛人的，比如李会军大哥设计模式篇中观察者的那一节 http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html说说我自己对这模式的理解，其思想核心是：每个被...
JavaScript设计模式之观察者模式（发布者-订阅者模式）
10-25
在JavaScript中，观察者模式也被称作发布-订阅模式（Publish-Subscribe Pattern），是一种行为设计模式，它允许对象之间通过事件来通信。 观察者模式的核心概念包括观察者（Observer）和目标（Subject）。观察者是...
JavaScript设计模式之观察者模式与发布订阅模式详解
11-21
本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式。分享给大家供大家参考，具体如下： 学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻...
作为一个前端新人，还要不要学 jQuery
热门推荐
Mark
03-22 1万+
目录 1、为什么还要学jQuery 2、jQuery 的封装思想 2、jQuery 如何获取元素 3、jQuery 的链式操作 4、jQuery 如何创建元素 5、jQuery 如何移动元素 what ？Are you kidding me？老弟，现在是 2020 年了，你还在学 jQuery？别是个傻子吧？ 确实，如今想从事前端行业的新人基本上没有学 jQuery 的了，大家基...
JavaScript 发布—订阅者模式 ★
Mark
12-12 373
发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，一般用事件模型来代替传统的发布—订阅者模式。 ...
对 JavaScript 设计模式的误解 ★
Mark
11-15 189
虽然 JavaScript 是一门完全面向对象的语言，但在很长一段时间内，JavaScript 在人们的印象中只是用来验证表单，或者完成一些简单动画特效的脚本语言。在 JavaScript 语言中运用设计模式难免显得小题大做。但是目前 JavaScript 已成为最流行的语言之一，在许多大型 Web 项目中，JavaScript 代码的数量已经非常多了。我们绝对有必要把一些优秀的设计模式借鉴到 J...
JavaScript 设计工厂模式 ★
Mark
11-14 185
工厂模式是一种创建类型的模式，目的是为了简化创建对象的流程，它把对象实例化简单封装在一个函数中，然后通过函数调用，实现快速、批量生产对象。 下面例子创建对象 car，然后给它设置几个属性：它的颜色是蓝色，有2个门，8个轮子。最后一个属性实际上是指向函数的指针，意味着该属性是个方法。执行这段代码后，就可以使用对象 car。 Function createCar(color,doors,whee...
JavaScript观察者模式详解与实例
"JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解，通过概念解析、原理阐述和实际示例展示了如何在JavaScript中实现和运用观察者模式。" 观察者模式是一种行为设计模式，它允许你定义一个订阅机制，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值