资讯专栏INFORMATION COLUMN

JS代理模式《JavaScript设计模式与开发实践》阅读笔记

mist14 / 3080人阅读

摘要:保护代理和虚拟代理保护代理当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤。虚拟代理在程序中可以能有一些代价昂贵的操作。而虚拟代理是最常用的一种代理模式。

代理模式

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

保护代理和虚拟代理

保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤。

虚拟代理:在程序中可以能有一些代价昂贵的操作。此时可以设置虚拟代理去代为执行,这里的虚拟代理便会在适合的时候(需要用到的时候)才去执行。

保护代理用于控制不同权限的对象对目标对象的访问,但在JavaScript并不容易实现保护代理,因为我们无法判断谁访问了某个对象。而虚拟代理是最常用的一种代理模式。
虚拟代理实现图片预加载

预加载图片在Web开发中十分常用,其通过异步的方式加载图片,利用一张loading图片占位。等图片加载好之后把图片填充到img节点中。

var myImage = (function(){
  var imgNode = document.createElement("img")
  document.body.appendChild(imgNode)
  return {
    setSrc: function(src){
      imgNode.src = src
    }
  }
})()

var proxyImage = (function(){
  var img = new Image()
  img.onload = function(){
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src){ 
      myImage.setSrc("loading.gif")
      img.src = src
    }
  }
})()

proxyImage.setSrc("realImage.jpg")
通过proxyImage间接的访问了MyImageproxyImage控制了客户对MyImage的访问,并且在此过程中加入了一些额外的操作,比如在真正的图片加载好之前,先把img节点的src设置为一张loading图片。
代理的意义
面向对象设计原则——单一职责原则。单一职责原则指的是,就一个类(通常也包括对象和函数等)而言,应该仅有一个引起它变化的原因。如果一个对象承担了多项职责,就意味着这个对象将变得巨大,引起它变化的原因会有多个。面向对象设计鼓励将行为分布到细粒度的对象之中,如果一个对象承担的职责过多,等于把这些职责耦合到了一起,这种耦合会导致脆弱和低内聚的设计,带变化发生时,设计可能会遭到意外的破坏。

虚拟代理例子中,代理模式给系统添加了额外的功能,预加载图片。而我们实际需要的只是MyImagesetImage方法。预加载只是一个锦上添花的功能。通过代理模式使得这两个功能独立开来,遵循了开放-封闭原则。

缓存代理
缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以直接返回前面存储的运算结果。

乘积运算的例子

/*******计算乘积******/
var mult = function(){
  console.log("开始计算乘积")
  var a = 1 
  for (var i = 0,l = arguments.length;i
最后
虽然代理模式非常有用,但我们在编写业务代码的时候,往往不需要去预先猜测是否需要使用代理模式。当真正发现不方便直接访问某个对象的时候,再编写代理不迟。

代理模式是一种很实用的设计模式,很好的诠释了面向对象中的单一职责原则和开放-封闭原则。在实际开发的时候往往会迫于进度压力或者实现了再说的态度忽略了一些必要的代码的可维护性,我觉得在一些简单的地方去试着遵循一些设计理念是对自己代码能力的提升。当然不要为了设计而设计啦。

Done is better then Perfect

参考

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

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

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

相关文章

  • JS迭代器模式JavaScript设计模式开发实践阅读笔记

    摘要:但实际中,内部迭代器和外部迭代器两者并无优劣。迭代器并不只迭代数组迭代器模式不仅能迭代数组,还可以迭代一些类数组对象。晚安了,参考设计模式与开发实践曾探本文作者本文链接迭代器模式设计模式与开发实践阅读笔记 迭代器模式:一个相对简单的模式,目前绝大多数语言都内置了迭代器,以至于大家都不觉得这是一种设计模式 迭代器模式 迭代器模式指提供一种方法访问一个聚合对象中的各个元素,而又不需要暴露该...

    djfml 评论0 收藏0
  • JavaScript设计模式开发实践》读书笔记

    摘要:订阅模式的一个典型的应用就是后面会写一篇相关的读书笔记。享元模式享元模式的核心思想是对象复用,减少对象数量,减少内存开销。适配器模式对目标函数进行数据参数转化,使其符合目标函数所需要的格式。 设计模式 单例模式 JS的单例模式有别于传统面向对象语言的单例模式,js作为一门无类的语言。使用全局变量的模式来实现单例模式思想。js里面的单例又分为普通单例和惰性单例,惰性单例指的是只有这个实例...

    Panda 评论0 收藏0
  • JS策略模式JavaScript设计模式开发实践阅读笔记

    摘要:策略模式可以避免代码中的多重判断条件。策略模式在程序中或多或少的增加了策略类。此文仅记录本人阅读设计模式与开发实践这个本时的感受,感谢作者曾探写出这么好的一本书。设计模式中很重要的一点就是将不变和变分离出来。参考设计模式与开发实践曾探 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且是它们可以相互替换。 策略模式可以避免代码中的多重判断条件。 策略模式很好的体现了开放-...

    Amos 评论0 收藏0
  • JavaScript设计模式开发实践 | 04 - 单例模式

    摘要:观察构造函数的代码,该构造函数实际上负责了两件事情第一是创建对象和执行初始化方法,第二是保证只有一个对象。惰性单例在实际开发中非常有用,是单例模式的重点。 单例模式 单例模式的定义是: 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象等。例如,当我们点击登录按钮时,页面会弹出一...

    awkj 评论0 收藏0
  • 正则表达式

    摘要:最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧 本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

    yibinnn 评论0 收藏0

发表评论

0条评论

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