第七章 设计模式 - 结构型 - 代理模式

代理模式的概念

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

2、代理模式 能将代理对象与被调用对象分离，降低了系统的耦合度。代理模式在客户端和目标对象之间起到一个中介作用，这样可以起到保护目标对象的作用

3、代理对象可以扩展目标对象的功能；通过修改代理对象就可以了，符合开闭原则；

常见的代理类型

1、事件代理

2、虚拟代理

   虚拟代理，其最具代表性的例子就是图片预加载
   
   预加载主要是为了避免网络延迟、或者图片太大引起页面长时间留白的问题
   
   通常的解决方案是先给 img 标签展示一个占位图，然后创建一个 Image 实例，让这个实例的 src 指向真实的目标图片地址，当其真实图片加载完成之后，再将 DOM 上的 img 标签的 src 属性指向真实图片地址。

3、缓存代理

   缓存代理常用于一些计算量较大的场景。
   
   当计算的值已经被出现过的时候，不需要进行第二次重复计算。以传参求和为例

4、保护代理

代理模式场景代码示例

1、HTML元 素事件代理

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
  let ul = document.querySelector('#ul');
  ul.addEventListener('click', event => {
    console.log(event.target);
  });
</script>

2、虚拟代理 - 图片的预加载实现

class ProxyImg {
	constructor (imgELe) {
  	this.imgELe = imgELe;
    this.DEFAULT_URL = 'xxx';
  }
  setUrl (targetUrl) {
  	this.imgEle.src = this.DEFAULT_URL;
    const image = new Image();
    
    image.onload = () => {
    	this.imgEle.src = targetUrl;
    }
    image.src = targetUrl;
  }
}

预加载主要是为了避免网络延迟、或者图片太大引起页面长时间留白的问题

通常的解决方案是先给 img 标签展示一个占位图，然后创建一个 Image 实例，让这个实例的 src 指向真实的目标图片地址，当其真实图片加载完成之后，再将 DOM 上的 img 标签的 src 属性指向真实图片地址。

3、缓存代理

缓存代理常用于一些计算量较大的场景。当计算的值已经被出现过的时候，不需要进行第二次重复计算。以传参求和为例：

const countSum = (...arg) => {
	console.log('count...');
  let result = 0;
  arg.forEach(v => result += v);
  return result;
}

const proxyCountSum = (() => {
	const cache = {};
  return (...arg) => {
  	const args = arg.join(',');
    if (args in cache) return cache[args];
    return cache[args] = countSum(...arg);
  };
})()

proxyCountSum(1,2,3,4); // count...  10
proxyCountSum(1,2,3,4); // 10

代理模式总结其一

小结

  通过修改 代理类来 增加功能，符合开放封闭模式。

使用场景

  图片预加载、缓存服务器、处理跨域 以及 拦截器 等。

代理模式总结其二

优点

  1、代理模式能将代理对象与被调用对象分离，降低了系统的耦合度。代理模式在客户端和目标对象之间起到一个中介作用，这样可以起到保护目标对象的作用
  
  2、代理对象可以扩展目标对象的功能；通过修改代理对象就可以了，符合开闭原则；

缺点

  处理请求速度可能有差别，非直接访问存在开销
  
不同点

  装饰者模式 实现上和 代理模式 类似

    1、装饰者模式  扩展功能，原有功能不变且可直接使用

    2、代理模式  显示原有功能，但是经过限制之后的