代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。
例子一 图片预加载
var myImage = (function(){
var imgNode = document.createElement('img');
imgNode.className = '123';
document.body.appendChild(imgNode);
return {
setSrc : function(src){
imgNode.src = src;
}
}
})();
var proxyImage = (function(){
var img = document.createElement('img');
img.onload = function(){
console.log(this);//这里的this,指向的是上面创建的img,不是imgNode
myImage.setSrc(this.src);
}
return {
setSrc : function(src){
myImage.setSrc('http://o8kanx15h.bkt.clouddn.com/0.jpg');
img.src = src;
}
}
})();
proxyImage.setSrc('http://o8kanx15h.bkt.clouddn.com/octoliberty.png');
下面是不使用代理模式
var myImage = (function(){
var imgNode = document.createElement('img');
imgNode.className = '123';
document.body.appendChild(imgNode);
var img = new Image;
img.onload = function(){
imgNode.src = img.src;
}
return {
setSrc : function(src){
imgNode.src = 'http://o8kanx15h.bkt.clouddn.com/0.jpg';
img.src = src;
}
}
})();
myImage.setSrc('http://o8kanx15h.bkt.clouddn.com/octoliberty.png');
那么为什么要使用代理模式呢,这么小的功能貌似不用模式也能实现,原因有下面几点
- 单一职责原则:就一个类来说,应该仅有一个引起它变化的原因。如果一个对象承担了多项责任,就意味着对象将变得巨大,引起它变化的原因可能会有多个。如果一个对象承担的职责过多,等于把这些职责耦合到了一起,这种耦合会导致脆弱和低内聚的设计。
- 可能会违反开放-封闭原则。如果我们需要加载的图片很小,或许以后网速快到不用预加载了,我们可能希望删掉预加载的功能,这个时候,我们就不得不去更改myImage里面的代码了。
实际上,我们需要的只是给img节点设置src,预加载只是一个锦上添花的功能。这里把预加载功能放到另一个对象里(代理)。这个时候,代理负责预加载,预加载成功后,把请求重新交给本体myImage
例子二 计算乘积
var mult = function(){
console.log('开始');
var a = 1;
for(var i = 0,l = arguments.length;i < l; i++){
a = a * arguments[i];
}
return a;
};
var proxyMult = (function(){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args] = mult.apply(this,arguments);
}
})();
proxyMult(1,2,3,4);//开始 24
proxyMult(1,2,3,4);//24