设计模式之代理模式

代理模式:

代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。

模式作用:

  1. 远程代理(一个对象将不同空间的对象进行局部代理)
  2. 虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位图代替真图)
  3. 安全代理(控制真实对象的访问权限)
  4. 智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

注意事项:

  1. 不能滥用代理,有时候仅仅是给代码增加复杂度

例子1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//代理模式需要3方
//1.买家
function maijia(name){
this.name=name;
}
// 2.中介 卖房
function zhongjie(){
}
zhongjie.prototype.maifang=function(){
new fangdong(new maijia("小明")).maifang('20万');
}
// 3.房东 坐等收钱
function fangdong(maijia){
this.maijia_name=maijia.name;
this.maifang=function(money){
console.log("收到了来自["+this.maijia_name+"]"+money+"人民币");
}
}
(new zhongjie).maifang();//收到了来自[小明]20万人民币

例子2:

虚拟代理实现图片预加载

虚拟代理是把一些开销很大的对象,延迟到真正需要到它的时候才去创建
在web开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的往往有段时间会是一片空白.常用的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加在好了再把它填充到img节点了,这种场景就很适合使用虚拟代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var myImage=(function(){
var imgNode=new Image();
document.body.appendChild(imgNode);
return {
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.gif');
img.src=src;
}
}
})()
proxyImage.setSrc("http://www.baidu.com/img/bdlogo.png")