前言

hello world歡迎來(lái)到前端的新世界

---

😜當(dāng)前文章系列專欄：前端設(shè)計(jì)模式
🐱?👓博主在前端領(lǐng)域還有很多知識(shí)和技術(shù)需要掌握，正在不斷努力填補(bǔ)技術(shù)短板。(如果出現(xiàn)錯(cuò)誤，感謝大家指出)🌹
💖感謝大家支持！您的觀看就是作者創(chuàng)作的動(dòng)力

介紹

是為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問(wèn),充當(dāng)客戶端和目標(biāo)對(duì)象之間的中間層，控制對(duì)目標(biāo)對(duì)象的訪問(wèn)。前端代理可以用于各種不同的場(chǎng)景，包括安全控制、性能優(yōu)化和簡(jiǎn)化復(fù)雜性等方面。

使用前端代理模式時(shí)，客戶端并不直接與目標(biāo)對(duì)象進(jìn)行交互，而是通過(guò)代理來(lái)間接訪問(wèn)目標(biāo)對(duì)象。代理可以對(duì)客戶端的請(qǐng)求進(jìn)行過(guò)濾、驗(yàn)證和一些額外的操作，然后再將請(qǐng)求傳遞給目標(biāo)對(duì)象。這種方式可以有效地保護(hù)目標(biāo)對(duì)象，同時(shí)也可以在訪問(wèn)前后實(shí)現(xiàn)一些附加的操作，如權(quán)限驗(yàn)證、緩存、延遲加載等。

例子

假設(shè)當(dāng)A 在心情好的時(shí)候收到花，小明表白成功的幾率有60%，而當(dāng)A 在心情差的時(shí)候收到花，小明表白的成功率無(wú)限趨近于0。小明跟A 剛剛認(rèn)識(shí)兩天，還無(wú)法辨別A 什么時(shí)候心情好。如果不合時(shí)宜地把花送給A，花被直接扔掉的可能性很大，這束花可是小明吃了7 天泡面換來(lái)的。但是A 的朋友B 卻很了解A，所以小明只管把花交給B，B 會(huì)監(jiān)聽(tīng)A 的心情變化，然后選擇A 心情好的時(shí)候把花轉(zhuǎn)交給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)

場(chǎng)景

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>

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

• 代理模式能將代理對(duì)象與被調(diào)用對(duì)象分離，降低了系統(tǒng)的耦合度。代理模式在客戶端和目標(biāo)對(duì)象之間起到一個(gè)中介作用，這樣可以起到保護(hù)目標(biāo)對(duì)象的作用
• 代理對(duì)象可以擴(kuò)展目標(biāo)對(duì)象的功能；通過(guò)修改代理對(duì)象就可以了，符合開(kāi)閉原則；

缺點(diǎn)

處理請(qǐng)求速度可能有差別，非直接訪問(wèn)存在開(kāi)銷

標(biāo)題五

后言

創(chuàng)作不易，要是本文章對(duì)廣大讀者有那么一點(diǎn)點(diǎn)幫助 不妨三連支持一下，您的鼓勵(lì)就是博主創(chuàng)作的動(dòng)力