前端23种设计模式之代理模式
2020/6/15 11:55:26
本文主要是介绍前端23种设计模式之代理模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
传送地址:
前端设计模式之工厂模式
上一篇,我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们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) 复制代码
此方法可以继续拓展例如根据存储的类型来做区分
附加信息
本文是针对设计模式中的代理模式,根据自己的理解写的博文
后面的设计模式博文会尽可能的结合项目实战进行分析,有任何疑问、见解可随时与我沟通,不仅局限技术沟通,斗图吹牛都可
关于前端早早聊大会
前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会,计划 2020 年办 >= 15 期,由前端早早聊与掘金联合举办,前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。
你的支持,是早早聊办下去的唯一动力!
点击保存下图,转发朋友圈即可,越多人参与,越多讲师愿意来分享!
还想听哪方面的分享,直接加 Scott 微信: codingdreamer 提需求吧!
6 月 20 日举办第十届 - 前端跨端跨栈,报名请戳:www.huodongxing.com/go/tl10 ,海报及讲师行程如下:
6 月 27 日举办第十一届 - 女生前端职业发展专场,报名请戳:www.huodongxing.com/go/tl11 ,海报及讲师行程如下:
这篇关于前端23种设计模式之代理模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程