web前端中代理模式的示例分析

這篇文章主要為大家展示了“web前端中代理模式的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“web前端中代理模式的示例分析”這篇文章吧。

代理模式（Proxy Pattern）

是為一個對象提供一個代用品或占位符，以便控制對它的訪問

假設(shè)當(dāng)A 在心情好的時候收到花，小明表白成功的幾率有

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

場景

• 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>

• ES6 的 proxy 阮一峰Proxy

• jQuery.proxy()方法

優(yōu)點

• 代理模式能將代理對象與被調(diào)用對象分離，降低了系統(tǒng)的耦合度。代理模式在客戶端和目標(biāo)對象之間起到一個中介作用，這樣可以起到保護目標(biāo)對象的作用

• 代理對象可以擴展目標(biāo)對象的功能；通過修改代理對象就可以了，符合開閉原則；

缺點

• 處理請求速度可能有差別，非直接訪問存在開銷

以上是“web前端中代理模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！