学习JavaScript设计模式第十一篇：深入理解代理模式

代理模式&＃xff08;Proxy Pattern&＃xff09;又称委托模式&＃xff0c;它为目标对象创造了一个代理对象&＃xff0c;以控制对目标对象的访问。

代理模式把代理对象插入到访问者和目标对象之间&＃xff0c;从而为访问者对目标对象的访问引入一定的间接性。正是这种间接性&＃xff0c;给了代理对象很多操作空间&＃xff0c;比如在调用目标对象前和调用后进行一些预操作和后操作&＃xff0c;从而实现新的功能或者扩展目标的功能。

1. 你曾见过的代理模式

明星总是有个助理&＃xff0c;或者说经纪人&＃xff0c;如果某导演来请这个明星演出&＃xff0c;或者某个品牌来找明星做广告&＃xff0c;需要经纪人帮明星做接洽工作。而且经纪人也起到过滤的作用&＃xff0c;毕竟明星也不是什么电影和广告都会接。类似的场景还有很多&＃xff0c;再比如领导和秘书…&＃xff08;emmm&＃xff09;。

再看另一个例子。打官司是件非常麻烦的事&＃xff0c;包括查找法律条文、起草法律文书、法庭辩论、签署法律文件、申请法院执行等等流程。此时&＃xff0c;当事人就可聘请代理律师来完成整个打官司的所有事务。当事人只需与代理律师签订全权委托协议&＃xff0c;那么整个打官司的过程&＃xff0c;当事人都可以不用出现。法院的一些复杂事务都可以通过代理律师来完成&＃xff0c;而法院需要当事人完成某些工作的时候&＃xff0c;比如出庭&＃xff0c;代理律师才会通知当事人&＃xff0c;并为当事人出谋划策。

在类似的场景中&＃xff0c;有以下特点&＃xff1a;

1. 导演/法院&＃xff08;访问者&＃xff09;对明星/当事人&＃xff08;目标&＃xff09;的访问都是通过经纪人/律师&＃xff08;代理&＃xff09;来完成&＃xff1b;

2. 经纪人/律师&＃xff08;代理&＃xff09;对访问有过滤的功能&＃xff1b;

2. 实例的代码实现

