js设计模式——代理模式

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

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

一、代理和本体接口的一致性

当代理和本体接口保持一致时,在客户看来,代理对象和本体对象是一致的,代理接手请求的过程对于用户来说是透明的,用户并不清楚代理和本体的却别,这样做有两个好处:

  • 用户可以放心地请求代理,他只关心是否能得到想要的结果
  • 在任何使用本体的地方都可以替换成使用代理

二、虚拟代理

1. 图片预加载

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

常见的做法是先用一张 loading 图片占位,接着用异步的方法加载图片,等图片加载好后再把它填充到 img 节点中。由于此时我们读取的是目标图片的缓存,因此从 loading图片切换到 img图片的速度会非常快。

/** 本体对象,加载图片 */
const myImage = (function() {
  const imgNode = document.createElement('img')
  document.body.appendChild(imgNode)

  return {
    setSrc: function(src) {
      imgNode.src = src
    }
  }
})()

/** 代理对象,创建个 Image 对象来加载图片,等待图片加载完毕再将图片填充回 img 节点 */
const proxyImage = (function() {
  const img = new Image
  
  img.onload = function() {
    myImage.setSrc(this.src)
  }
  
  return {
    setSrc: function(src) {
      myImage.setSrc('本地的loading图片')
      img.src = src
    }
  }
})()

// 使用虚拟代理预加载图片
proxyImage.setSrc('你要加载的图片')

三、缓存代理

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

1. 计算乘积

首先创建一个用于求乘积的函数:

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

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

接着加入缓存代理函数:

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

四、其他代理模式

  • 防火墙代理: 控制网络资源的访问,保护主机不让“坏人”接近。
  • 远程代理: 为一个对象在不同的地址空间提供局部代表, 在 Java 中,远程代理可以时另一个虚拟机中的对象。
  • 保护代理: 用户对象应该有不同访问权限的情况。
  • 智能引用代理: 取代了简单的指针,它在访问对象时执行一些附加操作,比如计算一个对象被引用的次数。
  • 写时复制代理: 通常用于复制一个庞大对象的情况。写时复制代理延迟了复制的过程,当对象被真正修改时,才对它进行复制操作。写时复制代理时虚拟代理的一种变体, DLL (操作系统中的动态链接库)时其典型运用场景。

你可能感兴趣的:(代理模式,javascript,设计模式)