js虚拟代理实现图片的预加载

<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>