微客导航 » 文章资讯 » 详解javascript设计模式三：代理模式

详解javascript设计模式三：代理模式

2023-08-25 12:15:05 327

代理模式是一种对程序对象进行控制性访问的一类解决方案。

引入代理模式，其实是为了实现单一职责的面向对象设计原则。

单一职责其实就是指在一个类中（js中通常指对象和函数等），应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性，从而当变化发生时，程序设计会尽量少的受到意外破坏。

代理模式有多种方法，保护代理、远程代理、虚拟代理、缓存代理等。

但在javascript中，代理模式最常用到的两种方法是虚拟代理和缓存代理。

虚拟代理

在理解虚拟代理时，可以将其想象为一个经纪人，客户程序需要通过这个虚拟代理(经纪人)来调用本体对象的方法。

虚拟代理示例demo1:图片loading预加载

//通过虚拟代理实现图片预加载
//代理模式进行图片预加载的实现思路是：通过代理对象获取实际显示图片地址并进行加载，同时先让本体对象显示预加载图片，待代理对象将实际图片地址加载完毕后传递给本体对象进行显示即可。

//本体对象
varmyImage=(function(){
varimgNode=newImage()
document.body.appendChild(imgNode)

return{
setSrc:function(src){
imgNode.src=src
}
}
})()

//代理对象
varproxyImage=(function(){
varimg=newImage();//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请求，减少网络请求资源消耗







代理模式虚拟代理合并HTTP请求



1
2
3
4
5
6
7
8
9

缓存代理

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

缓存代理示例demo:计算乘积







代理模式-缓存代理


*

计算

在编写业务代码时，并不需要一开始就考虑是否使用代理模式，只要当发现使用代理模式更方便时，再编写代理对象即可。

以上所述是小编给大家介绍的javascript设计模式三：代理模式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

详解javascript设计模式三：代理模式

热门推荐

随机推荐