結構型-代理模式

風吹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，這個幫手就是代理器，通常開發中最常見的四種代理型別：事件代理、虛擬代理、快取代理、保護代理；
  1.  事件代理：事件冒泡，代理 DOM
  2. 虛擬代理：透過Image載入圖片，代理 DOM
  3. 快取代理：快取計算結果，代理函式
  4. 保護代理：get，set保護核心資料，代理物件
 

相關文章