当前位置: 首页 > 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; *…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...