资讯专栏INFORMATION COLUMN

JavaScript 设计模式(三):代理模式

Keagan / 698人阅读

摘要:虚拟代理延迟执行虚拟代理的目的,是将开销大的运算延迟到需要时再执行。

</>复制代码

  1. 代理模式:为一个对象提供一个代用品或占位符,以便控制它的访问。

当我们不方便直接访问某个对象时,或不满足需求时,可考虑使用一个替身对象来控制该对象的访问。替身对象可对请求预先进行处理,再决定是否转交给本体对象。

生活小栗子:

代购;

明星经纪人;

和谐上网

经常 shopping 的同学,对代购应该不陌生。自己不方便直接购买或买不到某件商品时,会选择委托给第三方,让代购或黄牛去做购买动作。程序世界的代理者也是如此,我们不直接操作原有对象,而是委托代理者去进行。代理者的作用,就是对我们的请求预先进行处理或转接给实际对象。

模式特点

代理对象可预先处理请求,再决定是否转交给本体;

代理和本体对外显示接口保持一致性

代理对象仅对本体做一次包装

模式细分

虚拟代理(将开销大的运算延迟到需要时执行)

缓存代理(为开销大的运算结果提供缓存)

保护代理(黑白双簧,代理充当黑脸,拦截非分要求)

防火墙代理(控制网络资源的访问)

远程代理(为一个对象在不同的地址控件提供局部代表)

智能引用代理(访问对象执行一些附加操作)

写时复制代理(延迟对象复制过程,对象需要真正修改时才进行)

JavaScript 中常用的代理模式为 “虚拟代理” 和 “缓存代理”。

模式实现

</>复制代码

  1. 实现方式:创建一个代理对象,代理对象可预先对请求进行处理,再决定是否转交给本体,代理和本体对外接口保持一致性(接口名相同)。

</>复制代码

  1. // 例子:代理接听电话,实现拦截黑名单
  2. var backPhoneList = ["189XXXXX140"]; // 黑名单列表
  3. // 代理
  4. var ProxyAcceptPhone = function(phone) {
  5. // 预处理
  6. console.log("电话正在接入...");
  7. if (backPhoneList.includes(phone)) {
  8. // 屏蔽
  9. console.log("屏蔽黑名单电话");
  10. } else {
  11. // 转接
  12. AcceptPhone.call(this, phone);
  13. }
  14. }
  15. // 本体
  16. var AcceptPhone = function(phone) {
  17. console.log("接听电话:", phone);
  18. };
  19. // 外部调用代理
  20. ProxyAcceptPhone("189XXXXX140");
  21. ProxyAcceptPhone("189XXXXX141");

代理并不会改变本体对象,遵循 “单一职责原则”,即 “自扫门前雪,各找各家”。不同对象承担独立职责,不过于紧密耦合,具体执行功能还是本体对象,只是引入代理可以选择性地预先处理请求。例如上述代码中,我们向 “接听电话功能” 本体添加了一个屏蔽黑名单的功能(保护代理),预先处理电话接入请求。

虚拟代理(延迟执行)

虚拟代理的目的,是将开销大的运算延迟到需要时再执行。

虚拟代理在图片预加载的应用,代码例子来至 《JavaScript 设计模式与开发实践》

</>复制代码

  1. // 本体
  2. var myImage = (function(){
  3. var imgNode = document.createElement("img");
  4. document.body.appendChild(imgNode);
  5. return {
  6. setSrc: function(src) {
  7. imgNode.src = src;
  8. }
  9. }
  10. })();
  11. // 代理
  12. var proxyImage = (function(){
  13. var img = new Image;
  14. img.onload = function() {
  15. myImage.setSrc(this.src); // 图片加载完设置真实图片src
  16. }
  17. return {
  18. setSrc: function(src) {
  19. myImage.setSrc("./loading.gif"); // 预先设置图片src为loading图
  20. img.src = src;
  21. }
  22. }
  23. })();
  24. // 外部调用
  25. proxyImage.setSrc("./product.png"); // 有loading图的图片预加载效果
