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

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

news 2025/8/27 17:00:33

文章目录

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

前言

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>