JavaScript设计模式--代理模式1

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

代理模式主要发生在俩个对象的交流方式中，由于某些特定的原因，俩个对象无法直接交流，需要通过特殊的方式进行交流，日常生活中这种方式发生的也比较多，比如我们找房子或者其他需要通过中介的方式，通过中介来帮我们联系房东，房东将房子的出租权利代理给中介进行找租户，这样的方式就叫做代理，代理其实就是俩个互相访问对象的替身。

JSONP

说到代理我们可以发现一个经典的代理方式就是我们的JSONP

JSONP是为了解决浏览器之间的跨域问题，由于浏览器的同源策略，而src标签不受浏览器同源策略的限制，并且发送的是get请求，所以JSONP可以通过用src对接口进行请求而不会有同源限制，并且可以先声明一个回调函数的方法，当请求完成之后服务端带上回调函数的方法名进行触发回调函数，前端可以拿到服务端返回的数据，JSONP在这里起到的作用就是代理

Proxy

在ES6中，存在proxy构建函数能够让我们轻松使用代理模式

代理模式一般分为俩种，分别是缓存代理和虚拟代理

缓存代理

缓存代理顾名思义就是将数据进行缓存，再次请求的时候会将上一次的结果进行返回

var muti = function () {
  console.log("开始计算乘积");
  var a = 1;
  for (var i = 0, l = arguments.length; i < l; i++) {
    a = a * arguments[i];
  }
  return a;
};

var proxyMult = (function () {
  var cache = {};
  return function () {
    var 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

缓存代理是将第一次计算的结果进行缓存，比如上面的代码我们将函数进行自执行，并且返回一个函数供外部进行使用，在函数中传参是否存在cache中，如果已经存在则将已经存储的结果进行返回