在web开发中，图片预加载是一种很常用的技术。
如果给一个img标签节点设置src属性，图片体积过大，或者网路不佳的情况下，往往会有比较长时间的空白，体验不好。
556D0667-BD7C-4B27-BA16-74D05067DEE8.png
常见的做法是先用一张loading图占位，然后异步的方式加载图片。等图片加载好了再填充到img节点里。
<pre>
var myImage = (function(){
var imgNode = document.createElement('img');
document.body.appendChild(imgNode) ;
var img = new Image ;
img.onload = function() {
imgNode.src = img.src ;
}
return { setSrc : function(src){
imgNode.src = '../testImages/7.jpg' ; }
}})();
myImage.setSrc('../testImages/7.jpg');
</pre>
上面的一段代码，myImage 对象 除了负责给img节点 设置src，还要负责预加载图片。
在面向对象设计中，如果一个对象承担了多项职责，就意味着这个对象可能会变的巨大。//我就见到过一个函数好几百行。。。
面向对象设计 鼓励把行为分开，分散为更细粒度的对象之中。
原因显而易见，如果一个对象承担的职责过多，耦合性会很高，这种耦合会导致脆弱和低内聚的设计，容易发生意外。
现在回到代码中去， 如果我们只是加载体积不大的图，若干年后网络足够快，我们不在需要预加载了，要想把这段代码删掉，这时候就不得不改动myimage对象了。
实际上，我们需要做的只是给img 设置src,如果能把这个操作放到另一个对象中去操作，那当然是极好的。
下面我们重构一下这段代码：
<pre>
var myImage = (function(){
var imageNode = document.createElement('img');
document.body.appendChild(imageNode) ;
return {
setSrc : function(src){
imageNode.src = src ;
}
}})();
var proxyImage = (function(){
var img = new Image;
img.onload = function(){
myImage.setSrc( this.src);
}
return {
setSrc : function (src){
myImage.setSrc('../testImages/loading.gif');
img.src = src ;
}
}})();
proxyImage.setSrc('../testImages/1.jpg');
</pre>
现在我们通过proxyImage间接的访问myImage。
proxyImage控制了客户对myImage 的访问，而且在这个过程中还能加入一些其他的操作，比如图片加载完成之前，显示loading图,体验会好一些。
小结：
通过代理对象，添加了新的行为，符合开放－封闭 原则。
给img 节点设置src 和图片 预加载这两个功能被隔离开到两个对象里，
他们可以各自变化 而不影响到另一个，这个是很重要的。
况且，加入有一天我们不需要这个预加载了，那只需要改变请求体 而不是请求代理对象就好了。
网友评论