Javascript设计模式（五）代理模式

Riddler 发布于2019-08-26 12:23 / 1368人阅读

摘要：使用者无权访问目标对象，通过代理做授权和控制代理模式是一种非常有意义的模式。如果一个对象承担了多项职责，那么引起变化的原因可能就有多个。

使用者无权访问目标对象，通过代理做授权和控制

代理模式是一种非常有意义的模式。在生活中也能找到代理模式的情景，比如，明星都有经纪人作为代理，如果想请明星来办一场商业演出，只能联系他的经纪人，经纪人会把商业演出的细节和报酬都谈好之后，再将合同交给明星签。

代理实现图片懒加载

在前端开发中，图片懒加载是一项非常实用的技术。为了性能优化，我们常常在图片加载之前用一张图片占位，等图片加载完成之后再将图片填充到src上，这种场景就很容易实用代理模式。

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(img.src)
    }
    return {
        setSrc: function(src) {
            myImage.setSrc("./loading.gif")
            img.src = src
        }
    }
})()

proxyImage.setSrc("https://user-gold-cdn.xitu.io/2016/11/29/805fd2776ae656464329c04f63181266?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1")

通过proxyImage间接访问MyImage。proxyImage控制来客户对MyImage的访问，并且在此过程中加入一些额外的操作，比如在图片加载前，先将src设置为本地的loading图。

缓存代理

缓存代理可以为一些开销较大的运算结果暂时的存储，在下次运算时，如果传递的值一致，则可以直接返回前面存储的结果。

// 创建一个乘积函数
var mult = function() {
    console.log("开始计算乘积")
    var a = 1
    for(var i = 0, l = arguments.length; i
当第二次调用proxyMult的时候，本体mult并没有直接计算，proxyMult直接返回之前的结果
引入代理的意义
为了说明代理的意义，下面引入一个面向对象的设计原则：单一职责原则

一个类（对象或者函数）而言，应该只能有一个引起它变化的原因。如果一个对象承担了多项职责，那么引起变化的原因可能就有多个。
实际上增加懒加载图片只是一个景上添花的行为。纵观整个程序，我们并没有改变myImage的接口，但是通过代理，给接口添加了新的行为，如果某天不需要了，也不用修改本体。

GPU云服务器云服务器 Java设计模式之（五）——代理模式代理模式静态代理模式 javascript设计模式

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

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

从ES6重新认识JavaScript设计模式(五): 代理模式和Proxy

摘要：此时，链家起到的作用就是代理的作用。验证代理构造函数第二个参数中的方法，可以很方便的验证向一个对象的传值。 1 什么是代理模式 showImg(https://segmentfault.com/img/remote/1460000015800706?w=1262&h=464); 为其他对象提供一种代理以控制对这个对象的访问。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理...

verano 2019-08-23 10:27 评论0 收藏0
JavaScript设计模式系列五：适配器模式

摘要：什么是适配器模式所谓适配器模式就是用一个新的接口对现有的接口进行包装，处理类与的不匹配。对象适配器可以适配它的父对象接口方法或属性。装饰者模式增强了对象的功能而同时又不改变它的接口，因此它对程序的透明度比适配器要好。什么是适配器模式所谓适配器模式就是用一个新的接口对现有的接口进行包装，处理类与API的不匹配。使用这种模式的对象又叫作包装器。比如我们有一个接口： function...

banana_pi 2019-08-26 11:44 评论0 收藏0
Java设计模式之（五）——代理模式

摘要：什么是代理模式什么是代理模式为其他对象提供一种代理以控制对这个对象的访问。另外一种方式是动态代理。代理模式应用场景代理模式应用场景业务系统的非功能性需求开发这是最常用的一个场景。1、什么是代理模式 Provide a surrogate or placeholder for another object to control access to it. Proxy Pat...

李文鹏 2021-11-22 12:05 评论0 收藏0
Nginx 配置 https相关问题

摘要：证书生成完毕后，可以在中找到四配置当用访问时重定向至重启服务，即可使用访问该网站五其他自动更新证书证书只有天的有效期，所以在证书到期之前，我们需要重新获取这些证书，可以使用这个命令。一、Nginx基础 1.概念： Nginx是一款轻量级的Web服务器、反向代理服务器及电子邮件（IMAP/POP3）代理服务器。正向代理服务器：一般作用在客户端，位于客户端和服务器之间，客户端发送请...

nifhlheimr 2019-07-25 14:05 评论0 收藏0
JavaScript MVC 学习笔记（五）事件操作的拓展

摘要：事件类型布尔值，表示事件是否通过以冒泡形式触发。表示键盘事件的属性布尔值，表示当前按下的键是否表示一个字符。表示当前按键的值仅对事件有效。，事件发生时相对于屏幕的坐标。事件对象 event 对象还包含很多有用的属性。W3C 范中包含的大部分属性都列在下面，更多信息参照完整的标准规范。事件类型： bubbles ：布尔值，表示事件是否通过DOM 以冒泡形式触发。事件发生时...

Anshiii 2019-08-22 10:56 评论0 收藏0