缓存代理(暂时存储)

缓存代理的目的,是为一些开销大的运算结果提供暂时存储,以便下次调用时,参数与结果不变情况下,从缓存返回结果,而不是重新进行本体运算,减少本体调用次数。

应用缓存代理的本体,要求运算函数应是一个纯函数,简单理解比如一个求和函数 sum, 输入参数 (1, 1), 得到的结果应该永远是 2

</>复制代码

  1. 纯函数:固定的输入,有固定的输出,不影响外部数据。

模拟场景:60道判断题测试,每三道题计分一次,根据计分筛选下一步的三道题目?

三道判断题得分结果:

(0, 0 ,0)

(0, 0, 1)

(0, 1, 0)

(0, 1, 1)

(1, 0, 0)

(1, 0, 1)

(1, 1, 0)

(1, 1, 1)

总共七种计分结果。60/3 = 20,共进行 20 次计分,每次计分执行 3 个循环累计,共 60 个循环。接下来,借用 “缓存代理” 方式,来实现最少本体运算次数。

</>复制代码

  1. // 本体:对三道题答案进行计分
  2. var countScore = function(ansList) {
  3. let [a, b, c] = ansList;
  4. return a + b + c;
  5. }
  6. // 代理:对计分请求预先处理
  7. var proxyCountScore = (function() {
  8. var existScore = {}; // 设定存储对象
  9. return function(ansList) {
  10. var attr = ansList.join(","); // eg. ["0,0,0"]
  11. if (existScore[attr] != null) {
  12. // 从内存返回
  13. return existScore[attr];
  14. } else {
  15. // 内存不存在,转交本体计算并存入内存
  16. return existScore[attr] = countScore(ansList);
  17. }
  18. }
  19. })();
  20. // 调用计分
  21. proxyCountScore([0,1,0]);

60 道题目,每 3 道题一次计分,共 20 次计分运算,但总的计分结果只有 7 种,那么实际上本体 countScore() 最多只需运算 7 次,即可囊括所有计算结果。

通过缓存代理的方式,对计分结果进行临时存储。用答案字符串组成属性名 ["0,1,0"] 作为 key 值检索内存,若存在直接从内存返回,减少包含复杂运算的本体被调用的次数。之后如果我们的题目增加至 90 道, 120 道,150 道题时,本体 countScore() 运算次数仍旧保持 7 次,中间节省了复杂运算的开销。

ES6 的 Proxy

ES6新增的 Proxy 代理对象的操作,具体的实现方式是在 handler 上定义对象自定义方法集合,以便预先管控对象的操作。

</>复制代码

  1. ES6 的 Proxy语法:let proxyObj = new Proxy(target, handler);

target: 本体,要代理的对象

handler: 自定义操作方法集合

proxyObj: 返回的代理对象,拥有本体的方法,不过会被 handler 预处理

</>复制代码

  1. // ES6的Proxy
  2. let Person = {
  3. name: "以乐之名"
  4. };
  5. const ProxyPerson = new Proxy(Person, {
  6. get(target, key, value) {
  7. if (key != "age") {
  8. return target[key];
  9. } else {
  10. return "保密"
  11. }
  12. },
  13. set(target, key, value) {
  14. if (key === "rate") {
  15. target[key] = value === "A" ? "推荐" : "待提高"
  16. }
  17. }
  18. })
  19. console.log(ProxyPerson.name); // "以乐之名"
  20. console.log(ProxyPerson.age); // "保密"
  21. ProxyPerson.rate = "A";
  22. console.log(ProxyPerson.rate); // "推荐"
  23. ProxyPerson.rate = "B";
  24. console.log(ProxyPerson.rate); // "待提高"

handler 除常用的 set/get,总共支持 13 种方法:

