javascript设计模式学习笔记之代理模式

共计 918 个字符，预计需要花费 3 分钟才能阅读完成。

代理模式

代理模式是为一个对象提供一个代用品或者占位符, 以便控制对它的访问
引入代理模式，其实是为了实现单一职责的面向对象设计原则。

虚拟代理
将一些开销很大的对象, 延迟到正真需要的时候执行
// 针对大图 增加 loading 图
// 创建 img
var myImage = (function () {
var imgNode = document.createElement(‘img’);

document.body.appendChild(imgNode);

return {
// 直接设置 img 的 src
setSrc: function (src) {
imgNode.src = src;
}
}
})();

// 代理对象
var proxyImage = (function () {
var img = new Image();
img.onload = function () {
// 在代理中等到图片加载完在设置正真的图片地址
myImage.setSrc(this.src);
};

return {
setSrc: function (src) {
myImage.setSrc(‘./loading.jpg’);
img.src = src;
}
}
})();

proxyImage.setSrc(‘https://xxx.com/realImage.png’)
缓存代理
可以为一些开销大的运算结果提供暂时的存储
// 体现了 单一职责原则,
// 原函数
var multi = function () {
var a = 1;
for (var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
}
console.log(a);
return a;
}

// 代理函数
var proxyMulti = (function () {
var cache = {};
return function () {
var args = Array.prototype.join.call(arguments, ‘,’);
if (args in cache) {
return cache[args];
}
return cache[args] = multi.apply(this, arguments);
}
})();

proxyMulti(1, 2, 3, 4, 5);
proxyMulti(1, 2, 3, 4, 5);