結構型-代理模式

来源:https://www.cnblogs.com/longbensong/archive/2023/03/25/17255083.html
-Advertisement-
Play Games

定義 代理是一個中間者的角色，如生活中的中介，出於種種考慮/限制，一個對象不能直接訪問另一個對象，需要一個第三者（中間代理）牽線搭橋從而間接達到訪問目的，這樣的就是代理模式。 es6 中的代理 es6 的 proxy 就是上面說的代理模式的實現，es6 幫我們在語法層面提供了這個新的api，讓我們可 ...


定義

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

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保護核心數據，代理對象
 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用 Linux dd 命令測試磁碟讀寫性能
    使用 Linux dd 命令測試磁碟讀寫性能 從幫助手冊中可以看出，dd命令可以複製文件，根據操作數進行轉換和格式化。我這裡記錄一下dd命令用於測試磁碟I/O性能的過程。 dd 可從標準輸入或文件中讀取數據，根據指定的格式來轉換數據，再輸出到文件、設備或標準輸出。 dd 命令用法： Usage: d ...
  • Linux報錯：audit: backlog limit exceeded（審計：超出積壓限制）
    Linux報錯：audit: backlog limit exceeded（審計：超出積壓限制） 系統版本：CentOS Linux release 7.6.1810 (Core) 問題現象：一次巡檢中發現業務系統打不開，對應的Linux伺服器ssh連接不上，但是能ping通，於是在VMware v ...
  • P2 MySQL三層結構
    P2 MySQL三層結構 所謂安裝MySQL資料庫，就是在主機安裝一個資料庫管理系統（DBMS），這個管理程式可以管理多個資料庫。DBMS(database manage system) 一個資料庫可以創建多個表，以保存數據（信息）。 數據管理系統（DBMS）、資料庫和表的關係如圖所示： 數據在數據 ...
  • YCSB工具原理重點內容解讀（二）
    支持insert和批量insert，待研究怎麼設置 一、建表 （1）預設表名為usertable CREATE TABLE usertable ( YCSB_KEY VARCHAR(255) PRIMARY KEY, FIELD0 TEXT, FIELD1 TEXT, FIELD2 TEXT, FI ...
  • YCSB的使用測試MySQL協議類資料庫（一）
    一、工具介紹 YCSB 於 2010 年開源，YCSB是雅虎開源的NoSQL測試工具，用java開發實現，通常用來對noSQL資料庫進行性能，註意此工具僅支持varchar和text類型，且列的長度可以增加，預設是10列，可以根據自己的需要增加列長。運行一個壓力測試需要 6 步： 配置需要測試的數據 ...
  • Qt 5.14.2 Windows10 Android 環境搭配 和 apk 文件生成
    一、JDK（Java Development Kit）安裝 版本： 資源：下載官網的資源需要登錄帳號，可以在網上自己去找資源。jdk8 下載地址 1、打開jdk安裝軟體，進入Java SE 安裝界面。 2、點擊下一步。 3、點擊下一步，進入安裝界面。安裝完成後進入Java安裝界面。 4、點擊下一步， ...
  • 萬字血書Vue—Vuex
    Vuex概述 組件之間共用數據的方式（小範圍） 全局事件匯流排 Vuex是什麼？ 專門在Vue中實現集中式狀態（數據）管理的一個Vue插件，可以方便的實現組件之間的數據共用。 使用Vuex統一管理狀態的好處 能夠在vuex中集中管理共用的數據，易於開發和後期維護 能夠高效地實現組件之間的數據共用，提高 ...
  • Vue——initState【十】
    前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容; 內容 這一塊主要圍繞init.ts中的initState進行剖析，初始化生命周期之後緊接著。 initState initState的方法位於scr/core/instance/state.ts中； co ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類