当前位置: 首页 > news >正文

前端设计模式之【代理模式】

文章目录

  • 前言
  • 介绍
  • 例子
  • 场景
  • 优缺点
  • 标题五
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端设计模式
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

介绍

是为一个对象提供一个代用品或占位符,以便控制对它的访问,充当客户端和目标对象之间的中间层,控制对目标对象的访问。前端代理可以用于各种不同的场景,包括安全控制、性能优化和简化复杂性等方面。

使用前端代理模式时,客户端并不直接与目标对象进行交互,而是通过代理来间接访问目标对象。代理可以对客户端的请求进行过滤、验证和一些额外的操作,然后再将请求传递给目标对象。这种方式可以有效地保护目标对象,同时也可以在访问前后实现一些附加的操作,如权限验证、缓存、延迟加载等。

例子

假设当A 在心情好的时候收到花,小明表白成功的几率有60%,而当A 在心情差的时候收到花,小明表白的成功率无限趋近于0。小明跟A 刚刚认识两天,还无法辨别A 什么时候心情好。如果不合时宜地把花送给A,花被直接扔掉的可能性很大,这束花可是小明吃了7 天泡面换来的。但是A 的朋友B 却很了解A,所以小明只管把花交给B,B 会监听A 的心情变化,然后选择A 心情好的时候把花转交给A,代码如下:

let Flower = function() {}
let xiaoming = {sendFlower: function(target) {let flower = new Flower()target.receiveFlower(flower)}
}
let B = {receiveFlower: function(flower) {A.listenGoodMood(function() {A.receiveFlower(flower)})}
}
let A = {receiveFlower: function(flower) {console.log('收到花'+ flower)},listenGoodMood: function(fn) {setTimeout(function() {fn()}, 1000)}
}
xiaoming.sendFlower(B)

场景

HTML元素事件代理

<ul id="ul"><li>1</li><li>2</li><li>3</li>
</ul>
<script>let ul = document.querySelector('#ul');ul.addEventListener('click', event => {console.log(event.target);});
</script>

优缺点

优点

  • 代理模式能将代理对象与被调用对象分离,降低了系统的耦合度。代理模式在客户端和目标对象之间起到一个中介作用,这样可以起到保护目标对象的作用
  • 代理对象可以扩展目标对象的功能;通过修改代理对象就可以了,符合开闭原则;

缺点

处理请求速度可能有差别,非直接访问存在开销

标题五

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关文章:

前端设计模式之【代理模式】

文章目录 前言介绍例子场景优缺点标题五后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端设计模式 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&…...

Canal+Kafka实现MySQL与Redis数据同步(二)

CanalKafka实现MySQL与Redis数据同步&#xff08;二&#xff09; 创建MQ消费者进行同步 在application.yml配置文件加上kafka的配置信息&#xff1a; spring:kafka:# Kafka服务地址bootstrap-servers: 127.0.0.1:9092consumer:# 指定一个默认的组名group-id: consumer-group…...

NOIP2023模拟19联测40 诡异键盘

题目大意 有一个键盘&#xff0c;上面有 n 1 n1 n1个按键&#xff0c;按下按键 1 ≤ i ≤ n 1\leq i\leq n 1≤i≤n会打印出字符串 S i S_i Si​&#xff0c;按下按键 n 1 n1 n1会删掉结尾的 K K K个字符&#xff0c;如果不足 K K K个字符则全部删完&#xff0c;问打印出 S …...

算法设计与分析 | 众数问题(c语言)

题目 所谓众数&#xff0c;就是对于给定的含有N个元素的多重集合&#xff0c;每个元素在S中出现次数最多的成为该元素的重数&#xff0c; 多重集合S重的重数最大的元素成为众数。例如&#xff1a;S{1,2,2,2,3,5}&#xff0c;则多重集S的众数是2&#xff0c;其重数为3。 现在你…...

sql server外键设置

SQL Server外键设置 简介 在关系型数据库中&#xff0c;外键是一种约束&#xff0c;用于确保数据的完整性和一致性。外键约束定义了一个表中的列与另一个表中的列之间的关系&#xff0c;它可以用来保证数据的一致性、防止数据的破坏和数据冗余。在SQL Server中&#xff0c;我们…...

R语言实现多变量孟德尔随机化分析(1)

多变量孟德尔随机化分析调整了潜在混杂因素的影响。 1、调整哪些因素&#xff1f;参考以往文献。可以分别调整&#xff0c;也可以一起调整。 2、解决了什么问题&#xff1f;某个暴露相关的SNP&#xff0c;往往与某个或者某几个混杂因素相关。可以控制混杂偏倚。 3、如何解释…...

搭建 AI 图像生成器 (SAAS) php laravel

