前端设计模式（五）：代理模式

一、代理模式的定义

​ 代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介

二、为什么要使用代理模式

中介隔离作用：在某些情况下，一个客户类不想或者不能直接引用一个委托对象，而代理类对象可以在客户类和委托对象之间起到中介的作用，其特征是代理类和委托类实现相同的接口。

开闭原则，增加功能：代理类除了是客户类和委托类的中介之外，我们还可以通过给代理类增加额外的功能来扩展委托类的功能，这样做我们只需要修改代理类而不需要再修改委托类，符合代码设计的开闭原则。代理类主要负责为委托类预处理消息、过滤消息、把消息转发给委托类，以及事后对返回结果的处理等。代理类本身并不真正实现服务，而是同过调用委托类的相关方法，来提供特定的服务。真正的业务功能还是由委托类来实现，但是可以在业务功能执行的前后加入一些公共的服务。例如我们想给项目加入缓存、日志这些功能，我们就可以使用代理类来完成，而没必要打开已经封装好的委托类

三、例子

保护代理

//房子类
class House {
  constructor(name) {
    //名称
    this.name = name;
    //出租中状态
    this.state = "renting";
  }
  //出租
  rentOut() {
    this.state = "rented";
  }
  //是否已经出租
  hasRent() {
    return this.state === "rented";
  }
}

//房产中介
class Agent {
  constructor() {
    //房源集合
    this.weakMap = new WeakMap();
  }
  //添加房源
  addHouse(house) {
    this.weakMap.set(house, house);
  }
  //查找房源
  hasHouse(house) {
    return this.weakMap.has(house);
  }
  //出租房源
  rentHouse(house) {
    if (this.hasHouse(house)) {
      if (house.hasRent()) {
        console.log(house.name, "房源已出租");
      } else {
        // 额外可以写一些校验代码，比如看房的人经济能力，体现出代理类的增强作用
        console.log(house.name, "可以看房");
      }
    } else {
      console.log(house.name, "没有此房源");
    }
  }
}

const houseA = new House("houseA");
const houseB = new House("houseB");
const houseC = new House("houseC");
const agent = new Agent();
agent.addHouse(houseA);
agent.addHouse(houseB);

//B房源出租
houseB.rentOut();
agent.rentHouse(houseA); //houseA 可以看房
agent.rentHouse(houseB); //houseB 房源已出租
agent.rentHouse(houseC); //houseC 没有此房源

上面这个例子就是一种“保护代理”，保护代理可以过滤掉一些不符合的请求或要求。

虚拟代理

Web 开发中，图片预加载是一种常用的技术，如果直接给某个 img 标签节点设置 src 属性，由于图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。常见的做法是先用一张loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到 img 节点里，这种景就很适合使用虚拟代理。

var myImage = (function(){
    var imgNode = document.createElement( 'img' );     
    document.body.appendChild( imgNode );
    return {
        setSrc: function( src ){
             imgNode.src = src; 
        }
    } 
})();
var proxyImage = (function(){ 
    var img = new Image; 
    img.onload = function(){
        myImage.setSrc( this.src ); 
    }
    return {
        setSrc: function( src ){
             myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
             img.src = src;  
        }
    } 
})();
proxyImage.setSrc('http://imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

利用代理可以实现很多操作，例如还有缓存代理(缓存结果)。代理本质就是一个中间商，帮你做一些杂事和额外的操作，让你专注于结果

标签：src,name,委托,house,前端,代理,new,设计模式
来源： https://www.cnblogs.com/suanyunyan/p/16417332.html