</>复制代码

  1. handler.getPrototypeOf()
  2. // 在读取代理对象的原型时触发该操作,比如在执行 Object.getPrototypeOf(proxy) 时
  3. handler.setPrototypeOf()
  4. // 在设置代理对象的原型时触发该操作,比如在执行 Object.setPrototypeOf(proxy, null) 时
  5. handler.isExtensible()
  6. // 在判断一个代理对象是否是可扩展时触发该操作,比如在执行 Object.isExtensible(proxy) 时
  7. handler.preventExtensions()
  8. // 在让一个代理对象不可扩展时触发该操作,比如在执行 Object.preventExtensions(proxy) 时
  9. handler.getOwnPropertyDescriptor()
  10. // 在获取代理对象某个属性的属性描述时触发该操作,比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时
  11. handler.defineProperty()
  12. // 在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时
  13. handler.has()
  14. // 在判断代理对象是否拥有某个属性时触发该操作,比如在执行 "foo" in proxy 时
  15. handler.get()
  16. // 在读取代理对象的某个属性时触发该操作,比如在执行 proxy.foo 时
  17. handler.set()
  18. // 在给代理对象的某个属性赋值时触发该操作,比如在执行 proxy.foo = 1 时
  19. handler.deleteProperty()
  20. // 在删除代理对象的某个属性时触发该操作,比如在执行 delete proxy.foo 时
  21. handler.ownKeys()
  22. // 在获取代理对象的所有属性键时触发该操作,比如在执行 Object.getOwnPropertyNames(proxy) 时
  23. handler.apply()
  24. // 在调用一个目标对象为函数的代理对象时触发该操作,比如在执行 proxy() 时。
  25. handler.construct()
  26. // 在给一个目标对象为构造函数的代理对象构造实例时触发该操作,比如在执行 new proxy() 时
适用场景

虚拟代理:

图片预加载(loading 图)

合并HTTP请求(数据上报汇总)

缓存代理:(前提本体是纯函数)

缓存异步请求数据

缓存较复杂的运算结果

ES6 的 Proxy:

实现对象私有属性

实现表单验证

“策略模式” 可应用于表单验证信息,“代理方式” 也可实现。这里引用 Github - jawil 的一个例子,思路供大家分享。

