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

2022-06-27 20:02:07 阅读：115 来源： 互联网

一、代理模式的定义

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

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

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

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

三、例子

保护代理

//房子类
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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

一、代理模式的定义

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

三、例子