前端必须懂的设计模式代理模式

　　动机由于一个对象不想或者不能直接引用另外一个对象，所以需要通过通过一个称之为＂代理＂的第三者来实现间接引用 代理模式就是为目标对象创造一个代理对象，在客户端和目标对象之间起到中介的作用 这样就可以在代理对象里增加一些逻辑判断、调用前或调用后执行一些操作，从而实现了扩展目标的功能 并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务
　　通过引入一个新的对象（如小图片和远程代理对象）来实现对真实对象的操作或者将新的对 象作为真实对象的一个替身，这种实现机制即为代理模式，通过引入代理对象来间接访问一 个对象，这就是代理模式的模式动机。 定义
　　代理模式(Proxy Pattern) ：给某一个对象提供一个代理，并由代理对象控制对原对象的引用。代理模式的英 文叫做Proxy或Surrogate，它是一种对象结构型模式。 生活中的案例：
　　火车票代购、房产中介、律师、海外代购、明星经纪人 类图和时序图
　　代理模式包含如下角色： Subject: 抽象主题角色 Proxy: 代理主题角色 RealSubject: 真实主题角色 类图
　　时序图
　　一个例子-明星经纪人
　　abstract class Star {     abstract answerPhone(): void; }  class Angelababy extends Star {     public available: boolean = true;     answerPhone(): void {         console.log(＂你好,我是Angelababy.＂);     } } class AngelababyAgent extends Star {     constructor(private angelababy: Angelababy) {         super();     }     answerPhone(): void {         console.log(＂你好,我是Angelababy的经纪人.＂);         if (this.angelababy.available) {             this.angelababy.answerPhone();         }     } } let angelababyAgent = new AngelababyAgent(new Angelababy()); angelababyAgent.answerPhone(); 场景事件委托代理事件捕获指的是从document到触发事件的那个节点，即自上而下地去触发事件 事件冒泡是自下而上地去触发事件 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true为事件捕获；false为事件冒泡,默认false。
　　     
         
1
         
2
         
3
     
        虚拟代理(图片预加载)app.jslet express=require(＂express＂); let path=require(＂path＂) let app=express(); app.get(＂/images/loading.gif＂,function (req,res) {     res.sendFile(path.join(__dirname,req.path)); }); app.get(＂/images/:name＂,function (req,res) {     setTimeout(() => {         res.sendFile(path.join(__dirname,req.path));     }, 2000); }); app.get(＂/＂,function (req,res) {     res.sendFile(path.resolve(＂index.html＂)); }); app.listen(8080); index.html                                             背景1         背景2                                 虚拟代理(图片懒加载)当前可视区域的高度 window.innerHeight || document.documentElement.clientHeight 元素距离可视区域顶部的高度 getBoundingClientRect().top getBoundingClientRect DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的                                                                                                                                                                                                                                                                                                                                                                    缓存代理
