JavaScript设计模式 -- 代理模式

07-11 1397阅读

代理模式

代理模式，由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介作用

（图片来源网络，侵删）

当一个复杂对象的多份副本存在的时候，代理模式可以结合享元模式减少内存用量，典型做法就是在创建要给复杂对象以及多个代理者，每个代理者会引用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使用JavaScript伪协议。发送referer的js请求。

referer

Referer 请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。
在以下两种情况下，Referer 不会被发送：
- 来源页面采用的协议为表示本地文件的 “file” 或者 “data” URI；
- 当前请求页面采用的是非安全协议，而来源页面采用的是安全协议（HTTPS）。
- Referer:

VPS购买请点击我