设计模式：代理模式

什么是代理模式

为对象提供一个替代品，让他替你做一些事情。

使用场景

最典型的要属于图片懒加载，比如一个网站有很多大图。每次加载都需要很长时间，为了优化这一操作。我们可以先给大图设定一个 loading 动画。等大图加载完毕时在给 img 标签替换为原本的图片。

Coding

图片懒加载

var proxyImg = function(id, src) {
  let img = document.getElementById(id);
  let tempImg = new Image();
  // 设置 loading 动图
  img.src = 'http://www.xxx.com/loading.gif';

  // 定义临时变量，等临时变量加载好图片后在重置图片地址
  tempImg.onload = function() {
    img.src = src;
  }

  // 重置图片地址
  tempImg.src = src;
}
// 调用
proxyImg('myImg', '大图片地址')

es6 实现方式

class ProxyImg{
  constructor(id){
    this.img = document.getElementById(id);
    // 设置 loading 动图
    this.img.src = 'http://www.xxx.com/loading.gif';
    this.tempImg = new Image();
  }
  setSrc(src) {
    this.tempImg.onload = function() {
      this.img.src = src
    }
    this.tempImg.src = src
  }
}

let proxyImg = new ProxyImg('myImg');
proxyImg.setSrc('大图片地址')

代理模式的存在意义

上面这样的图片懒加载效果，不使用代理模式代码也不会复杂到哪里去。但是你的函数的就会出现两个任务

1. 为图片设置路径
2. 处理懒加载问题

这样的代码是不规范的，在面向对象设计原则中有一种叫“单一职责原则”。指的是你的函数必须只有一个目的。如果一个函数一旦承担了多个功能，那就意味着将来要修改的时候就要考虑对其他功能的影响，一旦影响到了其他功能又可能会影响到下一个模块的功能。这是软件开发中最令人头痛的问题。所以严格遵守“单一职责原则”是降低代码耦合度的好的方法。

总结

本章我们通过一个简单的图片懒加载的例子，了解什么是代理模式。以及一种面向对象设计原则“单一职责原则”。代理模式其实还有很多应用场景， 缓存代理：比如缓存 ajax 请求，保护代理 访问前做权限判断等。在对某个对象进行读写前可以考虑是否需要 代理模式。