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

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

代理实现图片懒加载

在前端开发中，图片懒加载是一项非常实用的技术。为了性能优化，我们常常在图片加载之前用一张图片占位，等图片加载完成之后再将图片填充到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 = 1for(var i = 0, l = arguments.length; i<l ; i++) {a = a*arguments[i]}return a
}
// 加入缓存代理函数
var proxyMult = (function(){var cache = {}return function() {var args = Array.prototype.join.call(arguments, ',')if (args in cache) {return cache[args]}return cache[args] = mult.apply(this, arguments)}
})()proxyMult(1,2,3,4) //24
proxyMult(1,2,3,4) //24
复制代码

当第二次调用proxyMult的时候，本体mult并没有直接计算，proxyMult直接返回之前的结果

引入代理的意义

为了说明代理的意义，下面引入一个面向对象的设计原则：单一职责原则

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

转载于:https://juejin.im/post/5be7ebe4f265da611a476161

Javascript设计模式（五）代理模式相关推荐

「设计模式(五) - 代理模式」
「设计模式(五) - 代理模式」一.处处可见的"代理" "代理"在平常生活司空见惯,点外卖,租房子找中介,买飞机票等等.基本上用手机就能完成,也就是不直接接触 ...
Javascript 设计模式之代理模式【讲师辅导】-曾亮-专题视频课程
Javascript 设计模式之代理模式[讲师辅导]-969人已学习课程介绍随着 javascript ES6/7 的发布,很多老版本的设计模式的实现,今天来看是错误的,将被彻底. ...
Javascript设计模式之——代理模式
最近在读<javascript设计模式与开发实践>,在这里把文中的各种设计模式写出来,以便加深记忆,也可以分享给初学者.如果你不了解设计模式,那么强烈推荐你阅读一下这本书,相信它可以颠覆你 ...
JavaScript 设计模式之代理模式
一.代理模式概念解读 1.代理模式概念文字解读代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...
三国杀与设计模式之代理模式(Proxy)
本人原博地址:http://blog.saymagic.cn/blog.php?id=17 三国杀案例:在五人局中,作为反贼的黄月英借黄忠的刀杀作为忠臣的夏侯惇,从这句话中我们可以总结出一个成语对不对 ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
【设计模式】代理模式 ( 动态代理 | 模拟 Java 虚拟机生成对应的代理对象类 )
文章目录前言一.模拟 JVM 生成对应的代理对象二.模拟 JVM 生成对应的代理对象完整流程展示 1.目标对象接口 2.被代理对象 3.调用处理程序 4.模拟 JVM 生成的代理对象类 5 ...
C++设计模式之代理模式
这篇文章主要介绍了C++设计模式之代理模式,本文讲解了什么是代理模式.代理模式的使用场合.代理模式的实现代码等内容,需要的朋友可以参考下前言青春总是那样,逝去了才开始回味:大学生活也是在不经意间就 ...
python中代理模式分为几种_Python设计模式之代理模式实例详解
本文实例讲述了Python设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式(Proxy Pattern):为其他对象提供一种代理以控制对这个对象的访问 #!/usr/bin/env py ...
设计模式笔记——代理模式
设计模式笔记--代理模式代理模式介绍代理模式通常是介于请求方和提供方的一个中介系统,请求方是发送请求的一方,提供方是根据请求提供相应资源的一方 Web中的代理服务器就是一个例子,客户端向代理服务器 ...

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

代理实现图片懒加载

缓存代理

引入代理的意义

Javascript设计模式（五）代理模式相关推荐

最新文章

热门文章