前端设计模式之代理模式

前言

传送地址：

前端设计模式之工厂模式

上一篇，我们通过宠物店简单了解工程模式在前端开发中的运用开发。那么继续我们23篇设计模式的链路，我们来了解一下代理模式在前端中的运用

代理模式

什么是代理模式？

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

为什么要使用代理模式

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

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

举个栗子

既然提到了中介，那就不得不说，在我们日常生活中，充满了各种中介，例如房产中介、4s店、购票处等。

其实上一篇的宠物店也算是一种中介，因为所有的宠物来源都来不会直接在商店产生，他们有的来自于野外，有的来自于养殖场等。

既然我们要把生意做大做强，那我们这个时候就要通过中间商来帮助我们将生意扩大。

class headPet { // 宠物总店提供了最基础的出售，回购宠物的服务
  sellPet(name) { // 出售宠物
    console.log('出售一只宠物', name)
  }
  desert(name) { // 遗弃宠物
    console.log('遗弃一只宠物', name)
  }
}

class subPet extends headPet { // 宠物分店，我们提供搭配服务，以便更好地卖宠物
  constructor() {
    super()
  }
  sell(name) { // 出售宠物
    this.sellPet(name)
  }
  sellPetFood(name) { // 购买宠物食物送宠物活动
    console.log('搭配了一大波食粮')
    this.sellPet(name)
  }
  sellPetCage(name) { // 购买宠物笼子送宠物活动
    console.log('搭配一个大笼子')
    this.sellPet(name)
  }
}

const subPet1 = new subPet()
subPet1.sell('tom')
subPet1.sellPetFood('tom')
subPet1.sellPetCage('tom')

从上面简单的程序，我们可以看到，作为分店，实际上卖出宠物的时候，还搭配了各种服务，比如宠物食粮、宠物笼以便于我们更好地去出售宠物，最后我们还是调用了总店的服务，但分店还提供了额外的服务，使得我们的生意能够扩大，这是分店赋予总店的能力提升。

项目实战

接下来，我们使用代理模式的思想在项目中进行实战演练。

代理请求-读取本地缓存

function ajax(params) { // 实际发送请求方法
  console.log(`发送请求${params}`)
  return params + Math.random()
}

const storage = new Map();

function cache(params) { // 缓存模式
  if (storage.has(params)) {
    return storage.get(params)
  }
  const value = ajax(params)
  storage.set(params, value)
  return value
}

function proxyAjax(params) { // 代理ajax请求
  return cache(params)
}

console.log(proxyAjax(1)) // 发送参数为1的请求
console.log(proxyAjax(1)) // 发送相同参数为1的请求，cache读取到缓存，所以不再调用ajax方法，直接返回结果
console.log(proxyAjax(2)) // 发送参数为2的请求，此时未读取到缓存，直接调用ajax方法，从后台请求

上述代码不难看出，我们代理了一层 ajax 请求方法，加入了一道 cache 层，这样可以帮助我们在相同参数的请求情况下，不去调用 http 请求，节约部分请求时间跟资源。

建议在项目实际使用中，尽量根据业务来判断，不要随意的缓存所有请求，一般缓存 get 请求或者数据不易变化的数据请求。

另外可以在此功能中继续拓展，加入缓存时间概念，这样可以在一定时间内使得相同参数的请求可以直接从缓存读取。

埋点功能-代理全局fetch

const oldFetch = window.fetch;

function newFetch(url, init) { // 重新fetch方法，代理fetch本身的功能，添加埋点功能
  const { method = 'GET', body } = init || {};
  const fetchObj = {
    url: url,
    method: method,
    body: body,
    start: performance.now(),
  }
  
  ajaxEventTrigger.call(fetchObj, AJAX_START); // 自定义埋点监听方法
  
  return oldFetch.apply(this, arguments).then(function (response) {
    fetchObj.end = performance.now();
    if (response.ok) {
      ajaxEventTrigger.call(fetchObj, AJAX_END)
    } else {
      ajaxEventTrigger.call(fetchObj, AJAX_ERROR)
    }
    return response
  }).catch(function (error) {
    fetchObj.end = performance.now();
    fetchObj.error = error
    ajaxEventTrigger.call(fetchObj, AJAX_ERROR);
    throw error
  })
}

window.fetch = newFetch;

此例子是重写原生 fetch 方法，用类似代理模式的方法，代理全局的 fetch 方法，进行请求埋点

参考此例子可以重写小程序的生命周期函数等其他功能，添加自定义埋点事件，具体在接下来的埋点性能博客会具体实战演练

缓存代理-处理缓存时间

class Storage {

  constructor(props) { // 根据类型跟缓存时间，初始化缓存方法
    const { type, time } = props
    this.type = type
    this.time = time
    this.storageType = {
      local: 'localStorage',
      session: 'sessionStorage'
    }
  }

  setItem(key, value) { // 代理原生缓存方法，添加缓存时间
    window[this.storageType[this.type]].setItem(key, JSON.stringify({
      value,
      time: new Date().getTime()
    }));
  }

  getItem(key) { // 代理原生获取缓存方法，根据缓存时间，判断数据是否过期
    try {
      const { time, value } = JSON.parse(window[this.storageType[this.type]].getItem(key));
      const now = new Date().getTime()
      if (now > time + this.time) {
        window[this.storageType[this.type]].removeItem(key);
        return null
      } else {
        return value
      }
    } catch (e) {
      return null
    }
  }
}

const local = new Storage({ type: 'local', time: 30000 }) // 初始化localStorage,添加5分钟缓存时效
const session = new Storage({ type: 'session', time: 30000 }) // 初始化sessionStorage,添加5分钟缓存时效
local.setItem(1, 2)
local.getItem(1)
session.setItem(3, 4)
session.getItem(3)

此方法可以继续拓展例如根据存储的类型来做区分

附加信息

完整的 demo 地址：项目实战 demo，喜欢的朋友可以 star 一下，后续会根据设计模式博文的推出，逐步的将此项目继续拓展出来。

手动狗头镇楼

本文使用 mdnice 排版