JavaScript 设计模式之代理模式

代理模式

代理模式实现图片预加载

let img = (function () {
  let imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  return {
    setSrc: function (src) {
      imgNode.src = src;
    },
  };
})();
let proxyImg = (function () {
  let image = new Image();
  image.onload = function () {
    console.log(this);
    console.log(this.src);
    img.setSrc(this.src);
  };
  return function (src) {
    img.setSrc("./img/loading.gif");
    setTimeout(function () {
      image.src = src;
    }, 2000);
  };
})();
proxyImg("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");

缓存代理

计算乘积

// 计算乘积函数
let mult = function () {
  let result = 1;
  for (let i = 0, l = arguments.length; i < l; i++) {
    result *= arguments[i];
  }
  return result;
};
// 缓存函数
let 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));
  };
})();
console.log(proxyMult(1, 2, 3, 4, 5, 6)); // 720
console.log(proxyMult(1, 2, 3, 4, 5, 6)); // 720

利用高阶函数动态创建缓存代理

// 计算乘积
let mults = function () {
  let result = 1;
  for (let i = 0, l = arguments.length; i < l; i++) {
    result *= arguments[i];
  }
  return result;
};
// 计算和
let plus = function () {
  let result = 0;
  for (let i = 0, l = arguments.length; i < l; i++) {
    result += arguments[i];
  }
  return result;
};
// 动态创建缓存代理
let createProxyFactory = function (fn) {
  let cache = {};
  return function () {
    let args = Array.prototype.join.call(arguments, ",");
    if (args in cache) {
      return cache[args];
    }
    return (cache[args] = fn.apply(this, arguments));
  };
};
let proxyMults = createProxyFactory(mults);
let proxyPlus = createProxyFactory(plus);
console.log(proxyMults(1, 2, 3, 4, 5, 6)); // 720
console.log(proxyPlus(1, 2, 3, 4, 5, 6)); // 21