木灵鱼儿

木灵鱼儿

阅读：576

最后更新：2022/04/19/ 23:31:33

代理模式

目录

  1. 什么是代理模式？
  2. 代理模式常见的两种实现方式
  3. 为什么要使用代理而不是直接在源对象做修改呢？
  4. 代理与适配器和装饰器之间的区别
  5. 什么时候使用代理

什么是代理模式？

为一个对象提供一个替身对象（代理对象），以便对于源对象的控制和访问，某些时候我们没法直接引入源对象或者源对象不满足需要时，可以通过替身对象来进行中介和控制。

代理模式主要分为三个角色：客户端（我），代理类，目标类；

客户 ------> 源对象

客户 ------> 代理 -------> 源对象

比如说我有一个业务需求，我需要一个能自动过期数据的一个数据存储对象，那么从所有能存数据的对象中，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给手机用。

适配器不需要实现一样的接口。

装饰器

原来的接口还可以使用，我只是增强了被装饰者的某种功能，并不会改变调用方式。简单来说装饰器模式是增强了原有功能。

区别

代理模式与适配器之间意义上就完全不同，代理是生成一个源对象的代表，而适配器是客户端与目标对象的兼容，进行了一些适配操作。

代理模式和装饰器模式在结构上是差不多，都在内部含有一个源对象的引用，从而可以在任何时候操作目标对象，但是代理模式不一定是增强功能，它可以改变接口的功能。

什么时候使用代理

代理模式有很多种使用场景，但是在平时编程中，往往不需要预先去猜测是否需要使用代理模式，而是当真正发现不方便直接使用某个对象时，再来使用代理模式也不迟。

前端常见的一些使用场景：

  1. 保护代理
  2. 虚拟代理
  3. 缓存代理
  4. 数据响应式

保护代理

我们不希望对象的某些属性被使用，或者不满足要求时被使用，通过代理的方式进行过滤，这种被称为保护代理。

虚拟代理

在程序中往往会有一个代价很昂贵的操作，我们可以设置一个虚拟代理，虚拟代理会在真实调用的时候才执行对应的操作，可以理解为一种预占位，比如我们图片的懒加载。

懒加载会预先使用一张菊花图进行占位，当图片真正被浏览时进行链接替换，触发加载。


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的响应式对象就是通过代理模式实现对象的监听，但是它为了实现通知功能，又整合了发布订阅者模式。

文章分类 设计模式
文章标签 设计模式代理模式
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 18获得阅读 576

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 18
文章被阅读 576

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译