JavaScript 设计模式 —— 代理模式

如果觉得文章不错，欢迎关注、点赞和分享！

持续分享技术博文，关注微信公众号 👉🏻 前端LeBron

好久不见，怎么这么久没更新了呢？

Emm…最近绩效评估季，绩效总结、360 评估，要写的东西比较多嚯，耽搁了一段时间

废话不多说，迎来 JavaScript 设计模式第三篇：代理模式 ~

代理模式概念

代理模式给某一个对象提供一个代理对象或者占位符，并由代理对象控制原对象的引用，也可以理解为对外暴露的接口并不是原对象。通俗地讲，生活中也有比较常见的代理模式：中介、寄卖、经纪人等等。而这种模式存在的意义在于当访问者与被访问者不方便直接访问/接触的情况下，提供一个替身来处理事务流程，实际访问的是替身，替身将事务做了一些处理/过滤之后，再转交给本体对象以减轻本体对象的负担。

最简代理模式实现

由简入繁

上面了解了代理模式的相关概念，接下来我们用一个最简代理模式的例子实现一下代理模式，从代码中感受代理模式的流程

Talk is Cheap. Show me the code!

• client向服务端发送一个请求
• proxy代理请求转发给服务端
• 服务端处理请求

const Request = function () {
   };
​
const client = {
   
  requestTo: (server) => {
   
    const req = new Request();
    server.receiveRequest(req);
  },
};
​
const server = {
   
  handleRequest: (request) => {
   
    console.log('receive request: ', request);
  },
};
​
const proxy = {
   
  receiveRequest: (request) => {
   
    console.log('proxy request: ', request);
    server.handleRequest(request);
  },
};
​
client.requestTo(proxy);
/**
 * proxy request:  Request {}
 * receive request:  Request {}
 */

保护代理

保护代理，顾名思义是为了保护本体

基于权限控制对资源的访问

下面用一个场景和例子来实际感受一下，基于上面最简代理模式进行扩展，我们可以使用保护代理实现，过滤未通过身份校验的请求、监听服务端 ready 才发送请求等操作，保护实体服务端不被非法请求攻击和降低服务端负担。

const proxy = {
   
  receiveRequest: (request) => {
   
    // 校验身份
    const pass = validatePassport(request);
    if (pass) {
   
      // 监听服务端 ready 后代理请求
      server.listenReady(() => {
   
        console.log('proxy request: ', request);
        server.handleRequest(request);
      });
    }
  },
};

虚拟代理

虚拟代理作为创建开销大的对象的代表，协助控制创建开销大的资源，直到真正需要一个对象的时候再去创建它，由虚拟代理来扮演对象的替身，对象创建后，再将资源直接委托给实体对象

下面将会实现一个虚拟代理实现图片预加载的例子，从代码和实际场景中感受虚拟代理的作用。

• 实体图片对象挂载在body中

• 由于加载图片耗时较高，开销较大，加载图片资源时

  • 将实体图片对象设置为loading状态
  • 使用替身对象执行图片资源加载
  • 监听替身对象资源加载完成，将资源替换给实体对象

const img = (() => {
   
  const imgNode = document.createElement('img');
  document.body.appendChi