今天来搭一套&#xff0c;AI 图像生成器 是基于 Openai DALLE 2 和 Openai DALLE 3 以及 Stability AI 和稳定扩散 API 构建的脚本&#xff0c;为用户提供了使用简单的提示和大小生成独特自定义图像的可能性。在这个平台上&#xff0c;创意得以快速、高效地实现&#xff0c;借助…...

Maven引用本地jar包

先上命令: ​ mvn install:install-file -Dfile..\.m2\repository\jl1.0.1.jar -DgroupId"com.liz.local" -DartifactId"jl" -Dversion"1.0.1" -Dpackagingjar​ 参数注释: -Dfile: jar 包路径&#xff08;建议放在 meven 的 repository&…...

一起学docker系列之五docker的常用命令--操作容器的命令

目录 前言1 启动容器2 查看容器3 退出容器4 启动已经停止的容器5 重启容器6 停止容器7 删除已经停止的容器8 启动容器说明和举例9 查看容器日志10 查看容器内运行的进程11 查看容器内部细节12 进入正在运行的容器并进行交互13 导入和导出容器结语 前言 当涉及到容器化技术&…...

WPF打开对话框选择文件、选择文件夹

在WPF中实现文件的打开和选择&#xff0c;可以通过使用Microsoft.Win32.OpenFileDialog类来完成。这是一个通用的对话框组件&#xff0c;允许用户在本地文件系统中浏览和选择文件。这个组件属于WPF的一部分&#xff0c;因此不需要引用额外的库。 以下是一个如何使用OpenFileDi…...

nginx学习(3)

Nginx 负载均衡 实战案例 实现效果 浏览器地址栏输入地址 http://172.31.0.99/oa/a.html&#xff0c;负载均衡效果&#xff0c;平均 8083 和 8084 端口中 一、配置 1、先创建2个文件夹&#xff0c;并将apache-tomcat-8.5.87解压到tomcat8083和tomcat8084中 &#xff08;或…...

【系统架构设计】计算机公共基础知识: 4 数据库系统

目录 一 数据库模式 二 分布式数据库 三 索引和视图 四 数据库设计 五 关系代数...

主键问题以及分布式 id

分布式 id 需要处理的问题主要是同一时间在多台机器中保证生成的 id 唯一&#xff0c;为了这么做我们可以这么做&#xff1a; 分布式 id 生成策略 先说几个已经被淘汰的策略引出分布式 id 的问题 1&#xff0c;UUID&#xff1a;UUID 随机并且唯一&#xff0c;在单一的数据库…...

ReentranReadWriteLock 使用案例

ReentranReadWriteLock使用案例 /*** ReentranReadWriteLock 使用案例* 读线程共享* 写线程互斥*/ public class ReentrantReadWriteLockExample {private String news;private ReentrantReadWriteLock lock new ReentrantReadWriteLock();public String readNews() {lock.re…...

“我们把最扎心的话,说给了自己最亲近的人” 何解?| IDCF

引子 我们把最好的一面给了陌生人&#xff0c;却把最扎心的话&#xff0c;说给了自己最亲近的人。 我们往往会对关心自己的人发脾气&#xff0c;很多时候意图是好的&#xff0c;表达方式却简单粗暴&#xff0c;结果自然不必多言。你认为自己给的是反馈和建议&#xff0c;对方…...

MongoDB之索引和聚合

文章目录 一、索引1、说明2、原理3、相关操作3.1、创建索引3.2、查看集合索引3.3、查看集合索引大小3.4、删除集合所有索引&#xff08;不包含_id索引&#xff09;3.5、删除集合指定索引 4、复合索引 二、聚合1、说明2、使用 总结 一、索引 1、说明 索引通常能够极大的提高查…...

【GEE】基于GEE进行非监督学习

1 简介与摘要 之前写了多季节叠加的监督学习&#xff0c;所以这次简单写一个非监督学习吧。。 这次为了简单明了&#xff0c;就不整那么多虚的了&#xff0c;在这里我不叠图层了&#xff0c;有需要的可以参考前一篇博客自己添加输入的图层。 2 制作输入影像 首先&#xff0c…...

多视图聚类的论文阅读(一)

当聚类的方式使用的是某一类预定义好的相似性度量时&#xff0c; 会出现如下情况&#xff1a; 数据聚类方面取得了成功&#xff0c;但它们通常依赖于预定义的相似性度量&#xff0c;而这些度量受原始方法的影响:当输入维数相对较高时&#xff0c;往往是无效的。 1. Deep Mult…...

K-Means算法进行分类

已知数据集D中有9个数据点&#xff0c;分别是&#xff08;1,2&#xff09;&#xff0c;(2,3), (2,1), (3,1),(2,4),(3,5),(4,3),(1,5),(4,2)。采用K-Means算法进行聚类&#xff0c;k2&#xff0c;设初始中心点为&#xff08;1.1,2.2&#xff09;&#xff0c;&#xff08;2.3,3.…...

深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...