JavaScript设计模式——代理模式

代理模式

定义：当不方便直接访问一个对象或者不满足需要的时候，提供一个对象来控制堆这个对象的访问。

代理模式分为很多类，常用的有：保护模式、虚拟代理、缓存代理。
下面以虚拟代理实现图片预加载为例，理解代理模式的特点。

图片预加载：当请求图片较大时，首先使用一张 loading 占位，通过异步的方式加载图片资源，等到图片资源加载完成后，再替换 loading 占位图片链接。

实现代码

// 图片展示类
class showImg {
	constructor(src){
		this.init(src);
	}
	// 创建图片结点
	init(src){
		console.log("创建结点")
		this.imgNode = new Image();
		document.body.appendChild(this.imgNode);
		this.imgNode.src = src;
	}
	// 设置图片链接
	setSrc(src){
		this.imgNode.src = src;
	}
}

// 图片代理类
class proxyImg {
	constructor(src,img){
		this.proxyImg = new Image();
		this.proxyImg.src = src;
		//页面加载完成后，改变图片链接
		this.proxyImg.onload = ()=>{
			this.setSrc(img)
		}
	}
	setSrc(img){	
		setTimeout(()=>img.setSrc(this.proxyImg.src),1000);//模拟1秒后才加载完成图片
	}
}
			
let img = new showImg('./imgs/fish.png');
let proxyImgs = new proxyImg('./imgs/car.jpg',img);

这种模式的关键点在于：本体对象和代理对象接口的一致性。也就是说如果需要不通过代理进行操作，那么直接操作本体对象依然可以。