在阅读本文之前,可以先了解下 JavaScript 中的 Proxy
(点击查看)。
JavaScript 设计模式——代理模式
1. 什么是代理模式
为其他对象提供一种代理以控制对这个对象的访问。
2. 代理模式细分
- 虚拟代理(将开销大的运算延迟到需要时执行)
- 缓存代理(为开销大的运算结果提供缓存)
- 保护代理(用于对象应该有不同访问权限的情况)
- 防火墙代理(控制网络资源的访问)
- 远程代理(为一个对象在不同的地址空间提供局部代表)
- 智能引用代理(取代了简单的指针,它在访问对象时执行一些附加操作,比如计算一个对象被引用的次数)
- 写时复制代理(延迟对象复制过程,对象需要真正修改时才进行。写时复制代理是虚拟代理的一种变体,DLL(操作系统中的动态链接库)是其典型运用场景。)
2.1 虚拟代理
虚拟代理预加载图片
const image = (function () {
const imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc: function (src) {
imgNode.src = src;
},
};
})();
// 代理容器
const proxyImage = (function () {
let img = new Image();
// 加载完之后将设置为添加的图片
img.onload = function () {
image.setSrc(this.src);
};
return {
setSrc: function (src) {
image.setSrc('loading.gif');
img.src = src;
},
};
})();
proxyImage.setSrc('https://image/path/file.jpg'