JavaScript代理模式

1 什么是代理模式

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

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象，替身对象对请求做出一些处理之后，再把请求转交给本体对象。

2 实现一个简单的代理模式

举个例子，A与B是好朋友，但是有一天两人吵架了，于是A决定向B发消息道歉，这段行为用代码简单描述一下，如下所示：

var Message = function () {};

var A = {
  // 发送消息方法
  sendMessage: function (target) {
    var message = new Message();
    target.receiveMessage(message);
  },
};

var B = {
  // 接收消息方法
  receiveMessage: function (message) {
    console.log("收到消息：" + message);
  },
};

A.sendMessage(B);

但是，如果B拉黑了A，导致A无法通过发消息给B，只能通过两人的共同好友C来表达，这时A通过C来向B道歉，如下所示：

var Message = function () {};

var A = {
  // 发送消息方法
  sendMessage: function (target) {
    var message = new Message();
    target.receiveMessage(message);
  },
};

var C = {
  // C接收消息，并发送给B
  receiveMessage: function (message) {
    B.receiveMessage(message);
  },
};

var B = {
  // 接收消息方法
  receiveMessage: function (message) {
    console.log("收到消息：" + message);
  },
};

A.sendMessage(C);

如果C很了解B，B心情好的时候会与A和解，B心情不好的时候调解会失败，那么C可以通过监听B的心情变化来决定什么时候发消息给B，代码如下：

var Message = function () {};

var A = {
  // 发送消息方法
  sendMessage: function (target) {
    var message = new Message();
    target.receiveMessage(message);
  },
};

var C = {
  // 接收消息，并发送给B
  receiveMessage: function (message) {
    // 监听B的好心情，在心情好时发消息
    B.listenGoodMood(function () {
      B.receiveMessage(message);
    });
  },
};

var B = {
  // 接收消息方法
  receiveMessage: function (message) {
    console.log("收到消息：" + message);
  },
  // 监听心情变化方法
  listenGoodMood: function (fun) {
    // 假设1s之后心情变好
    setTimeout(() => {
      fun();
    }, 1000);
  },
};

A.sendMessage(C);

3 保护代理和虚拟代理

在上述例子中，代理C可以帮助B过滤掉一些消息，比如B不认识的人，或者B讨厌的人，这些消息在代理C中被过滤掉，这叫做保护代理。

保护代理用于控制不同权限的对象对目标对象的访问，但在JavaScript并不容易实现保护代理，因为我们无法判断谁访问了某个对象。

C可以选择在B心情好的时候发送消息，使成功概率增加，这叫做虚拟代理。虚拟代理可以把一些开销很大的对象，延迟到真正需要它的时候才去创建。例如：

var C = {
  // 接收消息，并发送给B
  receiveMessage: function () {
    // 监听B的好心情，在心情好时发消息
    B.listenGoodMood(function () {
      var message = new Message();
      B.receiveMessage(message);
    });
  },
};

4 虚拟代理实现图片预加载

Web开发中，图片预加载是一种常用的技术，如果直接给某个img标签节点设置src属性，如果图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。

常见的做法是先用一张loading图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到img节点里，这种场景就很适合使用虚拟代理。

下面我们来实现这个虚拟代理，首先创建一个普通的本体对象，这个对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口，外界调用这个接口，便可以给该img标签设置src属性：

var myImage = (function () {
  // 创建img标签
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  return {
    setSrc: function (src) {
      // 设置图片src方法
      imgNode.src = src;
    },
  };
})();

myImage.setSrc("XXXXXXX");

如果我们把网速调慢，然后通过MyImage.setSrc给该img节点设置src，可以看到，在图片被加载好之前，页面中有一段长长的空白时间。

现在开始引入代理对象proxyImage，通过这个代理对象，在图片被真正加载好之前，页面中将出现一张占位的loading.gif, 来提示用户图片正在加载。代码如下：

var myImage = (function () {
  // 创建img标签
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  return {
    setSrc: function (src) {
      // 设置图片src方法
      imgNode.src = src;
    },
  };
})();

// 代理对象，在图片加载好之前，放一张loading图片
var proxyImage = (function () {
  var img = new Image();
  img.onload = function () {
    myImage.setSrc(this.src);
  };
  return {
    setSrc: function (src) {
      myImage.setSrc("XXXXXXXXXX");
      img.src = src;
    },
  };
})();

