JavaScript-代理模式

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/28/12239211.html
-Advertisement-
Play Games

代理模式 使用者無權訪問目標對象 中間加代理,通過代理授權和控制 傳統 UML 類圖 JavaScript 中的代理模式 應用場景 網頁代理事件 jQuery \$.proxy es6 Proxy 明星和經紀人的關係 設計原則驗證 代理類和目標類分離,隔離開目標類和使用者 符合開放封閉原則 代理模式 ...


代理模式

使用者無權訪問目標對象
中間加代理,通過代理授權和控制

傳統 UML 類圖

JavaScript 中的代理模式

class ReadImg {
  constructor(fileName) {
    this.fileName = fileName;
    this.loadFromDisk();
  }
  display() {
    console.log("display..." + this.fileName);
  }
  loadFromDisk() {
    console.log("loading..." + this.fileName);
  }
}

class ProxyImg {
  constructor(fileName) {
    this.readImg = new ReadImg(fileName);
  }
  display() {
    this.readImg.display();
  }
}

// test
let proxyImg = new ProxyImg("1.png");
proxyImg.display();

應用場景

網頁代理事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <a href="#">a5</a>
    </div>

    <script src="https://cdn.bootcss.com/jQuery/3.3.0/jQuery"></script>
    <script>
      var div1 = document.getElementById("div1");
      div1.addEventListener("clink", function(e) {
        var target = e.target;
        if (target.nodeName === "A") {
          alert(target.innerHTML);
        }
      });
    </script>
  </body>
</html>

jQuery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <a href="#">a5</a>
    </div>

    <script src="https://cdn.bootcss.com/jQuery/3.3.0/jQuery"></script>

    <script>
      $("#div1").click(function() {
        // this符合期望
        $(this).addClass("red");
      });
      $("#div1").click(function() {
        setTimeout(function() {
          // this不符合期望
          $(this).addClass("red");
        }, 1000);
      });
    </script>

    <script>
      // 如下方式解決
      $("#div1").click(function() {
        // this符合期望
        $(this).addClass("red");
      });
      $("#div1").click(function() {
        var _this = this;
        setTimeout(function() {
          // this符合期望
          $(this).addClass("red");
        }, 1000);
      });
    </script>
  </body>
</html>

$.proxy

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <a href="#">a5</a>
    </div>

    <script src="https://cdn.bootcss.com/jQuery/3.3.0/jQuery"></script>
    <script>
      $("#div1").click(function() {
        var fn = function() {
          $(this).css("background-color", "yellow");
        };
        fn = $.proxy(fn, this);
        setTimeout(fn, 1000);
      });
    </script>

    <script>
      // 由上面那個化簡而來
      $("#div1").click(function() {
        fn = $.proxy(function() {
          $(this).css("background-color", "yellow");
        }, this);
        setTimeout(fn, 1000);
      });
    </script>

    <script>
      // 由上面那個化簡而來
      $("#div1").click(function() {
        setTimeout(
          $.proxy(function() {
            $(this).css("background-color", "yellow");
          }, this),
          1000
        );
      });
    </script>
  </body>
</html>

es6 Proxy

明星和經紀人的關係

// 明星
let star = {
  name: "張XX",
  age: 25,
  phone: "13910733521"
};

// 經紀人
let agent = new Proxy(star, {
  get: function(target, key) {
    if (key === "phone") {
      // 返回經紀人自己的手機號
      return "18611112222";
    }
    if (key === "price") {
      // 明星不報價,經紀人報價
      return 120000;
    }
    return target[key];
  },
  set: function(target, key, val) {
    if (key === "customPrice") {
      if (val < 100000) {
        // 最低 10w
        throw new Error("價格太低");
      } else {
        target[key] = val;
        return true;
      }
    }
  }
});

// 主辦方
console.log(agent.name);
console.log(agent.age);
console.log(agent.phone);
console.log(agent.price);

// 想自己提供報價(砍價,或者高價爭搶)
agent.customPrice = 150000;
// agent.customPrice = 90000  // 報錯:價格太低
console.log("customPrice", agent.customPrice);

設計原則驗證

  • 代理類和目標類分離,隔離開目標類和使用者
  • 符合開放封閉原則

代理模式 VS 適配器模式

  • 適配器模式:提供一個不同的介面(如不同版本的插頭)
  • 代理模式:提供一模一樣的介面

代理模式 VS 裝飾器模式

  • 裝飾器模式:拓展功能,原有功能不變且可直接使用
  • 代理模式:顯示原有功能,但經過限制或閹割之後的

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux起源 操作系統出現時間線: Unix1970年誕生 ,71年用C語言重寫 Apple II 誕生於1976年 window誕生於1985年 Linux誕生於1991年,由大學生Linus Torvalds和後來的眾多愛好者共同開發完成。 想必大家看了這個時間線應該能想明白為啥Linux要出 ...
  • docker search nextcloud docker pull docker.io/nextcloud docker images mkdir /home/nextcloud chmod -R 777 nextcloud/ docker run -d --restart=always --n ...
  • spark 1. Spark的四大特性 1. 速度快 spark比mapreduce快的兩個原因 1. 基於記憶體 2. 進程與線程 2. 易用性 1. 可以用java、scala、python、R等不同的語言來快速編寫spark程式 3. 通用性 4. 相容性 1. spark程式有多種運行模式 s ...
  • Redis是用C語言編寫的開源免費的高性能的分散式記憶體資料庫,基於記憶體運行並支持持久化的NoSQL資料庫。 安裝 1)從官網http://download.redis.io/releases/下載redis壓縮包,如redis-5.0.3.tar.gz 2)上傳Linux伺服器目錄opt,解壓文件包 ...
  • html點擊圓形擴散顯示界面特效 "開場白" "效果" "用到的核心代碼" "思考" "探索" "源碼" "相容性問題" 開場白 經常看到某些app有點擊擴散的特效,有些當做擴散顯示界面,有些擴散改變主題顏色,想在網頁上實現一下,所以就有了這個。 效果 不想聽逼逼的直接去 "源碼" 用到的核心代碼 ...
  • Loader(載入器) 是 webpack 的核心之一。它用於將不同類型的文件轉換為 webpack 可識別的模塊。本文將深入探索 webpack 中的 loader,揭秘它的工作原理,以及如何開發一個 loader。 ...
  • 在我還沒開始吧學習記錄記錄在博客上時,我曾做過一張關於前端工程師的腦圖 當時我還是一個連數據結構都沒學過的小萌新,空有一腔熱血,如今我不僅學完了c語言版的數據結構(感覺收穫很大,考的還湊合), 還把JavaScript的數據結構與演算法學了一遍,再看這張圖時,已經不像當初好多都看不懂,現在下麵這張圖已 ...
  • 面向對象和麵向過程是兩種不同描述世界的方法。 面向過程:世界視為過程,世界由一個個相互關聯的小程式構建來的,是精密的。 但是構成一個系統的因素太多,要把所有可能的因素都考慮到,把所有因素的因果分析都分析清楚,再把這個過程模擬出來實在是太困難了。 面向對象:世界視為對象,世界由一個個相互獨立、相互之間 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...