結構型-代理模式

風吹De麥浪發表於2023-03-25

定義

代理是一個中間者的角色，如生活中的中介，出於種種考慮/限制，一個物件不能直接訪問另一個物件，需要一個第三者（中間代理）牽線搭橋從而間接達到訪問目的，這樣的就是代理模式。

es6 中的代理

es6 的 proxy 就是上面說的代理模式的實現，es6 幫我們在語法層面提供了這個新的api，讓我們可以很輕鬆的就使用了代理模式。

const p = new Proxy(target, handler)
target:要使用 Proxy 包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）
handler:一個通常以函式作為屬性的物件

proxy 例項

const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

應用實踐-模擬代理模式

代理模式的應用非常常見，既可以是為了加強控制、擴充功能、提高效能，也可以僅僅是為了最佳化我們的程式碼結構、實現功能的解耦。無論是出於什麼目的，這種模式的套路就只有一個—— A 不能直接訪問 B，A 需要藉助一個幫手來訪問 B，這個幫手就是代理器。需要這種代理器的就是代理模式的應用場景。

通常開發中最常見的代理型別：事件代理、虛擬代理、快取代理、保護代理；

事件代理：代理 DOM
虛擬代理：代理 DOM
快取代理：代理函式
保護代理：代理物件

事件代理

事件代理是代理模式最常見的一種應用方式，它的場景是一個父元素下有多個子元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

</head>

<body>
  <p>圖片列表--事件代理</p>
  <ul id="ul_wrapper">
    <li>
      1、<img id="img_1" src="" alt="">
    </li>
    <li>
      2、<img id="img_2" src="" alt="">
    </li>
    <li>
      3、<img id="img_3" src="" alt="">
    </li>
    <li>
      4、<img id="img_4" src="" alt="">
    </li>
    <li>
      5、<img id="img_5" src="" alt="">
    </li>
    <li>
      6、<img id="img_6" src="" alt="">
    </li>
    <li>
      7、<img id="img_7" src="" alt="">
    </li>
    <li>
      8、<img id="img_8" src="" alt="">
    </li>
  </ul>
  <script>
      // 自己找個base64，複製上來太長了
    let defualtSrc = ``
    let initPage = (function () {
      document.querySelectorAll('img').forEach(item => {
        item.src = defualtSrc
      })
    })();
    document.querySelector('#ul_wrapper').addEventListener('click', function (e) {
      if (e.target.nodeName === 'IMG') {
        alert('圖片被點選')
      }
    }, false)
  </script>
</body>

</html>

快取代理

快取代理可以避免重複的計算

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

</head>

<body>
  <p>圖片列表--快取代理</p>
  <button type="button">計算</button>
  <div>
    <label>結果：</label><input type="text">
  </div>
  <script>

    /*
    有效的減少計算；
    工具函式
    */
    const addAll = function (...args) {
      console.log('進行了一次新計算')
      let result = 0
      const len = args.length
      for (let i = 0; i < len; i++) {
        result += args[i]
      }
      return result
    }

    let proxyAddAll = (function () {
      const resultCache = {}
      return function (fn, ...args) {
        const key = args.join('')
        if (resultCache[key]) {
          return resultCache[key]
        }
        return resultCache[key] = fn.apply(this, args)
      }
    })()

    // 123456 引數相同，只是第一次運算的時候，列印了一次進行了一次新計算
    console.log(proxyAddAll(addAll, 1, 2, 3, 4, 5, 6))
    console.log(proxyAddAll(addAll, 1, 2, 3, 4, 5, 6))
    console.log(proxyAddAll(addAll, 1, 2, 3, 4, 5, 6))
    // 1234567 因為是一個全新的引數所以列印了一次進行了一次新計算
    console.log(proxyAddAll(addAll, 1, 2, 3, 4, 5, 7))
  </script>
</body>

</html>

虛擬代理

圖片預載入，預載入主要是為了避免網路不好、或者圖片太大時，頁面長時間給使用者留白的尷尬。原理也很簡單建立一個圖片例項指向圖片真實地址，當完成載入時，把佔點陣圖的地址替換成真實的地址，這個時候瀏覽器會直接從快取裡面拿。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

</head>

