前言

代理模式简而言之就是自己要做的事情交给别人来做，比如说在跨域处理中我们大都是通过代理来处理跨域问题。在实际vue项目开发中，我们本地开发的域名和服务器通常不是在同一个域名下，那么这时候我们都会在vue下配置一个代理服务器，也就是在devserve设置一个proxy来进行接口代理访问

代理模式实现

在es6中，提出了关键词proxy，甚至vue3.0基本思想也是通过proxy来实现的，那么我们就来看一下如何通过proxy来实现代理模式

  2. // 明星
  3. let star = {
  4.     name: '张XX',
  5.     age: 25,
  6.     phone: '13910733521'
  7. }
  9. // 经纪人
  10. let agent = new Proxy(star, {
  11.     get: function (target, key) {
  12.         if (key === 'phone') {
  13.             // 返回经纪人自己的手机号
  14.             return '18611112222'
  15.         }
  16.         if (key === 'price') {
  17.             // 明星不报价，经纪人报价
  18.             return 120000
  19.         }
  20.         return target[key]
  21.     },
  22.     set: function (target, key, val) {
  23.         if (key === 'customPrice') {
  24.             if (val < 100000) {
  25.                 // 最低 10w
  26.                 throw new Error('价格太低')
  27.             } else {
  28.                 target[key] = val
  29.                 return true
  30.             }
  31.         }
  32.     }
  33. })
  35. // 主办方
  36. console.log(agent.name)
  37. console.log(agent.age)
  38. console.log(agent.phone)
  39. console.log(agent.price)
  41. // 想自己提供报价（砍价，或者高价争抢）
  42. agent.customPrice = 150000
  43. // agent.customPrice = 90000  // 报错：价格太低
  44. console.log('customPrice', agent.customPrice)

其实很简单，就是说我们操纵对象具体使用方法会被proxy拦截到，交由proxy第二个参数对象handler来执行，于是便实现了代理模式。