首页 > 分享 > 前端设计模式之代理模式上一篇，我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们23篇设计模式的链路，我

前端设计模式之代理模式上一篇，我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们23篇设计模式的链路，我

萌宠菠菠乐园
2024-11-28 18:08

这篇文章主要介绍前端设计模式中的代理模式。阐述了其定义，即给对象提供代理对象并控制对原对象的引用，如同生活中的中介。还说明了使用代理模式的原因，如中介隔离、遵循开闭原则扩展功能等，并通过宠物店等例子及项目实战（如代理请求读取本地缓存、埋点功能代理全局 fetch、处理缓存时间等）进行讲解。最后提供了完整 demo 地址。

关联问题: 代理模式有何作用前端还有哪些模式代理模式怎么实现

前言

传送地址：

前端设计模式之工厂模式

上一篇，我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们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

此例子是重写原生 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)

此方法可以继续拓展例如根据存储的类型来做区分