介绍

  • 使用者无权访问目标对象

  • 中间加代理，通过代理做授权和控制

    示例

  • 科学上网，访问 GitHub.com

  • 明星经纪人

    常见使用场景

  • 网页事件代理 ```html <!DOCTYPE html>

  2. - jQuery的$.proxy
  3. ```html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6.     <head>
  7.         <meta charset="UTF-8" />
  8.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.         <title>Document</title>
  11.     </head>
  12.     <body>
  13.         <div id="div1">
  14.             <a href="#">a1</a>
  15.             <a href="#">a2</a>
  16.             <a href="#">a3</a>
  17.             <a href="#">a4</a>
  18.             <a href="#">a5</a>
  19.             <a href="#">a6</a>
  20.         </div>
  21.         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  22.         <script>
  23.             // $("#div1").click(function () {
  24.             //     $(this).addClass("red");
  25.             // });
  26.             // $("#div1").click(function () {
  27.             //     setTimeout(function () {
  28.             //     // this 不符合期望
  29.             //         $(this).addClass("red");
  30.             //     }, 1000);
  31.             // });
  33.             // $("#div1").click(function () {
  34.             //   var _this = this;
  35.             //     setTimeout(function () {
  36.             //     // _this 符合期望
  37.             //         $(_this).addClass("red");
  38.             //     }, 1000);
  39.             // });
  41.             // $("#div1").click(() => {
  42.             //     setTimeout(() => {
  43.             //         $(this).addClass("red");
  44.             //     }, 1000);
  45.             // });
  47.             $("#div1").click(function () {
  48.                 setTimeout(
  49.                     $.proxy(function () {
  50.                         $(this).addClass("red");
  51.                     }, this),
  52.                     1000
  53.                 );
  54.             });
  55.         </script>
  56.     </body>
  57. </html>
  • es 6的proxy ```javascript //明星 let star = { name: “dd”, age: 25, phone: “明星电话：189**05“, };

//经纪人 let agent = new Proxy(star, { //target是要代理的对象，key是要获取的属性值 get: function (target, key) { if (key === “phone”) { //返回经纪人的电话，不会把明星的电话直接给你 return “经纪人电话：189**3*”; } if (key === “price”) { //明星不报价，经纪人谈价格 return “12K”; } return target[key]; }, set: function (target, key, value) { if (key === “customPrice”) { if (value < 100000) { //最低10万 throw new Error(“价格太低”); } else { target[key] = value; return true; } } }, });

console.log(agent.name); console.log(agent.phone); console.log(agent.price);

agent.customPrice = 150000; console.log(“agent.customPrice：” + agent.customPrice);

  1. <a name="i9iMF"></a>
  2. # 代理模式代码示例 
  3. ```javascript
  4. class ReadImg {
  5.     constructor(fileName) {
  6.         this.fileName = fileName;
  7.         this.loadFromDisk();
  8.     }
  9.     dispaly() {
  10.         console.log("display... " + this.fileName);
  11.     }
  12.     loadFromDisk() {
  13.         console.log("loading... " + this.fileName);
  14.     }
  15. }
  17. class ProxyImg {
  18.     constructor(fileName) {
  19.         this.realImg = new ReadImg(fileName);
  20.     }
  21.     dispaly() {
  22.         this.realImg.dispaly();
  23.     }
  24. }
  26. // test
  27. let proxyImg = new ProxyImg("pic.png");
  28. proxyImg.dispaly();

设计原理验证

  • 代理类和目标类分离，隔离开目标类和使用者
  • 符合开放封闭原则


区分

代理模式 VS 适配器模式

  • 适配器模式：提供一个不同的接口（如不同版本的插头）
  • 代理模式：提供一模一样的接口

代理模式 VS 装饰器模式

  • 装饰器模式：扩展功能，原有功能不变且可直接使用
  • 代理模式： 显示原有功能，但是经过限制或者阉割之后的