设计模式4—代理模式【结构型】

https://www.cnblogs.com/loveyt/p/11410593.html  或  https://www.cnblogs.com/loveyt/p/11410593.html（推荐）

一、虚拟代理：

　　1、案例

// 创建一个本体对象
var myImage = (function(){
  // 创建标签
  var imgNode = document.createElement( 'img' );
  // 添加到页面
  document.body.appendChild( imgNode );
  return {
    // 设置图片的src
    setSrc: function( src ){
      // 更改src
      imgNode.src = src;
    }
  }
})();

// 创建代理对象
var proxyImage = (function(){
  // 创建一个新的img标签
  var img = new Image;
  // img 加载完成事件
  img.onload = function(){
    // 调用 myImage 替换src方法
    myImage.setSrc( this.src );
  }
  return {
    // 代理设置地址
    setSrc: function( src ){
      // 预加载 loading
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // 赋值正常图片地址
      img.src = src;
    }
  }
})();

proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

　　2、代理的意义：

　　　  代理将 两个功能分开，本体执行主要 或 必要的 功能，而代理执行 可有可无的功能。当代理 的功能不需要时，不用改函数里面的代码。

　　　  只要 改成 请求 本体，而不是请求 代理对象即可。

// 预加载
proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

// 不用预加载
myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

二、缓存代理