JavaScript设计模式 -- 代理模式

代理模式

代理模式，由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介作用
当一个复杂对象的多份副本存在的时候，代理模式可以结合享元模式减少内存用量，典型做法就是在创建要给复杂对象以及多个代理者，每个代理者会引用yuan’b做法就是在创建要给复杂对象以及多个代理者，每个代理者会引用原本的复杂对象，而作用在代理者的运算会转送到原本的对象，一旦代理者不存在，复杂对象就会被移除

代理模式在前端开发中的应用场景

缓存代理

使用缓存代理可以缓存计算结果，避免重复的计算或请求

拦截器

使用代理对象可以拦截和处理请求，响应或时间，在实际开发中进场用于添加额外的逻辑，验证，日志等操作。

虚拟代理

使用虚拟代理可以延迟加载资源或者延迟执行昂贵的操作，提高页面的响应速度和用户体验。

保护代理

保护代理可以用来限制对敏感操作或数据的访问权限。可以使用保护代理来进行控制用户对特定功能的访问权限，需要登录才能访问到具体操作的功能或需求

正向代理

一般的访问流程都是客户端向目标服务器直接发起请求冰获取内容，使用正向代理，客户端向代理服务器发起请求，然后指定目标服务器，代理服务器和服务器进行通信。

反向代理

使用反向代理后，直接收到请求的服务器是代理服务器，然后将请求转发给内部网络上真正进行处理的服务器，得到的结果返回给客户端。反向代理隐藏了真实的服务器，为服务器收发请求，使真实服务器对客户端不可见。

代码

拦截器

const requestInterceptor = async(config) => {     config.headers = {         'Content-Type': 'application/json'     }     return config } const responseInterceptor = async(config) => {     if(response.status >= 400) {         console.error('Request failed')     }     return response } const sendRequest = async(url, config) => {     const updateConfig = await requestInterceptor(config)     const response = await fetch(url, updatedConfig)     const updatedResponse = await responseInterceptor(response)     return updatedResponse    } sendRequest('https://XXX.com/post', {     method: 'GET' }) 

缓存代理

缓存代理可以作为一些开销大的运算结果提供展示的存储，在下次运算的是偶，如果传递来的参数和之前一样，则可以返回前面存储的运算结果

class Calculator{     multiply(a, b) {         return a * b     } } class CachingProxy {     constructor() {         this.calculator = new Calculator()         this.cache = {}      }     multiply(a, b) {         const key = a * b          if(this.cache[key] === undefined) {             this.cache[key] = this.calculator.multiply(a, b)         }         return this.cache[key]     } } const proxy = new CachingProxy() const proxy = new CachingProxy(); console.log(proxy.multiply(2, 3)); // 第一次计算 console.log(proxy.multiply(2, 3)); // 从缓存中获取结果 console.log(proxy.multiply(4, 5)); // 新的乘法计算 console.log(proxy.multiply(4, 5)); // 从缓存中获取结果 

跨域

跨域是浏览器受同源策略的限制。不允许不同源的站点之间进行通信的操作。实际上就是代理模式的思想

JSONP

利用script标签的src属性不受同源策略的限制，将资源加载完成之后会被当成js脚本立即执行的特点。
代码如下

// 前端 var script = document.createElement('script') script.src = 'http://www.domain2.com:8080/login?callback=handleCallbace' document.head.appendchild(script) function handleCallbace(res) {     alert(JSON.stringify(res)) } 

// 服务端 handleCallback({"sucess": true}) 

jsonp的缺点

• 只支持get数据请求，不支持post请求
• jsonp会导致安全问题

jsonp安全

js资源加载的时候，会发送referer的特性 服务端判断referer是不是白名单。存在开发允许空referer，跨协议js是不会发送referer的，<iframe src="javascript:'<script src=http://attarck.com/jsonp></script>'"></iframe>代码里面iframe使用JavaScript伪协议。发送referer的js请求。

referer

Referer 请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。
在以下两种情况下，Referer 不会被发送：

• 来源页面采用的协议为表示本地文件的 “file” 或者 “data” URI；
• 当前请求页面采用的是非安全协议，而来源页面采用的是安全协议（HTTPS）。
• Referer: <url>