代理模式是一种对程序对象进行控制性访问的一类解决方案。
引入代理模式,其实是为了实现单一职责的面向对象设计原则。
单一职责其实就是指在一个类中(js中通常指对象和函数等),应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性,从而当变化发生时,程序设计会尽量少的受到意外破坏。
代理模式有多种方法,保护代理,远程代理,虚拟代理,缓存代理等。
但在javascript中,代理模式最常用到的两种方法是虚拟代理和缓存代理。
在理解虚拟代理时,可以将其想象为一个经纪人,客户程序需要通过这个虚拟代理(经纪人)来调用本体对象的方法。
虚拟代理示例demo1:图片加载预加载
//通过虚拟代理实现图片预加载//代理模式进行图片预加载的实现思路是:通过代理对象获取实际显示图片地址并进行加载,同时先让本体对象显示预加载图片,待代理对象将实际图片地址加载完毕后传递给本体对象进行显示即可。//本体对象
var myImage=(函数(){
var imgNode=新形象()
document.body.appendChild (imgNode)
返回{
setSrc:函数(src) {
imgNode。src=https://www.yisu.com/zixun/src
}
}
}) ()//代理对象
var proxyImage=(函数(){
var img=新形象();//1,代理对象新建一个img对象
img。onload=function(){//4代理对象img加载真实图片src完成后将src传递给本体对象显示
myImage.setSrc (this.src)
}
返回{
setProxySrc:函数(src) {
myImage.setSrc(. ./图片/loding.gif)//2,代理对象控制本体对象使用加载图片src
img。src=https://www.yisu.com/zixun/src/3代理对象的img对象获取将要传递给本体对象的真实图片src
}
}
}) ()//通过代理对象来对本体对象进行访问
proxyImage.setProxySrc (“https://p1.ssl.qhimgs1.com/t0153297036f4471d81.jpg”)
之前
虚拟代理示例以及接下来:合并HTTP请求,减少网络请求资源消耗
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title>代理模式虚拟代理合并HTTP请求& lt;/title>
& lt;/head>
& lt; body>
& lt; div>
& lt;输入类型=案囱】颉眎d=" 1 "/在1
& lt;输入类型=案囱】颉眎d=" 2 "/祝辞;2
& lt;输入类型=案囱】颉眎d=?”/祝辞;3
& lt;输入类型="复选框" id=" 4 "/在4
& lt;输入类型="复选框" id=" 5 "/在5
& lt;输入类型=案囱】颉眎d=?”/祝辞;6
& lt;输入类型="复选框" id=" 7 "/在7
& lt;输入类型="复选框" id=" 8 "/在8
& lt;输入类型="复选框" id=" 9 "/祝辞9
& lt;/div>
& lt;/body>
& lt; script>//使用//本体对象
var synchornurFile=function (id) {
控制台。日志(“开始同步:' + id);
}
var proxySynchornurFile=(函数(){
var缓存=[]//集合一段时间内需要同步的id
定时器;//定时器
返回函数(id) {
cache.push (id)
如果(计时器){//保证不会覆盖已经启动的定时器
返回
}
计时器=setTimeout(函数(){
synchornurFile (cache.join (" "))
clearTimeout(计时)
计时器=零
缓存。长度=0
},2000)
}
}) ()
var检查=document.getElementsByTagName(输入)
(var=0;i
& lt;/html>
之前
缓存代理可以为一些开销大的运算结果提供暂时存储,在下次运算时,如果传递进来的参数和之前的一致,则可以直接返回前面存储的结果
缓存代理示例演示:计算乘积
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title>代理模式,缓存代理& lt;/title>
& lt;/head>
& lt; body>
& lt;输入类型="文本" id=" input1祝辞*
& lt;输入类型="文本" id=癷nput2”比;
& lt; div id="结果"祝辞& lt;/div>
& lt;按钮类型="按钮" id=" btn祝辞计算& lt;/button>
& lt;/body>
& lt; script>//缓存代理示例:计算乘积//本体对象
var计算=function () {
var=1;
(var=0;i
