前言
传送地址：
上一篇，我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们23篇设计模式的链路，我们来了解一下代理模式在前端中的运用
代理模式
什么是代理模式？
代理模式的定义：代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。
为什么要使用代理模式
中介隔离作用：在某些情况下，一个客户类不想或者不能直接引用一个委托对象，而代理类对象可以在客户类和委托对象之间起到中介的作用，其特征是代理类和委托类实现相同的接口。
开闭原则，增加功能：代理类除了是客户类和委托类的中介之外，我们还可以通过给代理类增加额外的功能来扩展委托类的功能，这样做我们只需要修改代理类而不需要再修改委托类，符合代码设计的开闭原则。代理类主要负责为委托类预处理消息、过滤消息、把消息转发给委托类，以及事后对返回结果的处理等。代理类本身并不真正实现服务，而是同过调用委托类的相关方法，来提供特定的服务。真正的业务功能还是由委托类来实现，但是可以在业务功能执行的前后加入一些公共的服务。例如我们想给项目加入缓存、日志这些功能，我们就可以使用代理类来完成，而没必要打开已经封装好的委托类
举个栗子
既然提到了中介，那就不得不说，在我们日常生活中，充满了各种中介，例如房产中介、4s店、购票处等。
其实上一篇的宠物店也算是一种中介，因为所有的宠物来源都来不会直接在商店产生，他们有的来自于野外，有的来自于养殖场等。
既然我们要把生意做大做强，那我们这个时候就要通过中间商来帮助我们将生意扩大。
class headPet { // 宠物总店提供了最基础的出售，回购宠物的服务
sellPet(name) { // 出售宠物
console.log('出售一只宠物', name)
}
desert(name) { // 遗弃宠物
console.log('遗弃一只宠物', name)
}
}
class subPet extends headPet { // 宠物分店，我们提供搭配服务，以便更好地卖宠物
constructor() {
super()
}
sell(name) { // 出售宠物
this.sellPet(name)
}
sellPetFood(name) { // 购买宠物食物送宠物活动
console.log('搭配了一大波食粮')
this.sellPet(name)
}
sellPetCage(name) { // 购买宠物笼子送宠物活动
console.log('搭配一个大笼子')
this.sellPet(name)
}
}
const subPet1 = new subPet()
subPet1.sell('tom')
subPet1.sellPetFood('tom')
subPet1.sellPetCage('tom')
从上面简单的程序，我们可以看到，作为分店，实际上卖出宠物的时候，还搭配了各种服务，比如宠物食粮、宠物笼以便于我们更好地去出售宠物，最后我们还是调用了总店的服务，但分店还提供了额外的服务，使得我们的生意能够扩大，这是分店赋予总店的能力提升。
项目实战
接下来，我们使用代理模式的思想在项目中进行实战演练。
代理请求-读取本地缓存
function ajax(params) { // 实际发送请求方法
console.log(`发送请求${params}`)
return params + Math.random()
}
const storage = new Map();
function cache(params) { // 缓存模式
if (storage.has(params)) {
return storage.get(params)
}
const value = ajax(params)
storage.set(params, value)
return value
}
function proxyAjax(params) { // 代理ajax请求
return cache(params)
}
console.log(proxyAjax(1)) // 发送参数为1的请求
console.log(proxyAjax(1)) // 发送相同参数为1的请求，cache读取到缓存，所以不再调用ajax方法，直接返回结果
console.log(proxyAjax(2)) // 发送参数为2的请求，此时未读取到缓存，直接调用ajax方法，从后台请求
上述代码不难看出，我们代理了一层 ajax 请求方法，加入了一道 cache 层，这样可以帮助我们在相同参数的请求情况下，不去调用 http 请求，节约部分请求时间跟资源。
建议在项目实际使用中，尽量根据业务来判断，不要随意的缓存所有请求，一般缓存 get 请求或者数据不易变化的数据请求。
另外可以在此功能中继续拓展，加入缓存时间概念，这样可以在一定时间内使得相同参数的请求可以直接从缓存读取。
埋点功能-代理全局fetch
const oldFetch = window.fetch;
function newFetch(url, init) { // 重新fetch方法，代理fetch本身的功能，添加埋点功能
const { method = 'GET', body } = init || {};
const fetchObj = {
url: url,
method: method,
body: body,
start: performance.now(),
}
ajaxEventTrigger.call(fetchObj, AJAX_START); // 自定义埋点监听方法
return oldFetch.apply(this, arguments).then(function (response) {
fetchObj.end = performance.now();
if (response.ok) {
ajaxEventTrigger.call(fetchObj, AJAX_END)
} else {
ajaxEventTrigger.call(fetchObj, AJAX_ERROR)
}
return response
}).catch(function (error) {
fetchObj.end = performance.now();
fetchObj.error = error
ajaxEventTrigger.call(fetchObj, AJAX_ERROR);
throw error
})
}
window.fetch = newFetch;
此例子是重写原生 fetch 方法，用类似代理模式的方法，代理全局的 fetch 方法，进行请求埋点
参考此例子可以重写小程序的生命周期函数等其他功能，添加自定义埋点事件，具体在接下来的埋点性能博客会具体实战演练
缓存代理-处理缓存时间
class Storage {
constructor(props) { // 根据类型跟缓存时间，初始化缓存方法
const { type, time } = props
this.type = type
this.time = time
this.storageType = {
local: 'localStorage',
session: 'sessionStorage'
}
}
setItem(key, value) { // 代理原生缓存方法，添加缓存时间
window[this.storageType[this.type]].setItem(key, JSON.stringify({
value,
time: new Date().getTime()
}));
}
getItem(key) { // 代理原生获取缓存方法，根据缓存时间，判断数据是否过期
try {
const { time, value } = JSON.parse(window[this.storageType[this.type]].getItem(key));
const now = new Date().getTime()
if (now > time + this.time) {
window[this.storageType[this.type]].removeItem(key);
return null
} else {
return value
}
} catch (e) {
return null
}
}
}
const local = new Storage({ type: 'local', time: 30000 }) // 初始化localStorage,添加5分钟缓存时效
const session = new Storage({ type: 'session', time: 30000 }) // 初始化sessionStorage,添加5分钟缓存时效
local.setItem(1, 2)
local.getItem(1)
session.setItem(3, 4)
session.getItem(3)
此方法可以继续拓展例如根据存储的类型来做区分
附加信息
本文是针对设计模式中的代理模式，根据自己的理解写的博文
后面的设计模式博文会尽可能的结合项目实战进行分析，有任何疑问、见解可随时与我沟通，不仅局限技术沟通，斗图吹牛都可