</>复制代码

  1. // 利用 proxy 拦截格式不符数据
  2. function validator(target, validator, errorMsg) {
  3. return new Proxy(target, {
  4. _validator: validator,
  5. set(target, key, value, proxy) {
  6. let errMsg = errorMsg;
  7. if (value == null || !value.length) {
  8. console.log(`${errMsg[key]} 不能为空`);
  9. return target[key] = false;
  10. }
  11. let va = this._validator[key]; // 这里有策略模式的应用
  12. if (!!va(value)) {
  13. return Reflect.set(target, key, value, proxy);
  14. } else {
  15. console.log(`${errMsg[key]} 格式不正确`);
  16. return target[key] = false;
  17. }
  18. }
  19. })
  20. }
  21. // 负责校验的逻辑代码
  22. const validators = {
  23. name(value) {
  24. return value.length >= 6;
  25. },
  26. passwd(value) {
  27. return value.length >= 6;
  28. },
  29. moblie(value) {
  30. return /^1(3|5|7|8|9)[0-9]{9}$/.test(value);
  31. },
  32. email(value) {
  33. return /^w+([+-.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/.test(value)
  34. }
  35. }
  36. // 调用代码
  37. const errorMsg = {
  38. name: "用户名",
  39. passwd: "密码",
  40. moblie: "手机号码",
  41. email: "邮箱地址"
  42. }
  43. const vali = validator({}, validators, errorMsg)
  44. let registerForm = document.querySelector("#registerForm")
  45. registerForm.addEventListener("submit", function () {
  46. let validatorNext = function* () {
  47. yield vali.name = registerForm.userName.value
  48. yield vali.passwd = registerForm.passWord.value
  49. yield vali.moblie = registerForm.phone.value
  50. yield vali.email = registerForm.email.value
  51. }
  52. let validator = validatorNext();
  53. for (let field of validator) {
  54. validator.next();
  55. }
  56. }

实现思路: 利用 ES6 的 proxy 自定义 handlerset() ,进行表单校验并返回结果,并且借用 “策略模式" 独立封装验证逻辑。使得表单对象,验证逻辑,验证器各自独立。代码整洁性,维护性及复用性都得到增强。

关于 “设计模式” 在表单验证的应用,可参考 jawil 原文:《探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式》。

优缺点

优点:

可拦截和监听外部对本体对象的访问;

复杂运算前可以进行校验或资源管理;

对象职能粒度细分,函数功能复杂度降低,符合 “单一职责原则”;

依托代理,可额外添加扩展功能,而不修改本体对象,符合 “开发-封闭原则”

缺点:

额外代理对象的创建,增加部分内存开销;

处理请求速度可能有差别,非直接访问存在开销,但 “虚拟代理” 及 “缓存代理” 均能提升性能

参考文章

《JavaScript 设计模式与开发实践》

《ES6中的代理模式-----Proxy》

《探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式》

Github,期待Star!
https://github.com/ZengLingYong/blog

</>复制代码

  1. 作者:以乐之名
    本文原创,有不当的地方欢迎指出。转载请指明出处。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104978.html

相关文章

  • Javascript设计模式)单例模式

    摘要:单例模式的定义是保证一个类只有仅有一个实例,并提供一个访问它的全局访问点。并且按照单一职责原则类实现功能类管理单例管理单例模式,达到可组合的的效果创建普通类引入代理类惰性单例模式分离创建实例对象的职责与管理单例的职责。 单例模式的定义是:保证一个类只有仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有些对象我们往往只需要一个,比如线程池,全局缓存,window对...

    孙吉亮 评论0 收藏0
  • 听飞狐聊JavaScript设计模式系列09

    摘要:说白了,就是对访问进行控制。这一回,主要聊了代理模式,虚拟代理,图片懒加载,难度适中下一回,聊一下适配器模式,难度也比较小。 本回内容介绍 上一回,聊了门面模式,DOM2级事件,事件委托,介一回,也比较容易,代理模式(proxy),代理对象控制对本体对象的访问,实现了同样的接口,并且会把任何方法的调用传递到本体对象。说白了,就是对访问进行控制。直接上代码,走你: 1.代理模式 代理也是...

    张春雷 评论0 收藏0
  • javascript单例、代理、状态设计模式

    摘要:代理模式代理模式为一个对象提供一个代用品或占位符,以便控制对于它访问。这种代理就叫虚拟代理。保护代理用于对象应该有不同访问权限情况。写时复制代理时虚拟代理的一种变体。 一、创建型设计模式(三大类设计模式) 创建型设计模式 --创建说明该类别里面的设计模式就是用来创建对象的,也就是在不同的场景下我们应该选用什么样的方式来创建对象。 1. 单例模式 ==单例模式(Singleton)==:...

    0xE7A38A 评论0 收藏0
  • 谈谈前后端的分工协作

    摘要:针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层比如淘宝的。淘宝有很多类似的文章,这里不赘述。淘宝团队做了两套接口文档的维护工具,以及,不知道有没有对外开放,两个东西都是基于的一个尝试,各有优劣。 原文出处: 小胡子哥的博客(@Barret李靖) 前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了...

    Scholer 评论0 收藏0
  • 谈谈前后端的分工协作

    摘要:针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层比如淘宝的。淘宝有很多类似的文章,这里不赘述。淘宝团队做了两套接口文档的维护工具,以及,不知道有没有对外开放,两个东西都是基于的一个尝试,各有优劣。 原文出处: 小胡子哥的博客(@Barret李靖) 前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了...

    OBKoro1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<