详解javascript设计模式三：代理模式
代理模式是一种对程序对象进行控制性访问的一类解决方案。
引入代理模式，其实是为了实现单一职责的面向对象设计原则。
单一职责其实就是指在一个类中（js中通常指对象和函数等），应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性，从而当变化发生时，程序设计会尽量少的受到意外破坏。
代理模式有多种方法，保护代理、远程代理、虚拟代理、缓存代理等。
但在javascript中，代理模式最常用到的两种方法是虚拟代理和缓存代理。
虚拟代理
在理解虚拟代理时，可以将其想象为一个经纪人，客户程序需要通过这个虚拟代理(经纪人)来调用本体对象的方法。
虚拟代理示例demo1: 图片loading预加载
//通过虚拟代理实现图片预加载
//代理模式进行图片预加载的实现思路是： 通过代理对象获取实际显示图片地址并进行加载，同时先让本体对象显示预加载图片，待代理对象将实际图片地址加载完毕后传递给本体对象进行显示即可。
//本体对象
var myImage = (function(){
var imgNode = new Image()
document.body.appendChild(imgNode)
return {
setSrc: function(src){
imgNode.src = src
}
}
})()
//代理对象
var proxyImage = (function(){
var img = new Image(); //1、代理对象新建一个img对象
img.onload = function(){ //4、代理对象img加载真实图片src完成后将src传递给本体对象显示
myImage.setSrc(this.src)
}
return {
setProxySrc: function(src){
myImage.setSrc('../images/loding.gif') //2、代理对象控制本体对象使用加载图片src
img.src = src //3、代理对象的img对象获取将要传递给本体对象的真实图片src
}
}
})()
//通过代理对象来对本体对象进行访问
proxyImage.setProxySrc('https://p1.ssl.qhimgs1.com/t0153297036f4471d81.jpg')
虚拟代理示例demo2：合并HTTP请求，减少网络请求资源消耗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>代理模式 虚拟代理合并HTTP请求</title>
</head>
<body>
<div>
<input type="checkbox" id="1" />1
<input type="checkbox" id="2" />2
<input type="checkbox" id="3" />3
<input type="checkbox" id="4" />4
<input type="checkbox" id="5" />5
<input type="checkbox" id="6" />6
<input type="checkbox" id="7" />7
<input type="checkbox" id="8" />8
<input type="checkbox" id="9" />9
</div>
</body>
<script>
//使用
//本体对象
var synchornurFile = function(id){
console.log('开始同步：' + id);
}
var proxySynchornurFile = (function(){
var cache = [], //集合一段时间内需要同步的id
timer; //定时器
return function(id){
cache.push(id)
if(timer){ //保证不会覆盖已经启动的定时器
return
}
timer = setTimeout(function(){
synchornurFile(cache.join(','))
clearTimeout(timer)
timer = null
cache.length = 0
}, 2000)
}
})()
var check = document.getElementsByTagName('input')
for(var i=0; i<check.length; i++){
check[i].onclick = function(){
if(this.checked === true){
proxySynchornurFile(this.id)
}
}
}
</script>
</html>
缓存代理
缓存代理可以为一些开销大的运算结果提供暂时存储，在下次运算时，如果传递进来的参数和之前的一致，则可以直接返回前面存储的结果
缓存代理示例demo: 计算乘积
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>代理模式-缓存代理</title>
</head>
<body>
<input type="text" id="input1">*
<input type="text" id="input2">
<div id="result"></div>
<button type="button" id="btn">计算</button>
</body>
<script>
//缓存代理示例： 计算乘积
//本体对象
var calculate = function(){
var a = 1;
for(var i=0; i<arguments.length; i++){
a = a*arguments[i]
}
return a;
}
//代理对象，创建缓存代理的工厂,参数fn可以为任意需要进行代理的函数，除了上述计算乘积的本体对象函数外，还可以是计算加减或进行其他操作的本体函数
var proxyCalculate = function(fn){
var resultCache = {};
return function(){
var args = Array.prototype.join.call(arguments, ',')
if(args in resultCache){ //测试对象中是否有对应的name，有则直接返回该name的值
return resultCache[args]
}
return resultCache[args] = fn.apply(this, arguments)
}
}
document.getElementById('btn').onclick = function(){
var v1 = document.getElementById('input1').value
var v2 = document.getElementById('input2').value
var result = proxyCalculate(calculate)(v1, v2)
document.getElementById('result').innerHTML = result
}
//总结： 代理模式还有多种，比如保护代理、远程代理等，但js中常用的代理模式有虚拟代理和缓存代理两种。
</script>
</html>
在编写业务代码时，并不需要一开始就考虑是否使用代理模式，只要当发现使用代理模式更方便时，再编写代理对象即可。
以上所述是小编给大家介绍的javascript设计模式三：代理模式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JavaScript设计模式之观察者模式实例详解
本文实例讲述了JavaScript设计模式之观察者模式.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者 (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该
-
JavaScript设计模式之享元模式实例详解
本文实例讲述了JavaScript设计模式之享元模式.分享给大家供大家参考,具体如下: 通过两个例子的对比来凸显享元模式的特点:享元模式是一个为了提高性能(空间复杂度)的设计模式,享元模式可以避免大量非常相似类的开销. 第一实例,没有使用享元模式,计算所花费的时间和空间使用程度. 要求为:有一个城市要进行汽车的登记 (1)汽车类 /** * 制造商 * 型号 * 拥有者 * 车牌号码 * 最近一次登记日期 */ var Car = function(make,model,year,owner,t
-
JavaScript设计模式之装饰者模式实例详解
本文实例讲述了JavaScript设计模式之装饰者模式.分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //定义一个接口类 var Interface=
-
JavaScript设计模式之责任链模式实例分析
本文实例讲述了JavaScript设计模式之责任链模式.分享给大家供大家参考,具体如下: 介绍 责任链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止. 请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者.提交请求的对象并不知道哪一个对象将会处理它--也就是该请求有一个隐式的接受者(implicit receiv
-
JavaScript设计模式之命令模式实例分析
本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命
-
通过说明与示例了解js五种设计模式
第一种模式:js工厂模式 var lev=function(){ return "啊打"; }; function Parent(){ var Child = new Object(); Child.name="李小龙"; Child.age="30"; Child.lev=lev; return Child; }; var x = Parent(); alert(x.name); alert(x.lev()); 说明: 1.在函数中定义对象,并
-
详解JAVA设计模式之代理模式
什么是设计模式(Design Pattern)? 设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设计经验的总结. 代理模式的定义? 代理模式就是为其他对象提供一种代理,以控制对这个对象的访问. 代理对象起到中介作用,可去掉功能服务或增加额外的服务. 代理对象和目标对象的关系? 代理对象:增强后的对象 目标对象:被增强的对象 他们不是绝对的,会根据情况发生变化. 代理模式的两种实现方式? 1.静态代理:代理和被代理对象在代理之前是确定的,它们都实现相同的接口或者继承相同的抽象类. 2
-
详解javascript设计模式三：代理模式
代理模式是一种对程序对象进行控制性访问的一类解决方案. 引入代理模式,其实是为了实现单一职责的面向对象设计原则. 单一职责其实就是指在一个类中(js中通常指对象和函数等),应仅有一个引起它变化的原因.这样会帮助程序设计具有良好的健壮和高内聚特性,从而当变化发生时,程序设计会尽量少的受到意外破坏. 代理模式有多种方法,保护代理.远程代理.虚拟代理.缓存代理等. 但在javascript中,代理模式最常用到的两种方法是虚拟代理和缓存代理. 虚拟代理 在理解虚拟代理时,可以将其想象为一个经纪人,客户程
-
JavaScript设计模式之代理模式实例分析
本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静
-
JavaScript设计模式之代理模式简单实例教程
本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 一.代理模式概念 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西. 解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节.最后达成
-
详解Python设计模式之策略模式
虽然设计模式与语言无关,但这并不意味着每一个模式都能在每一门语言中使用.<设计模式:可复用面向对象软件的基础>一书中有 23 个模式,其中有 16 个在动态语言中"不见了,或者简化了". 1.策略模式概述 策略模式:定义一系列算法,把它们一一封装起来,并且使它们之间可以相互替换.此模式让算法的变化不会影响到使用算法的客户. 电商领域有个使用"策略"模式的经典案例,即根据客户的属性或订单中的商品计算折扣. 假如一个网店制定了下述折扣规则. 有 1000 或
-
详解Java设计模式之桥接模式
目录 一.什么是桥接模式: 二.UML结构图 三.代码实现 四.JDBC源码解析-桥接模式 1.源码分析 2.源码类 3.对 JDBC 的观点 一.什么是桥接模式: 桥接,顾名思义,就是用来连接两个部分,使得两个部分可以互相通讯,桥接模式的作用就是为被分离的抽象部分和实现部分搭桥.在现实生活中一个物品在搭配不同的配件时会产生不同的动作和结果,例如一辆赛车搭配的是硬胎或者是软胎就能够在干燥的马路上行驶,而如果要在下雨的路面行驶,就需要搭配雨胎了,这种根据行驶的路面不同,需要搭配不同的轮胎的变化的情
-
详解JAVA设计模式之模板模式
在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.这种类型的设计模式属于行为型模式. 介绍 意图:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 主要解决:一些方法通用,却在每一个子类都重新写了这一方法. 何时使用:有一些通用的方法. 如何解决:将这些通用算法抽象出来. 关键代码:在抽象类实现,其他步骤在子
-
详解JAVA 设计模式之状态模式
在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式. 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象. 介绍 意图: 允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类. 主要解决: 对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为. 何时使用: 代码中包含大量与对象状态有关的条件语句. 如何解决: 将各种具体的状态类抽象出来. 关键代码: 通常
-
详解javascript中的Strict模式
简介 在ES5中,引入了strict模式,我们可以称之为严格模式.相应的sloppy mode就可以被称为非严格模式. 严格模式并不是非严格模式的一个子集,相反的严格模式在语义上和非严格模式都发生了一定的变化,所以我们在使用过程中,一定要经过严格的测试.以保证在严格模式下程序的执行和非严格模式下的执行效果一致. 使用Strict mode strict mode会改变javascript的一些表现,我们将会在下一节中进行详细的讲解. 这里先来看一下,怎么使用strict mode. Strict
-
JavaScript设计模式之代理模式详解
代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最大的好处,就是在不动原有对象的同时,可以给原有对象增加一些新的特性或者行为. /** * pre:代理模式 * 小明追求A,B是A的好朋友,小明比较腼腆,不好意思直接将花交给A, * 于是小明将花交给B,再由B交给A. */ //----------- 示例1 --------- // 不使用代理