设计模式：代理模式

代理模式

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

简单点讲，就是我们被希望直接通过操作A对象的，但是直接操作太复杂了，我们希望对A对象的操作少一点，这个时候就可以使用代理模式，生成一个代理对象，把部分操作放在这个代理对象上实现。

书中举的例子是图片预加载，我们就拿这个预加载说话好了。

图片预加载

假设我们要往网页中插入一个图片节点，我们本打算这么写。

var setMyImageSrc = (function () {
  var img = document.createElement('img');
  document.body.appendChild(img);

  return function (src) {
    img.src = src;
  }
})();

setMyImageSrc('....jpg');

现在我们希望图片在加载的过程中呢，先显示一张占位图；当图片加载结束后呢，我们再替换这张图片。

代理模式的思路是这样：如果我们想要对一个对象添加功能；但是这个对象自身的功能是非常完备的；我们可以通过代理模式，添加一个代理对象，在不改动原对象的情况下，添加我们想要的功能。

在这里就是，我们需要添加一个setProxyImageSrc方法，来对setMyImageSrc添加一个预加载的功能。

var setProxyImageSrc = (function () {
  var loadingIcon = '...';
  setMyImageSrc(loadingIcon);

  var img = new Image();
  img.onload = function () {
    setMyImageSrc(img.src);
  }

  return function (src) {
    img.src = src;
  }
})();

setProxyImageSrc('jpg');

这样，在不修改setMyImageSrc源码的情况下，我们通过增加一个setProxyImageSrc的代理，就成功添加了预加载的功能。

这就是代理模式。如果谁谁谁说现在不需要这个预加载的功能了，那我们只需要去掉这一层代理就可以了；增添功能还是很方便的。

收集请求

假如有很多个checkbox，每个checkbox点击的时候都会发出一个请求，过多的点击产生的过多的请求必然会对服务器产生压力。

按照代理模式的方式，我们先给出一个基本的情景。

    var form = document.getElementById('form');
    form.onclick = function (e) {
      var o = e.target;
      if (o.type === 'checkbox' && o.checked) {
        haveSomeOp(o.id);
      }
    }

    var haveSomeOp = function (id) {
      console.log(id);
    }

现在我们有个需求，就是希望收集这些请求，不要立即发出；而是到达了一个周期时间后我们再一起发出。

    var proxySomeOp = (function () {
      var cache = [];
      var timer = null;
      
      return function (id) {
        cache.push(id);
        if (!timer) {
          timer = setTimeout(function () {
            haveSomeOp(cache.join(','));
            cache = [];
            timer = null;
          }, 1000);
        }
      }
    })();

然后我们将#form的点击事件修改为proxySomeOp就好啦。