定义

一些类是受保护的，类上的方法不能直接被访问，需要设置一层代理，让中间的代理对象增加一些逻辑判断、调用前后执行一些操作，从而实现扩展目标的功能。

类图

Snipaste_2020-09-16_20-59-59.png

代码示例

明星经纪人代理

  1. abstract class Star {
  2.   abstract answerPhone(): void;
  3. }
  4. class YaoMing extends Star {
  5.   available: boolean = true;
  6.   answerPhone(): void {
  7.     console.log("我是明星本人");
  8.   }
  9. }
  10. class ProxyYaoMing extends Star {
  11.   protected yao;
  12.   constructor() {
  13.     super();
  14.     this.yao = new YaoMing();
  15.   }
  16.   answerPhone(): void {
  17.     console.log("你好，我是明星的经纪人");
  18.     if (this.yao.available) {
  19.       this.yao.answerPhone();
  20.     }
  21.   }
  22. }
  23. let ym = new ProxyYaoMing();
  24. ym.answerPhone();

图片loading代理的示例

  1. <style>
  2.   .bg-container {
  3.     width: 860px;
  4.     height: 560px;
  5.   }
  7.   .bg-container img {
  8.     width: 100%;
  9.     height: 100%;
  10.   }
  11. </style>
  13. <body>
  14.   <div id="button-wrapper">
  15.     <button data-src="image/1.png">image1</button>
  16.     <button data-src="image/2.png">image2</button>
  17.     <button data-src="image/3.png">image3</button>
  18.   </div>
  19.   <div class="bg-container">
  20.     <img src="image/1.png" id="bg-image" alt="">
  21.   </div>
  22.   <script>
  23.     let btn = document.getElementById("button-wrapper")
  24.     class bgImage {
  25.       constructor() {
  26.         this.imageSrc = document.getElementById("bg-image")
  27.       }
  28.       setSrc(src) {
  29.         this.imageSrc.src = src
  30.       }
  31.     }
  32.     class LoadingBackgroundImage {
  33.       static Loading_url = "./image/loading.gif"
  34.       constructor() {
  35.         this.loadingImage = new bgImage()
  36.       }
  37.       setSrc(src) {
  38.         this.loadingImage.setSrc(LoadingBackgroundImage.Loading_url)
  39.         let img = new Image()
  40.         img.onload = () => {
  41.           this.loadingImage.setSrc(src)
  42.         }
  43.         img.src = src
  44.       }
  45.     }
  46.     let bgimage = new bgImage()
  47.     function setSrc(src) {
  48.       let imageSrc = document.getElementById("bg-image")
  49.       imageSrc.src = src
  50.     }
  51.     let loadingimage = new LoadingBackgroundImage()
  52.     btn.addEventListener("click", (event) => {
  53.       let src = event.target.dataset.src
  54.       // console.log(src);
  55.       // bgimage.setSrc(src)
  56.       loadingimage.setSrc(src)
  57.     })
  58.   </script>
  59. </body>

图片懒加载代理的示例

  1. <style>
  2.   .image {
  3.     width: 400px;
  4.     height: 320px;
  5.     background-color: #ccc;
  6.   }
  8.   .image img {
  9.     width: 100%;
  10.     height: 100%;
  11.   }
  12. </style>
  14. <body>
  15.   <div class="container">
  16.     <div class="image">
  17.       <img data-src="/image/1.png">
  18.     </div>
  19.     <div class="image">
  20.       <img data-src="/image/2.png">
  21.     </div>
  22.     <div class="image">
  23.       <img data-src="/image/3.png">
  24.     </div>
  25.     <div class="image">
  26.       <img data-src="/image/4.png">
  27.     </div>
  28.     <div class="image">
  29.       <img data-src="/image/5.png">
  30.     </div>
  31.     <div class="image">
  32.       <img data-src="/image/6.png">
  33.     </div>
  34.     <div class="image">
  35.       <img data-src="/image/7.png">
  36.     </div>
  37.     <div class="image">
  38.       <img data-src="/image/8.png">
  39.     </div>
  40.     <div class="image">
  41.       <img data-src="/image/9.png">
  42.     </div>
  43.   </div>
  44.   <script>
  45.     let images = document.getElementsByTagName("img")
  46.     let clientHeight = window.innerHeight || document.documentElement.clientHeight
  47.     function lazyLoad() {
  48.       for (let i = 0; i < images.length; i++) {
  49.         if (images[i].getBoundingClientRect().top < clientHeight) {
  50.           images[i].src = images[i].dataset.src
  51.         }
  52.       }
  53.     }
  54.     lazyLoad()
  55.     window.addEventListener("scroll", lazyLoad)
  56.   </script>
  57. </body>

两个图片代理使用的服务

  1. const express = require("express");
  2. const app = express();
  3. let path = require("path");
  5. app.get("/image/loading.gif", (req, res) => {
  6.   res.sendFile(path.join(__dirname, "image", "loading.gif"));
  7. });
  8. app.get("/image/:name", (req, res) => {
  9.   // console.log(req.path);
  10.   setTimeout(() => {
  11.     res.sendFile(path.join(__dirname, req.path));
  12.   }, 2000);
  13. });
  14. app.get("/lazy", (req, res) => {
  15.   res.sendFile(path.join(__dirname, "lazy.html"));
  16. });
  17. app.get("/", (req, res) => {
  18.   res.sendFile(path.join(__dirname, "loading.html"));
  19. });
  21. app.listen(8000);