<body>
  <p>圖片列表--虛擬代理</p>
  <ul>
    <li>
      1、<img id="img_1" src="" alt="">
    </li>
    <li>
      2、<img id="img_2" src="" alt="">
    </li>
    <li>
      3、<img id="img_3" src="" alt="">
    </li>
    <li>
      4、<img id="img_4" src="" alt="">
    </li>
    <li>
      5、<img id="img_5" src="" alt="">
    </li>
    <li>
      6、<img id="img_6" src="" alt="">
    </li>
    <li>
      7、<img id="img_7" src="" alt="">
    </li>
    <li>
      8、<img id="img_8" src="" alt="">
    </li>
  </ul>
  <script>
    // 替換成你的base64，複製上來太長
    let defualtSrc = ""
    let initPage = (function () {
      document.querySelectorAll('img').forEach(item => {
        item.src = defualtSrc
      })
    })();

    // 設定圖片地址
    function setImgUrl(dom, src) {
      dom.src = src;
    }

    // 中間的代理圖片地址
    function proxyImg(element, url) {
      // 建立一個虛擬Image例項
      const virtualImage = new Image()
      virtualImage.onload = function () {
        setImgUrl(element, url)
      }
      virtualImage.src = url
    }
    function preLoadImg() {
      const urlList = [
        'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=801209673,1770377204&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1856946436,1599379154&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1010739515,2488150950&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=813347183,2158335217&fm=193&f=GIF']
      document.querySelectorAll('img').forEach((element, index) => {
        proxyImg(element, urlList[index])
        element.src = defualtSrc
      })
    }
    setTimeout(() => {
      preLoadImg()
    }, 0.5 * 1000);

    /*
    核心： 有個虛擬的例項去請求地址，拿到之後替換到真實的dom
    */
  </script>
</body>

</html>

保護代理

可以透過es6 的proxy 的get、set 訪問器實現

const handler = {
  get: function(obj, prop) {
      return prop in obj ? obj[prop] : '你不能訪問';
  }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 你不能訪問

具體檢視 proxyProxy

小結

A 不能直接訪問 B，A 需要藉助一個幫手來訪問 B，這個幫手就是代理器，通常開發中最常見的四種代理型別：事件代理、虛擬代理、快取代理、保護代理；

事件代理：事件冒泡，代理 DOM
虛擬代理：透過Image載入圖片，代理 DOM
快取代理：快取計算結果，代理函式
保護代理：get，set保護核心資料，代理物件

設計模式之代理模式(結構型)
2019-01-19
設計模式
設計模式--代理模式Proxy（結構型）
2014-04-10
設計模式
結構型模式：代理模式
2019-05-15
模式
結構性代理模式
2024-03-26
模式
JAVA設計模式 5【結構型】代理模式的理解與使用
2020-08-01
Java設計模式
結構型：代理模式 Vs 介面卡模式 Vs 門面模式(外觀模式)
2014-03-30
模式
結構型：策略模式
2023-03-27
模式
設計模式-結構型
2018-01-01
設計模式
結構型-組合模式
2013-03-28
模式
無廢話設計模式（11）結構型模式--代理模式
2020-08-03
設計模式
設計模式(十六)----結構型模式之代理享元模式
2023-03-06
設計模式
結構型-裝飾器模式
2023-03-18
模式
(Java)設計模式：結構型
2023-01-14
Java設計模式
結構型-介面卡模式
2013-03-28
模式
結構型-Facade模式
2013-03-28
模式
8.結構型-組合模式
2020-11-11
模式
結構型之三-組合模式
2017-10-09
模式
PHP結構型設計模式（下）
2017-05-20
PHP設計模式
PHP結構型設計模式（上）
2017-05-20
PHP設計模式
代理模式總結
2018-03-05
模式
JavaScript設計模式之結構型設計模式
2017-12-26
JavaScript設計模式
設計模式--橋接模式Bridge（結構型）
2014-04-17
設計模式橋接
設計模式--組合模式Composite（結構型）
2014-04-17
設計模式
設計模式--裝飾器模式Decorator（結構型）
2014-04-10
設計模式
設計模式--享元模式FlyWeight（結構型）
2014-04-15
設計模式
初探Java設計模式2：結構型模式（代理模式，介面卡模式等）
2019-11-06
Java設計模式
大話 PHP 設計模式--結構型
2019-09-03
PHP設計模式
物件導向-設計模式-結構型
2021-07-26
物件設計模式
設計模式--介面卡模式Adapter（結構型）
2014-04-17
設計模式APT
設計模式--外觀模式Facade（結構型）
2014-04-11
設計模式
聊一聊設計模式（三）-- 結構型設計模式
2020-02-21
設計模式
JAVA設計模式（10）：結構型-組合模式（Composite）
2016-05-17
Java設計模式
設計模式總結——代理模式以及java的動態代理
2018-12-24
設計模式Java
【設計模式自習室】結構型：組合模式 Composite
2020-02-12
設計模式
樹型結構
2016-02-12
結構型模式：橋接模式
2019-04-22
模式橋接
結構型模式：外觀模式
2019-05-05
模式
結構型模式----橋接模式
2016-08-02
模式橋接