　　有些时候可以用空间换时间 正整数的阶乘（factorial）
　　一个正整数的阶乘（factorial）是所有小于及等于该数的正整数的积，并且0的阶乘为1 const factorial = function f(num) {     if (num === 1) {         return 1;     } else {         return (num * f(num - 1));     } }  const proxy = function (fn) {     const cache = {};  // 缓存对象     return function (num) {         if (num in cache) {             return cache[num];   // 使用缓存代理         }         return cache[num] = fn.call(this, num);     } }  const proxyFactorial = proxy(factorial); console.log(proxyFactorial(5)); console.log(proxyFactorial(5)); console.log(proxyFactorial(5)); 斐波那契数列(Fibonacci sequence)
　　指的是这样一个数列：1、1、2、3、5、8、13、21、34。在数学上，斐波那契数列以如下被以递推的方法定义：F(1)=1,F(2)=1,F(n)=F(n-1)+F(n-2)（n>=3，n N*） let count = 0; function fib(n) {     count++;     return n <= 2 ? 1 : fib(n - 1) + fib(n - 2); } var result = fib(10); console.log(result, count);//55 110 let count = 0; const fibWithCache = (function () {     let cache = {};     function fib(n) {         count++;         if (cache[n]) {             return cache[n];         }         let result = n <= 2 ? 1 : fib(n - 1) + fib(n - 2);         cache[n] = result;         return result;     }     return fib; })(); var result = fibWithCache(10); console.log(result, count);//55 17 防抖代理通过防抖代理优化可以把多次请求合并为一次，提高性能 节流与防抖都是为了减少频繁触发事件回调 节流(Throttle)是在某段时间内不管触发了多少次回调都只认第一个，并在第一次结束后执行回调 防抖(Debounce)就是在某段时间不管触发了多少回调都只看最后一个 节流                                                           防抖                                                           防抖案例 -未防抖     
     
  
　　app.js let express=require(＂express＂); let app=express(); app.use(express.static(__dirname)); let todos=[     {id: 1,text: ＂a＂,completed: false},     {id: 2,text: ＂b＂,completed: false},     {id: 3,text: ＂c＂,completed: false}, ]; app.get(＂/todos＂,function (req,res) {     res.json(todos); }); app.get(＂/toggle/:id＂,function (req,res) {     let id=req.params.id;     todos = todos.map(item => {         if (item.id==id) {             item.completed=!item.completed;         }         return item;     });     res.json({code:0}); }); app.listen(8080); 防抖案例 -防抖
　　todos.html      
     
　　app.js app.get(＂/toggle/:ids＂,function (req,res) {     let ids=req.params.ids;     ids=ids.split(＂,＂).map(item=>parseInt(item));     todos = todos.map(item => {         if (ids.includes(item.id)) {             item.completed=!item.completed;         }         return item;     });     res.json({code:0}); }); 代理跨域正向代理正向代理的对象是客户端，服务器端看不到真正的客户端 通过公司代理服务器上网
　　反向代理反向代理的对象的服务端,客户端看不到真正的服务端 nginx代理应用服务器
　　proxy-server.js const http = require(＂http＂); const httpProxy = require(＂http-proxy＂); //创建一个代理服务 const proxy = httpProxy.createProxyServer(); //创建http服务器并监听8888端口 let server = http.createServer(function (req, res) {     //将用户的请求转发到本地9999端口上     proxy.web(req, res, {         target: ＂http://127.0.0.1:9999＂     });     //监听代理服务错误     proxy.on(＂error＂, function (err) {         console.log(err);     }); }); server.listen(8888, ＂0.0.0.0＂);
　　real-server.js const http = require(＂http＂); let server = http.createServer(function (req, res) {     res.end(＂9999＂); }); server.listen(9999, ＂0.0.0.0＂); 代理跨域nginx代理跨域 webpack-dev-server  代理跨域客户端代理跨域 当前的服务启动在origin(3000端口)上，但是调用的接口在target(4000端口)上 postMessage方法可以安全地实现跨源通信 otherWindow:其他窗口的一个引用 message:将要发送到其他window的数据message 将要发送到其他window的数据targetOrigin通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串＂*＂（表示无限制）或者一个URI otherWindow.postMessage(message, targetOrigin, [transfer]); data 从其他window中传递过来的对象 origin 调用postMessage时消息发送方窗口的origin source 对发送消息的窗口对象的引用 window.addEventListener(＂message＂, receiveMessage, false);
　　origin.js let express=require(＂express＂); let app=express(); app.use(express.static(__dirname)); app.listen(3000);
　　target.js let express = require(＂express＂); let app = express(); let bodyParser = require(＂body-parser＂); app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static(__dirname)); let users = []; app.post(＂/register＂, function (req, res) {     let body = req.body;     let target = body.target;     let callback = body.callback;     let username = body.username;     let password = body.password;     let user = { username, password };     let id = users.length == 0 ? 1 : users[users.length - 1].id + 1;     user.id = id;     users.push(user);     res.status(302);     res.header(＂Location＂, `${target}?callback=${callback}&args=${id}`);     res.end(); }); app.listen(4000);
　　reg.html                                             
　　target.html                                    $.proxy接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。 jQuery.proxy( function, context ) function为执行的函数，content为函数的上下文this值会被设置成这个object对象                                点我变红              function proxy(fn, context) {     return function () {        return fn.call(context, arguments);     } }  ProxyProxy 用于修改某些操作的默认行为 Proxy 可以理解成，在目标对象之前架设一层 拦截  ,外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来 代理  某些操作，可以译为代理器  Proxy defineProperty let wang={     name: ＂wanglaoshi＂,     age: 29,     height:165 } let wangMama=new Proxy(wang,{     get(target,key) {         if (key == ＂age＂) {             return wang.age-1;         } else if (key == ＂height＂) {             return wang.height-5;         }         return target[key];     },     set(target,key,val) {         if (key == ＂boyfriend＂) {             let boyfriend=val;             if (boyfriend.age>40) {                 throw new Error(＂太老＂);             } else if (boyfriend.salary<20000) {                 throw new Error(＂太穷＂);             } else {                 target[key]=val;                 return true;             }         }     } }); console.log(wangMama.age); console.log(wangMama.height); wangMama.boyfriend={     age: 41,     salary:3000 } Vue2和Vue3
　　Vue2 中的变化侦测实现对 Object 及 Array 分别进行了不同的处理,Object 使用了 Object.defineProperty API,Array使用了拦截器对 Array 原型上的能够改变数据的方法进行拦截。虽然也实现了数据的变化侦测，但存在很多局限 ，比如对象新增属性无法被侦测，以及通过数组下边修改数组内容，也因此在 Vue2 中经常会使用到 $set 这个方法对数据修改，以保证依赖更新。
　　Vue3 中使用了 es6 的 Proxy API对数据代理，没有像 Vue2 中对原数据进行修改，只是加了代理包装，因此首先性能上会有所改善。其次解决了 Vue2 中变化侦测的局限性，可以不使用 $set 新增的对象属性及通过下标修改数组都能被侦测到。 对比代理模式 VS 适配器模式
　　适配器提供不同接口，代理模式提供一模一样的接口 代理模式 VS 装饰器模式
　　装饰器模式原来的功能不变还可以使用，代理模式改变原来的功能