<h1>虚拟代理实现图片的预加载</h1>
<p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图片的位置往往有一片
空白。常见的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img节点里,这种场景就很适合是用虚拟代理。</p>
<script>
var myImage = (function(){
var imgNode = document.createElement("img");
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("target.gif");
</script>
<p>现在我们通过proxyImage间接的访问myImage.proxyImage控制了客户对myImage的访问,并在此过程中加入
了一些额外的操作,比如在真正的图片加载好之前,先把Img节点的src设置成一张本地的loading.gif图片.</p>
<h1>代理模式的意义</h1>
<p>为了说明代理模式的意义,就不得不引入面向对象设计的原则——单一职责原则</p>
<p>单一职责原则指的是,就一个类(通常也包括对象和函数)而言,应该仅有一个引起他变化的原因。如果一个对象承担了多项
职责,就意味着这个对象将变得巨大,因其他变化的原因可能会有多个。</p>
<p>面向对象设计鼓励奖行为分不到细粒度的对象之中,如果一个对象承担的职责过多,等于把这些指责耦合到一起,这种耦合会导致
脆弱和低内聚的设计。当他发生变化时,设计可能会遭到意外的破坏。</p>
<p>另外,在面向对象的程序设计中,大多数情况下,若违反其他任何原则,同时将违反开放——封闭原则。</p>
<h1>代理和本体接口的一致性</h1>
<p>如果有一天我们不需要预加载,那么久不需要代理对象,可以选择直接请求本体。其中的关键是代理对象和本体对象都提供了setSrc方法,用户并不清楚代理和本体的区别,
这样做有两个好处:1.用户可以放心请求代理,他关心是否能得到想要的结果;2.在任何使用本体的地方都可以替换成使用代理。</p>