proxyImage.setSrc("XXXXXXXXXX");

5 虚拟代理合并HTTP请求

例如以下场景，上学时每天都需要写作业，作业最后交给老师批阅，但是老师可能带了许多个班级，每个班级又有很多学生，如果老师亲自收作业，会浪费大量的时间，如果我们先把作业交给小组长，小组长再交给班长，由班长负责交给老师，这样可以节省很多工夫。

在Web开发中，网络请求是很大的开销。假设我们在做一个文件同步的功能，当我们选中一个checkbox的时候，它对应的文件就会被同步到另外一台备用服务器上面：

<input type="checkbox" id="1" />1 <input type="checkbox" id="2" />2
<input type="checkbox" id="3" />3 <input type="checkbox" id="4" />4
<input type="checkbox" id="5" />5 <input type="checkbox" id="6" />6
<input type="checkbox" id="7" />7 <input type="checkbox" id="8" />8
<input type="checkbox" id="9" />9

var synchronousFile = function (id) {
  console.log("开始同步文件，id 为: " + id);
};

var checkbox = document.getElementsByTagName("input"); // 获取所有的checkbox
for (var i = 0, c; (c = checkbox[i++]); ) {
  // 每点击checkbox一次，就发送一次文件
  c.onclick = function () {
    if (this.checked === true) {
      synchronousFile(this.id);
    }
  };
}

当我们选中4个checkbox的时候，依次往服务器发送了4次同步文件的请求。而点击一个checkbox并不是很复杂的操作，用户可以再很短的时间内快速进行checkbox的点击工作，由此可见，如此频繁的网络请求将会带来相当大的开销。

这时，我们可以通过一个代理函数proxySynchronousFile来收集一段时间之内的请求，最后一次性发送给服务器。比如等待2秒之后才把这2秒之内需要同步的文件ID打包发给服务器，如果不是对实时性要求非常高的系统，2 秒的延迟不会带来太大副作用，却能大大减轻服务器的压力。

var synchronousFile = function (id) {
  console.log("开始同步文件，id 为: " + id);
};

var proxySynchronousFile = (function () {
  var cache = [], // 保存2s之内需要同步的文件id
    timer; // 定时器
  return function (id) {
    cache.push(id); // 推入id
    if (timer) return; // 如果定时器已经启动，不再执行下面的操作

    timer = setTimeout(() => {
      synchronousFile(cache.join(",")); // 向服务器发送文件
      clearTimeout(timer); // 清空定时器
      timer = null;
      cache.length = 0; // 清空id集合
    }, 2000);
  };
})();

var checkbox = document.getElementsByTagName("input"); // 获取所有的checkbox
for (var i = 0, c; (c = checkbox[i++]); ) {
  // 每点击checkbox一次，就发送一次文件
  c.onclick = function () {
    if (this.checked === true) {
      proxySynchronousFile(this.id);
    }
  };
}

6 缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。

---

例如：计算乘积，假设计算乘积是一个很复杂的运算

先创建一个计算乘积的函数：

var mult = function () {
  let result = 1;
  for (let i = 0, l = arguments.length; i < l; i++) {
    result = result * arguments[i];
  }
  return result;
};

mult( 2, 3 ); // 输出：6 
mult( 2, 3, 4 ); // 输出：24

现在加入缓存代理函数：

var mult = function () {
  let result = 1;
  for (let i = 0, l = arguments.length; i < l; i++) {
    result = result * arguments[i];
  }
  return result;
};

var proxyMult = (function () {
  let cache = {};
  return function () {
    let args = Array.prototype.join.call(arguments, ","); // 将参数用,拼接起来
    // 如果缓存中查到了这个参数，直接返回存好的值
    if (args in cache) {
      return cache[args];
    }
    // 如果没有查到缓存，将参数和值存在缓存中
    return (cache[args] = mult.apply(this, arguments));
  };
})();

proxyMult( 1, 2, 3, 4 ); // 输出：24 
proxyMult( 1, 2, 3, 4 ); // 输出：24

当我们第二次调用proxyMult( 1, 2, 3, 4 )的时候，mult函数并没有被计算，直接返回了之前缓存好的计算结果。