复杂计算的代理过程

使用缓存进行代理，减少重复计算

  1. function factorial(num) {
  2.   if (num == 1) {
  3.     console.log("新计算的值...");
  4.     return 1;
  5.   } else {
  6.     return num * factorial(num - 1);
  7.   }
  8. }
  9. const proxy = function (fn) {
  10.   const cache = {};
  11.   return function (num) {
  12.     if (num in cache) {
  13.       return cache[num];
  14.     }
  15.     return (cache[num] = fn(num));
  16.   };
  17. };
  18. let proxyFactorial = proxy(factorial);
  19. // console.log(factorial(5));
  20. // console.log(factorial(5));
  21. // console.log(factorial(5));
  22. console.log(proxyFactorial(5));
  23. console.log(proxyFactorial(5));
  24. console.log(proxyFactorial(5));

防抖节流的代理过程

防抖节流的定义

  • 防抖：会开启多个定时器，在固定时间内，有新的事件进来就会销毁之前的定时器，然后重新创建一个定时器。
  • 节流：只开启一个定时器，是在一个固定时间段执行事件，在此事件段内可多次执行，过了时间段就不执行。

防抖类似于现实中的黑车，来一个乘客开始倒计时5分钟后发车，又来一个乘客，司机重新计时，再次等一个5分钟。直到等5分钟周期内，都没有新乘客上车，才开始发车。
节流类似于现实中的出租车，来了一个乘客，司机问了目的，说等我喝口水一分钟后立马走，这个一分钟就是固定的定时器，不会再次开启新的定时器。

节流代码示例

  1. <style>
  2.   #container {
  3.     width: 200px;
  4.     height: 600px;
  5.     overflow: scroll;
  6.     border: 1px solid steelblue;
  7.   }
  9.   #container .content {
  10.     height: 4000px;
  11.   }
  12. </style>
  14. <body>
  15.   <div id="container">
  16.     <p>节流的实现</p>
  17.     <div class="content"></div>
  18.   </div>
  19.   <script>
  20.     let container = document.getElementById("container")
  21.     let lastTime = Date.now()
  22.     function throttle(callback, interval) {
  23.       let lastExecuteTime;
  24.       return function () {
  25.         let content = this
  26.         let args = Array.from(arguments)
  27.         let now = Date.now()
  28.         if (lastExecuteTime) {
  29.           if (now - lastExecuteTime >= interval) {
  30.             callback.apply(this, args)
  31.             lastExecuteTime = now
  32.           }
  33.         } else {
  34.           callback.apply(this, args)
  35.           lastExecuteTime = now
  36.         }
  37.       }
  38.     }
  39.     const scrollEvent = (event) => {
  40.       let nowDate = Date.now()
  41.       console.log("触发了滚动事件", (nowDate - lastTime) / 1000);
  42.       lastTime = nowDate
  43.     }
  44.     container.addEventListener("scroll", throttle(scrollEvent, 500))
  45.   </script>
  46. </body>

滚动事件会间隔0.5秒执行一次

防抖的示例

  1. <style>
  2.   #container {
  3.     width: 200px;
  4.     height: 600px;
  5.     overflow: scroll;
  6.     border: 1px solid steelblue;
  7.   }
  9.   #container .content {
  10.     height: 4000px;
  11.   }
  12. </style>
  14. <body>
  15.   <div id="container">
  16.     <p>防抖的实现</p>
  17.     <div class="content"></div>
  18.   </div>
  19.   <script>
  20.     let container = document.getElementById("container")
  21.     let lastTime = Date.now()
  22.     function debounce(callback, delay) {
  23.       let timer;
  24.       return function () {
  25.         let args = Array.from(arguments)
  26.         let now = Date.now()
  27.         if (timer) {
  28.           clearTimeout(timer)
  29.         }
  30.         timer = setTimeout(() => {
  31.           callback.apply(this, args)
  32.         }, delay)
  33.       }
  34.     }
  35.     const scrollEvent = (event) => {
  36.       let nowDate = Date.now()
  37.       console.log("触发了滚动事件", (nowDate - lastTime) / 1000);
  38.       lastTime = nowDate
  39.     }
  40.     container.addEventListener("scroll", debounce(scrollEvent, 500))
  41.   </script>
  42. </body>

如果一直滚动，滚动事件不会执行，只有在停止滚动了超过间隔事件0.5秒后才会执行滚动事件。

服务器的反向代理

创建一个端口为8888的服务器，代理到9999

首先创建一个8888服务器

  1. let http = require("http");
  2. let httpProxy = require("http-proxy");
  3. const proxy = httpProxy.createProxyServer();
  4. const server = http.createServer((req, res) => {
  5.   proxy.web(req, res, {
  6.     target: "http://localhost:9999",
  7.   });
  8. });
  9. server.listen(8888, () => console.log(8888));

创建一个9999服务器

  1. let http = require("http");
  2. const server = http.createServer((req, res) => {
  3.   res.write("9999");
  4.   res.end();
  5. });
  6. server.listen(9999, () => console.log(9999));

访问localhost:8888服务器,页面内容显示9999。此为服务端反向代理的一种形式

代理模式和适配器模式、装饰器模式的区别

  • 代理模式和适配器模式对比，适配器模式提供不同接口，代理模式提供一模一样的接口
  • 代理模式和装饰器模式，装饰器模式原来的功能不变，还可以使用。代理模式改变了原来的功能。