木灵鱼儿
阅读:821
代理模式
目录
- 什么是代理模式?
- 代理模式常见的两种实现方式
- 为什么要使用代理而不是直接在源对象做修改呢?
- 代理与适配器和装饰器之间的区别
- 什么时候使用代理
什么是代理模式?
为一个对象提供一个替身对象(代理对象),以便对于源对象的控制和访问,某些时候我们没法直接引入源对象或者源对象不满足需要时,可以通过替身对象来进行中介和控制。
代理模式主要分为三个角色:客户端(我),代理类,目标类;
客户 ------> 源对象
客户 ------> 代理 -------> 源对象
比如说我有一个业务需求,我需要一个能自动过期数据的一个数据存储对象,那么从所有能存数据的对象中,map是最佳的,因为它有has,size,delete等方便操作的api,而且还能将对象作为key,但是呢,map本身并没有自动删除过期数据的功能,此时我们是不是命中了上面所说的:源对象不满足需要时这个情况。
我们有必要再去造一个数据存储的类吗?没必要吧,有时候也没有这个能力,那么我么就可以通过增加一个代理层的方式,去实现我们的功能,我们代理map对象所有操作方法,在set操作时存储一个时间戳,在get操作的时候判断这个时间戳是否超时,超时就删除,然后再通过映射或者直接操作源对象来返回相应获取结果。
是不是就可以很好的实现这个功能。具体逻辑代码可以参考这个:https://codepen.io/mulingyuer/pen/LYegeVq
代理模式常见的两种实现方式
按照代理创建的时期来区分,可以分为静态代理和动态代理
静态代理
静态代理就是我们手动的去实现一个代理类,需要满足源对象所用到的api,比如有一个对象存在show方法,那么我们也需要手动实现一个名为show的方法。这也是比较简单的逻辑思维。
缺点:由于静态代理是针对某一个类或者对象的,我们不得不手动手动一一实现相对应的接口,当需要代理的东西存在很多个时,就得手动写多个代理类,增加了工作量维护成本,假如有一个对象他有200个接口,工作量就爆炸了,就算你努力写了200个接口的代理,过段时间源对象接口改动了,你还得来代理这再改一遍,刺激的一批。
上面的超时删除的类就是一个静态代理
动态代理
动态代理相对应静态代理,它不需要预先为源对象实现对应的接口,而是在运行时通过某种手段拿到客户调用的接口,从而进行拦截处理。
具体实现js上很难去说明,但是我们es6的Proxy类就是一种动态代理。
const proxy = new Proxy(target,handler);
target为我们的源对象
handler也是一个对象,用来定制拦截行为。
参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
动态代理就是对静态代理的一种功能补足,动态在写法上相对于静态会复杂一些。
为什么要使用代理而不是直接在源对象做修改呢?
以上面那个超时删除的类为例子,单独的map对象是不是很纯粹?它只负责存储,而我们超时自动删除是属于业务逻辑,如果map被增加了超时删除的逻辑。
第一是不符合我们的单一职责的设计原则。
第二是当一个对象承担了多项职责,就意味着这个对象将变得巨大,引起它变化的原因就可能会有多个,bug几率也会增大,而且map是最基础的对象,如果改动了,很明显会对整个代码环境产生不可预估的影响。
第三是违反了开放封闭原则,对修改封闭,对扩展开放。
还有一点,当我们书写了一个优秀的代理时,在很久以后业务逻辑可能发生变化,我们不需要这个功能了,此时移除代理,改用源对象并不会导致代码发生很大的改变,只是使用的对象从代理对象转为源对象而已。
代理与适配器和装饰器之间的区别
适配器
适配器是对两个不同的对象进行关联,把一个接口转换为客户端期待的接口,220v的插板是三孔的,手机是usb口的,电源适配器插插线板转成usb给手机用。
适配器不需要实现一样的接口。
装饰器
原来的接口还可以使用,我只是增强了被装饰者的某种功能,并不会改变调用方式。简单来说装饰器模式是增强了原有功能。
区别
代理模式与适配器之间意义上就完全不同,代理是生成一个源对象的代表,而适配器是客户端与目标对象的兼容,进行了一些适配操作。
代理模式和装饰器模式在结构上是差不多,都在内部含有一个源对象的引用,从而可以在任何时候操作目标对象,但是代理模式不一定是增强功能,它可以改变接口的功能。
什么时候使用代理
代理模式有很多种使用场景,但是在平时编程中,往往不需要预先去猜测是否需要使用代理模式,而是当真正发现不方便直接使用某个对象时,再来使用代理模式也不迟。
前端常见的一些使用场景:
- 保护代理
- 虚拟代理
- 缓存代理
- 数据响应式
保护代理
我们不希望对象的某些属性被使用,或者不满足要求时被使用,通过代理的方式进行过滤,这种被称为保护代理。
虚拟代理
在程序中往往会有一个代价很昂贵的操作,我们可以设置一个虚拟代理,虚拟代理会在真实调用的时候才执行对应的操作,可以理解为一种预占位,比如我们图片的懒加载。
懒加载会预先使用一张菊花图进行占位,当图片真正被浏览时进行链接替换,触发加载。
class ImgLoad {
img: HTMLImageElement;
constructor(img: HTMLImageElement) {
this.img = img;
}
setSrc(src: string) {
this.img.src = src;
}
}
class PorxyImgLoad {
origin: ImgLoad;
constructor(img: HTMLImageElement) {
this.origin = new ImgLoad(img);
}
setSrc(src: string) {
this.origin.img.src = "菊花图.gif";
const img = new Image();
img.onload = () => {
this.origin.setSrc(src);
};
img.src = src;
}
}
缓存代理
比如将一些开销比较大的计算结果存储起来,下次再次使用时可以直接读取缓存结果,加快计算速度。一般用的比较少,了解一下就行了。
数据响应式
vue的响应式对象就是通过代理模式实现对象的监听,但是它为了实现通知功能,又整合了发布订阅者模式。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
行为模式:职责链模式
简介责任链模式:为了避免请求发送者与多个请求处理者耦合在一起,于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。举个例子,小明因为感冒需要请假,此时它的需要请3天,但是他的小组长只有1天的允许权限,小组长的领导项目经理有2天的权限,而能允许3天的只有老板,但是小明是新员工,所以它只能一步步的问,直到问到老板才成功请到了假期。但是如果小明的公司更大,那么它的审批流程就可能会更加复杂,如果人事流通了,说不定还得重新问一遍,有没有什么办法能方便一点呢?于是就有了职责链模式,它可以理解为一个申请表单,只要有领导在职...

