定義

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

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保護核心資料，代理物件

結構型-代理模式