// 明星
var SuperStar &＃61; {name: &＃39;小鲜肉&＃39;,playAdvertisement: function(ad) {console.log(ad)}
}// 经纪人
var ProxyAssistant &＃61; {name: &＃39;经纪人张某&＃39;,playAdvertisement: function(reward, ad) {// 如果报酬超过100Wif (reward > 1000000) { console.log(&＃39;没问题&＃xff0c;我们小鲜肉最喜欢拍广告了&＃xff01;&＃39;);SuperStar.playAdvertisement(ad);} else{console.log(&＃39;没空&＃xff0c;滚&＃xff01;&＃39;);}}
}ProxyAssistant.playAdvertisement(10000, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没空&＃xff0c;滚


这里我们通过经纪人的方式来和明星取得联系&＃xff0c;经纪人会视条件过滤一部分合作请求。

我们可以升级一下&＃xff0c;比如如果明星没有档期的话&＃xff0c;可以通过经纪人安排档期&＃xff0c;当明星有空的时候才让明星来拍广告。这里通过 Promise 的方式来实现档期的安排&＃xff1a;

// 明星
const SuperStar &＃61; {name: &＃39;小鲜肉&＃39;,playAdvertisement(ad) {console.log(ad);}
}// 经纪人
const ProxyAssistant &＃61; {name: &＃39;经纪人&＃39;,scheduleTime() {return new Promise((resolve, reject) &＃61;> {setTimeout(() &＃61;> {console.log(&＃39;小鲜肉有空了&＃39;);// 发现明星有空了resolve();}, 2000) })},playAdvertisement(reward, ad) {// 如果报酬超过100Wif (reward > 1000000) { console.log(&＃39;没问题&＃xff0c;我们小鲜肉最喜欢拍广告了&＃39;)// 安排上了ProxyAssistant.scheduleTime().then(() &＃61;> SuperStar.playAdvertisement(ad))} else{console.log(&＃39;没空&＃xff0c;滚&＃39;);}}
}ProxyAssistant.playAdvertisement(10000, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没空&＃xff0c;滚ProxyAssistant.playAdvertisement(1000001, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没问题&＃xff0c;我们小鲜肉最喜欢拍广告了
// 小鲜肉有空了
// 纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸


这里就简单实现了经纪人对请求的过滤&＃xff0c;对明星档期的安排&＃xff0c;实现了一个代理对象的基本功能。

3. 代理模式的概念

对于上面的例子&＃xff0c;明星就相当于被代理的目标对象&＃xff08;Target&＃xff09;&＃xff0c;而经纪人就相当于代理对象&＃xff08;Proxy&＃xff09;&＃xff0c;希望找明星的人是访问者&＃xff08;Visitor&＃xff09;&＃xff0c;他们直接找不到明星&＃xff0c;只能找明星的经纪人来进行业务商洽。主要有以下几个概念&＃xff1a;

1. Target&＃xff1a;目标对象&＃xff0c;也是被代理对象&＃xff0c;是具体业务的实际执行者&＃xff1b;

2. Proxy&＃xff1a; 代理对象&＃xff0c;负责引用目标对象&＃xff0c;以及对访问的过滤和预处理&＃xff1b;

ES6 原生提供了  Proxy 构造函数&＃xff0c;这个构造函数让我们可以很方便地创建代理对象&＃xff1a;

var proxy &＃61; new Proxy(target, handler);

参数中 target 是被代理对象&＃xff0c;handler 用来设置代理行为。

这里使用 Proxy 来实现一下上面的经纪人例子&＃xff1a;

// 明星
const SuperStar &＃61; {name: &＃39;小鲜肉&＃39;,// 档期标识位&＃xff0c;false-没空&＃xff0c;true-有空scheduleFlag: false, playAdvertisement(ad) {console.log(ad)}
}// 经纪人
const ProxyAssistant &＃61; {name: &＃39;经纪人&＃39;,scheduleTime(ad) {// 在这里监听 scheduleFlag 值的变化const schedule &＃61; new Proxy(SuperStar, { set(obj, prop, val) {if (prop !&＃61;&＃61; &＃39;scheduleFlag&＃39;) {return};// 小鲜肉现在有空了if (obj.scheduleFlag &＃61;&＃61;&＃61; false && val &＃61;&＃61;&＃61; true) { obj.scheduleFlag &＃61; true;// 安排上了obj.playAdvertisement(ad); }}});setTimeout(() &＃61;> {console.log(&＃39;小鲜鲜有空了&＃39;);// 明星有空了schedule.scheduleFlag &＃61; true }, 2000)},playAdvertisement(reward, ad) {// 如果报酬超过100Wif (reward > 1000000) { console.log(&＃39;没问题&＃xff0c;我们小鲜肉最喜欢拍广告了&＃39;)ProxyAssistant.scheduleTime(ad);} else{console.log(&＃39;没空&＃xff0c;滚&＃xff01;&＃39;);}}
}ProxyAssistant.playAdvertisement(10000, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没空&＃xff0c;滚
ProxyAssistant.playAdvertisement(1000001, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没问题&＃xff0c;我们小鲜肉最喜欢拍广告了
// 小鲜肉有空了
// 纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸


在 ES6 之前&＃xff0c;一般是使用 Object.defineProperty 来完成相同的功能&＃xff0c;我们可以使用这个 API 改造一下&＃xff1a;

// 明星
const SuperStar &＃61; {name: &＃39;小鲜肉&＃39;,// 档期标识位&＃xff0c;false-没空&＃xff0c;true-有空scheduleFlag: false, playAdvertisement(ad) {console.log(ad);}
}// 经纪人
const ProxyAssistant &＃61; {name: &＃39;经纪人&＃39;,scheduleTime(ad) {// 在这里监听 scheduleFlag 值的变化Object.defineProperty(SuperStar, &＃39;scheduleFlag&＃39;, { get() {return SuperStar.scheduleFlag},set(val) {if (SuperStar.scheduleFlag &＃61;&＃61;&＃61; false && val &＃61;&＃61;&＃61; true) { // 小鲜肉现在有空了 SuperStar.scheduleFlag &＃61; true;// 安排上了SuperStar.playAdvertisement(ad); }}});setTimeout(() &＃61;> {console.log(&＃39;小鲜肉有空了&＃39;);SuperStar.scheduleFlag &＃61; true;}, 2000) },playAdvertisement(reward, ad) {// 如果报酬超过100Wif (reward > 1000000) { console.log(&＃39;没问题&＃xff0c;我们小鲜肉最喜欢拍广告了&＃39;);ProxyAssistant.scheduleTime(ad);} else{console.log(&＃39;没空&＃xff0c;滚&＃39;);}}
}ProxyAssistant.playAdvertisement(10000, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没空&＃xff0c;滚ProxyAssistant.playAdvertisement(1000001, &＃39;纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸&＃39;);
// 没问题&＃xff0c;我们小鲜肉最喜欢拍广告了
// 小鲜肉有空了
// 纯蒸酸牛奶&＃xff0c;味道纯纯&＃xff0c;尽享纯蒸


4. 代理模式在实战中的应用

4.1. 拦截器

使用代理模式代理对象的访问的方式&＃xff0c;一般又被称为拦截器。

拦截器的思想在实战中应用非常多&＃xff0c;比如我们在项目中经常使用 Axios 的实例来进行 HTTP 的请求&＃xff0c;使用拦截器 interceptor 可以提前对 request 请求和 response 返回进行一些预处理&＃xff0c;比如&＃xff1a;

1. request 请求头的设置&＃xff0c;和 COOKIE 信息的设置&＃xff1b;

2. 权限信息的预处理&＃xff0c;常见的比如验权操作或者 Token 验证&＃xff1b;

3. 数据格式的格式化&＃xff0c;比如对组件绑定的 Date 类型的数据在请求前进行一些格式约定好的序列化操作&＃xff1b;

4. 空字段的格式预处理&＃xff0c;根据后端进行一些过滤操作&＃xff1b;

5. response 的一些通用报错处理&＃xff0c;比如使用 Message 控件抛出错误&＃xff1b;

除了 HTTP 相关的拦截器之外&＃xff0c;还有 vue-router、react-router 路由跳转的拦截器&＃xff0c;可以进行一些路由跳转的预处理等操作。以 vue-router 的路由全局前置守卫为例&＃xff1a;

const router &＃61; new VueRouter({ ... })router.beforeEach((to, from, next) &＃61;> {console.log(&＃39;beforeRouteEnter&＃39;);next();
})


也许你会有疑问&＃xff0c;拦截器看起来似乎和装饰者模式很像&＃xff0c;但是要注意装饰者模式和代理模式的区别&＃xff0c;代理模式控制访问者对目标对象的访问&＃xff0c;而装饰者模式只给目标对象添加功能&＃xff0c;原有功能不变且可直接使用。Axios 拦截器是可以取消请求的&＃xff0c;vue-router 路由拦截器也可以进行路由截停和重定向等等复杂操作&＃xff0c;这些场景下&＃xff0c;无疑是代理模式&＃xff0c;因为这里的拦截器控制了对目标对象的访问&＃xff0c;如果没有进行访问控制而只进行消息预处理和后处理&＃xff0c;那么则可以当作是装饰者模式。

4.2. 前端框架的数据响应式化

现在的很多前端框架或者状态管理框架都使用上面介绍的 Object.defineProperty 和 Proxy 来实现数据的响应式化&＃xff0c;比如 Vue、Mobx、AvalonJS 等&＃xff0c;Vue 2.x 与 AvalonJS 使用前者&＃xff0c;而 Vue 3.x 与 Mobx 5.x 使用后者。

Vue 2.x 中通过 Object.defineProperty 来劫持各个属性的 setter/getter&＃xff0c;在数据变动时&＃xff0c;通过发布-订阅模式发布消息给订阅者&＃xff0c;触发相应的监听回调&＃xff0c;从而实现数据的响应式化&＃xff0c;也就是数据到视图的双向绑定。

为什么 Vue 2.x 到 3.x 要从 Object.defineProperty 改用 Proxy 呢&＃xff0c;是因为前者的一些局限性&＃xff0c;导致的以下缺陷&＃xff1a;

1. 无法监听利用索引直接设置数组的一个项&＃xff0c;例如&＃xff1a;vm.items[indexOfItem] &＃61; newValue&＃xff1b;

2. 无法监听数组的长度的修改&＃xff0c;例如&＃xff1a;vm.items.length &＃61; newLength&＃xff1b;

3. 无法监听 ES6 的 Set、WeakSet、Map、WeakMap 的变化&＃xff1b;

4. 无法监听 Class 类型的数据&＃xff1b;

5. 无法监听对象属性的新增或者删除&＃xff1b;

除此之外还有性能上的差异&＃xff0c;基于这些原因&＃xff0c;Vue 3.x 改用 Proxy 来实现数据监听了。当然缺点就是对 IE 用户的不友好&＃xff0c;兼容性敏感的场景需要做一些取舍。

4.3. 缓存代理

在高阶函数的文章中&＃xff0c;就介绍了备忘模式&＃xff0c;备忘模式就是使用缓存代理的思想&＃xff0c;将复杂计算的结果缓存起来&＃xff0c;下次传参一致时直接返回之前缓存的计算结果。

4.4. 保护代理和虚拟代理

有的书籍中着重强调代理的两种形式&＃xff1a;保护代理和虚拟代理&＃xff1a;

1. 保护代理 &＃xff1a;当一个对象可能会收到大量请求时&＃xff0c;可以设置保护代理&＃xff0c;通过一些条件判断对请求进行过滤&＃xff1b;

2. 虚拟代理 &＃xff1a;在程序中可以能有一些代价昂贵的操作&＃xff0c;此时可以设置虚拟代理&＃xff0c;虚拟代理会在适合的时候才执行操作。

保护代理其实就是对访问的过滤&＃xff0c;之前的经纪人例子就属于这种类型。

而虚拟代理是为一个开销很大的操作先占位&＃xff0c;之后再执行&＃xff0c;比如&＃xff1a;

1. 一个很大的图片加载前&＃xff0c;一般使用菊花图、低质量图片等提前占位&＃xff0c;优化图片加载导致白屏的情况&＃xff1b;

2. 现在很流行的页面加载前使用 骨架屏 来提前占位&＃xff0c;很多 WebApp 和 NativeApp 都采用这种方式来优化用户白屏体验&＃xff1b;

4.5. 正向代理与反向代理

还有个经常用的例子是反向代理&＃xff08;Reverse Proxy&＃xff09;&＃xff0c;反向代理对应的是正向代理&＃xff08;Forward Proxy&＃xff09;&＃xff0c;他们的区别是&＃xff1a;

1. 正向代理&＃xff1a; 一般的访问流程是客户端直接向目标服务器发送请求并获取内容&＃xff0c;使用正向代理后&＃xff0c;客户端改为向代理服务器发送请求&＃xff0c;并指定目标服务器&＃xff08;原始服务器&＃xff09;&＃xff0c;然后由代理服务器和原始服务器通信&＃xff0c;转交请求并获得的内容&＃xff0c;再返回给客户端。正向代理隐藏了真实的客户端&＃xff0c;为客户端收发请求&＃xff0c;使真实客户端对服务器不可见&＃xff1b;

2. 反向代理&＃xff1a; 与一般访问流程相比&＃xff0c;使用反向代理后&＃xff0c;直接收到请求的服务器是代理服务器&＃xff0c;然后将请求转发给内部网络上真正进行处理的服务器&＃xff0c;得到的结果返回给客户端。反向代理隐藏了真实的服务器&＃xff0c;为服务器收发请求&＃xff0c;使真实服务器对客户端不可见。

反向代理一般在处理跨域请求的时候比较常用&＃xff0c;属于服务端开发人员的日常操作&＃xff0c;另外在缓存服务器、负载均衡服务器等等场景也是使用到代理模式的思想。

5. 代理模式的优缺点

代理模式的主要优点有&＃xff1a;

1. 代理对象在访问者与目标对象之间可以起到 中介和保护目标对象 的作用&＃xff1b;

2. 代理对象可以扩展目标对象的功能&＃xff1b;

3. 代理模式能将访问者与目标对象分离&＃xff0c;在一定程度上降低了系统的耦合度&＃xff0c;如果我们希望适度扩展目标对象的一些功能&＃xff0c;通过修改代理对象就可以了&＃xff0c;符合开闭原则&＃xff1b;

代理模式的缺点主要是增加了系统的复杂度&＃xff0c;要斟酌当前场景是不是真的需要引入代理模式&＃xff08;十八线明星就别请经纪人了&＃xff09;。

6. 其他相关模式

很多其他的模式&＃xff0c;比如状态模式、策略模式、访问者模式其实也是使用了代理模式&＃xff0c;包括在之前高阶函数处介绍的备忘模式&＃xff0c;本质上也是一种缓存代理。

6.1. 代理模式与适配器模式

代理模式和适配器模式都为另一个对象提供间接性的访问&＃xff0c;他们的区别&＃xff1a;

1. 适配器模式&＃xff1a;主要用来解决接口之间不匹配的问题&＃xff0c;通常是为所适配的对象提供一个不同的接口&＃xff1b;

2. 代理模式&＃xff1a;提供访问目标对象的间接访问&＃xff0c;以及对目标对象功能的扩展&＃xff0c;一般提供和目标对象一样的接口&＃xff1b;

6.2. 代理模式与装饰者模式

装饰者模式实现上和代理模式类似&＃xff0c;都是在访问目标对象之前或者之后执行一些逻辑&＃xff0c;但是目的和功能不同&＃xff1a;

1. 装饰者模式&＃xff1a;目的是为了方便地给目标对象添加功能&＃xff0c;也就是动态地添加功能&＃xff1b;

2. 代理模式&＃xff1a;主要目的是控制其他访问者对目标对象的访问&＃xff1b;

推荐阅读&＃xff1a;

1. Vue项目骨架屏注入实践

2. Proxy - Javascript | MDN

3. Object.defineProperty() - Javascript | MDN