行为模式:策略模式
简介策略模式: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。简单点来说就是,我现在有10个算法,可能会根据不同的状态使用不同的算法,一般的做法就是if else或者switch这种判断方式,这样的话就跟状态模式一样,后续新增的算法和状态判断又得套一层if判断,这样的话代码的可读性就下降,且维护起来比较麻烦。我们来看个代码例子:function calc(type: number, a: number, b: ...
行为模式:状态模式
简介状态模式:对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。简单点来说,我们在平时开发的过程中,会遇到一个对象中会判断一个“状态”的不同,从而会使用不同的行为(函数之类的调用),常见的做法就是if else或者switch这种判断方式,当我们一个状态有多种形式时,可能会产生大量的if else语句,这就不好维护了,如果每次新增一种状态,就得改动一次该对象,显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来,然后通过源对象进行组合使用,状态对象会持有源对象,当状态A发生改变时,会调用持有的源对象的设置状态方法,将...

行为模式:解释器模式(太难了,不一定正确)
简介解释器模式:给分析对象定义一个语言,并定义该语言的文法表示,再设计一个解析器来解释语言中的句子。因为是自定义的语言,所以它的语法表示肯定是有一些相似的地方,比如必须使用空格分割这种要求,或者使用其他特殊的字符。在这个基础上我们才能进行下一步,而不是说随便写个句子就可以的。举个简单的例子:我们博客编辑文章语言是markdown,而文法就是md中的各种语法,比如## 我是2级标题;这个就表示h2标签,这个规则就是文法,我们需要创建一个解释器来解释语法,说白了就是我们需要将各种文法组成的句子转换成html标签。文法:用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树,...

行为模式:备忘录模式
简介备忘录模式:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式,在ps中,每次操作的记录都会进行一次记录,用户可以自己选择需要回退到哪条记录,而备忘录模式,是一种能记录一个对象的内部状态,可以通过方法获取到之前保存的内部状态数据,从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据,然后通过谁去保存,谁去控制保存的数据,谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色:备忘录角色:专门存储内部状态数据的类,这个类的实例被管理者管理,被发起者...

行为模式:中介者模式
简介中介者模式:定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。我们来举个例子:机场的飞机降落起飞,都是需要通过塔台进行调度的,如果没有塔台的调度,5架飞机之间需要相互通信确认,以免出现问题,但是如果这么做,一定会出现问题,我们可以看下他们此时的关系网络。每一架飞机都要和其他4架飞机进行沟通通讯,如果这个关系网放在代码上去实现,这是非常难看的,这代码神仙看了都得摇头。而中介者就是为了解决这种网状的关系,通过增加一个中介对象,大家都通过中介对象进行通信,从而将飞机1对4的情况转为1对1的...

行为模式:观察者模式
简介观察者模式:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式。而我们前端vue的响应式原理其实就是观察者模式的实现,只不过他是完全解耦的发布订阅者模式;和基础的观察者模式实现上会有不同,原理都是一样的。观察者模式是为了将重要的部分与辅助部分进行解耦,我们举个例子:在前端中,我们的滚动条距离就可以理解为一个重要部分,我们监听了scroll事件,并在回调函数中处理了一条特殊操作,比如根据滚动的距离操作header元素显隐。此时这个代码量很少,我们知道scroll事件是不建议监听太多的,...
行为模式:迭代器模式
简介迭代器模式:提供一个对象来顺序访问聚合对象中的一系列数据,而不暴露聚合对象的内部表示。简单来说就是再程序设计中,对于一些自定义的数据结构对象,比如链表啊,或者系统提供的数据结构对象,他们的遍历方法通常会写在数据结构的类中,也就是说数据和遍历的方法是写在同一个类里面。这种方式不利于程序的扩展,因为如果要改动遍历的方法,就必须改动源数据,这违背了开闭原则。既然遍历的方法不能写在数据类中,那么将遍历的方法让客户实现不就好了,但是同样也是不可取的,如果交由客户去写,第一是会暴露很多不必要的属性给客户,第二是增加了客户端的使用负担。而迭代器模式很好的解决了这个问题,在迭代器模式中有以下几个角色...
行为模式:访问者模式
简介访问者模式:将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离,是行为类模式中最复杂的一种模式。有一点点抽象,前一句话的意思是指在写好一个类之后,这个类就基本上不需要改动了(只要需求不改),这其实就是为了解决类结构不变但操作处理逻辑易变的问题,把对数据的操作都封装到访问者类中,我们只需要调用不同的访问者,而无需改变改变结构类,实现了。简单来说就是将一些操作作为扩展分离出去, 这些扩展的功能可能现在没有,以后会有,我们无法知道以后的情况,于是...
行为模式:命令模式
简介命令模式是将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。举个简单的例子:我有一个饭店,共有五个厨师:A,B,C,D,E;每个厨师都会做不同的菜,但是我没有菜单,于是客人就必须知道我有几个厨师,他们分别会做什么菜,于是就会产生下面这些情况:客人1想吃青椒炒蛋,于是问了好几个厨师才知道C厨师会做,于是它通知C厨师做青椒炒蛋客人2想吃冒菜,于是他也问了好几个厨师,找到E厨师制作...更多你会发现客人与厨师耦合度非常之高,这显然不利于饭店的发展,然后我们想一下生活中的真实情况:每个饭店都...