设计模式代理

虚拟代理实现图片预加载

预加载图片在Web开发中十分常用，其通过异步的方式加载图片，利用一张loading图片占位。等图片加载好之后把图片填充到img节点中。

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('realImage.jpg')

通过proxyImage间接的访问了MyImage。proxyImage控制了客户对MyImage的访问，并且在此过程中加入了一些额外的操作，比如在真正的图片加载好之前，先把img节点的src设置为一张loading图片。