JavaScript设计模式（三）：代理模式

[yangrenmu]

定义

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

代理模式有点中间商那个意思。当某个对象，不满足我们的需求时，可以使用一个代理对象来控制目标对象的访问，经过代理的一系列操作，使目标对象满足了我们的需求。

常见的代理模式

代理模式有很多种，在 JavaScript 中常用的是虚拟代理和缓存代理。

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

const myImage = (function () {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)
  return {
    setSrc: function (src) {
      imgNode.src = src
    }
  }
})()

const proxyImage = (function () {
  const proxyImage = new Image()
  proxyImage.onload = function () { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setProxySrc: function (src) {
      myImage.setSrc('loading.png') // 本地 loading 图片
      proxyImage.src = src
    }
  }
})()

proxyImage.setProxySrc('https://images.jpg')

代理负责预加载图片，给img节点设置src和图片的预加载这两个逻辑分离出来。如果以后我们不需要预加载，只要去掉代理就可以了。

缓存代理的例子

const mult = function () {
  let a = 1
  for (let i = 0, len = arguments.length; i < len; i++) {
    a = a * arguments[i]
  }
  return a
}

const proxyMult = (function () {
  const cache = {}
  return function () {
    const tag = Array.prototype.join.call(arguments, ',')
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()
console.log(proxyMult(1, 2, 3, 4)) // 24
console.log(proxyMult(1, 2, 3, 4)) // 24，使用的缓存