4.设计模式（代理模式）

代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问 image.png

代码实现
//图片预加载：先用一张loading图片占位，然后用异步的方式加载图片，等图片加载好后把他填充到img节点里
var myImg = (function(){
  var ImgNode = document.createElement("img");
  document.body.appendChild(ImgNode);
  return{
    setSRC:function(src){
      ImgNode.src = src;
    }
  }
})()
var ImgProxy = (function(){
  var img = new Image;
  img.onload = function(){
    myImg.setSRC(this.src)
  }
  return{
    setSRC:function(src){
      myImg.setSRC("file:// /C:/Users/svenzeng/Desktop/loading.gif");
      img.src = src;
    }
  }
})()
ImgProxy.setSRC( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
实际上，我们需要的是给img节点设置src,预加载图片只是一个锦上添花的功能，如果能把这个操作放在另一个对象里面，自然是一个非常好的方法，于是代理的作用就体现出来了
//高阶函数动态创建代理，通过传入高阶函数，为计算方法创建缓存代理
function add(){
  var a = 0;
  for(var i = 0;  i < arguments.length; i++){
    a = a + arguments[i]
  }
  return a;
}
function mult(){
  var a = 1;
  for(var i = 0; i < arguments.length;i++){
    a = a*arguments[i]
  }
  return a
}
var calcProxy = function(fn){
  var result = {};
  return function(){
    let key = Array.prototype.join.call(arguments,"-");
    if(result[key]){
      return result[key]
    }
    return result[key] = fn(...arguments)
  }
}
var proxyMult = calcProxy( mult ), 
proxyPlus = calcProxy( add ); 
console.log ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24 
console.log ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24 
console.log ( proxyPlus( 1, 2, 3, 4 ) ); // 输出：10 
console.log ( proxyPlus( 1, 2, 3, 4 ) );
//虚拟代理合并http请求：文件同步功能，当选中一个checkbox的时候，它对应文件会被同步到另一台备用服务器上，解决方案写一个代理函数来收集一段时间之内的请求，最后一次性发送给服务器setTimeout

总结：当真正发现不方便直接访问某个对象的时候使用代理模式