JS设计模式（观察者模式）

最新推荐文章于 2022-12-12 09:47:03 发布
最新推荐文章于 2022-12-12 09:47:03 发布
阅读量210 收藏
点赞数
分类专栏： JS设计模式 文章标签： js 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44144735/article/details/109310481
版权

观察者模式

介绍

  • 发布 & 订阅（将某件事说好之后只需等待，如：订报纸，订牛奶）
  • 一对多

演示

UML类图

在这里插入图片描述
在这里插入图片描述

场景

  1. 网页事件绑定

在这里插入图片描述

  1. Promise
    在这里插入图片描述
    在这里插入图片描述

  2. jQuery callback
    在这里插入图片描述

  3. nodejs自定义事件
    在这里插入图片描述
    在这里插入图片描述
    在node的stream中用到了自定义事件
    在这里插入图片描述
    readline 中也用到了自定义事件
    在这里插入图片描述

  4. 其他场景
    1、nodejs中：处理http请求；多进程通讯
    在这里插入图片描述

    2、vue 和 react 组件生命周期触发
    在这里插入图片描述

    3、vue watch
    在这里插入图片描述

总结

  • 主题和观察者分离，不是主动触发而是被动监听，两者解耦
  • 符合开放封闭原则
不承认自己菜的菜鸡前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
10-18
观察者模式，也被称为发布订阅模式，是一种设计模式，它允许对象在状态改变时自动通知其他依赖于它的对象。在JavaScript中，这种模式通常通过事件处理来实现，它提供了松散耦合的方式，使得对象之间可以相互通信，而...
设计模式之观察者模式1
08-08
【观察者模式】是软件设计模式中的一种行为模式，它实现了对象之间的一对多依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并被自动更新。这种模式在JavaScript中通常通过回调函数来实现，常...
前端设计模式-观察者模式
潇湘子的博客
12-09 188
观察者模式 监听到对象的某个属性发生改变的时候，自动触发(执行)响应的函数。例如：vm.$watch()，vue的双向数据绑定 // 语法：Object.defineProperty(obj, prop, descriptor) ```javascript // 显式 Object.defineProperty(obj, "key", { enumerable: false, // 是否可枚举 configurable: false, // 是否可删除属性 writable: false, //
前端设计模式之观察者模式
weixin_44051815的博客
01-19 719
解决的问题： 观察者模式： 主要是用来解决一（被观察者）对多（观察者）的关系。 如教室中，一个老师对多个学生，老师作为被观察者（Subject），而学生作为观察者（Observer），当老师发出指令时，学生就需要做出响应。 定义： 对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 主要结构： 一个被观察者，内部需要维护一个与所有观察它的对象数组； 多个观察者，内部必须的一个 update 函数，需要在被观察者状态更新后，作出响应。 实现 // 学生类，
js设计模式之观察者模式
Apeng_wjp的博客
10-24 2620
什么是观察者模式？ 观察者模式是一对多的一种依赖关系，让多个观察者对象同时监听某一个主体对象。这个主体发生状态的时候。会通知所有的观察者对象，自动更新自己的状态。 而发布订阅者模式，则不同。发布订阅者模式是一种多对多的依赖关系。通过事件的绑定，通知给需要接受的订阅者，让订阅者更新自己的状态。 两种之间的区别在于观察者模式知道自己所派发的目标对象是谁。而发布订阅者模式观察者和订阅者之间不清楚对方是谁。是由中间层进行交互完成派发任务。 写一个通过输入对应的...
设计模式之观察者模式（前端）
最新发布
m0_55258023的博客
12-12 430
设计模式之观察者模式（前端）
前端设计模式之观察者模式（发布订阅）
qq_44812835的博客
08-13 347
观察者模式 观察者模式是基于发布订阅模式的，所以在介绍观察者模式前，我们先来看看发布订阅模式吧 发布订阅模式 发布订阅模式 主要有两个方法 发布-- emit 和 订阅 --on 订阅的函数不会立即执行 只有当触发emit 的时候才会依次执行 以生活中的例子来说—比如在购物时，遇到库存不足的商品，点击有货通知，等有货了就会执行通知发送短信，下面我们就这个例子模拟实现一下，感受一下用法 let event = { _arr:[], //用来存储订阅 on(fn){
学习JavaScript设计模式之观察者模式
10-22
主要为大家介绍了JavaScript设计模式中的观察者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下
JavaScript设计模式之观察者模式实例详解
10-17
主要介绍了JavaScript设计模式之观察者模式,结合实例形式详细分析了javascript观察者模式的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
前端常用的设计模式——观察者模式
云雨之石的博客
08-25 532
前端常见的设计模式之观察者模式
javascript观察者模式
男孩物理班的博客
08-17 988
javascript观察者模式观察者模式:当一个对象的状态发生改变，所有依赖于它的对象都将得到通知通用发布订阅var event = { clientList:[], listen: function (key, fn) { if(!this.clientList[key]){ this.clientList[key] = [];
js实现观察者模式
技术之路
06-20 493
var publisher = { subscribers: { any: [] // event type: subscribers }, subscribe: function (fn, type) { type = type || 'any'; if (typeof this.subscribers[type] === "undefined") { this.subs
js设计模式-观察者模式
happy任的博客
11-30 453
一、前言     发布-订阅模式，即观察者模式。在JavaScript中，使用自定义事件及回调函数的方式来实现这种模式。 二、正文     下面代码为1个简单的观察者模式的事件发布-订阅机制 class Event{ constructor(){ //初始化事件缓存 this.cache...
JS设计模式之观察者模式
爪蛙没有爪的博客
02-24 405
概述 观察者模式(Observer)，又叫做发布-订阅(Publish/Subscribe)模式，定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。主题对象状态发生改变时，会通知所有的观察者对象，使它们能自动更新自己。当不需要监听某一个特定的主题对象时，可以取消订阅，即从观察者列表中删除。为此可以确定如下的类。 Subject(目标) 用于维护一系列的观察者，方便添加或删除观察...
JavaScript设计模式之观察者模式
EmotionComputer
05-07 749
观察者模式是前端应用最多的一种设计模式 介绍： 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。 发布&订阅 UML类图： 观察者模式的实现思路：把多个观察者放入主题中，由主题来控制消息的变化进行消息的分发。 代码实现： // 主题，接收状态变化，触发每个观察者 clas......
前端性能优化（CSS）
qq_44144735的博客
10-28 169
前端性能优化（CSS） 加载性能： （1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。 （2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行的效率更高。 （3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。 选择器性能： （1）关键选择器（key selector）。选择器的最后面的部分为关
设计模式--观察者模式--UML
hailushijie的专栏
11-25 4369
观察者模式类图：
练习时长一年半，算法蒟蒻的成长记录
骑者，且赶路
12-04 1547
练习时长一年半，算法蒟蒻的成长记录 写在文章前： 这篇博客主要是记录一下这一年半来升级打怪的记录，一直想做这件事情，但还是太懒，由于学习环境的变动给我带来了一段较长的空闲时间，每天就是啃入门经典、刷算法题，持续了两周，下午想换点心情，于是写下了这篇博客。 开始征程 我是大学毕业前夕才开始接触算法的，那时候刚考完研，在做毕设阶段准备找一下暑假实习工作，开始跟基友一起刷算法题准备抓住春招的尾巴在暑假找点事干，于是战斗场地从考研自习室搬进了图书馆，《高数十八讲》也换成了《算法与数据结构》。 其实大二的时候也啃过一
蒟蒻
01232012的博客
10-16 355
1、求组合数的方法：卢卡斯定理  ... 2、树的hash 3、欧拉......路 4、OJ 图论题 5、数论 6、同余最短路 7、树的重心
前端开发中的设计模式：外观模式与观察者模式解析
"前端面试相关-前端常见设计模式，包括外观模式和观察者模式的介绍与应用实例。" 在前端开发中，设计模式是提升代码质量和可维护性的关键。前端常见设计模式帮助开发者应对各种复杂场景，使得代码更加模块化、易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值