JavaScript 设计模式-代理模式

代理模式

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

# 实现方法
定义一个委托者和一个代理，需要委托的事情在代理中完成
使用场景: 在某些情况下，一个客户类不想或者不能直接引用一个委托对象，
而代理类对象可以在客户类和委托对象之间起到中介的作用。代理可以帮客户过滤掉一些请求并且把一些开销大的对象，
延迟到真正需要它时才创建。中介购车、代购、课代表替老师收作业

class Letter {
  constructor(name) {
    this.name = name
  }
}

// 暗恋人-小明
let XiaoMing = {
  name: '小明',
  sendLetter(proxy) {
    proxy.receiveLetter(this.name)
  }
}

// 代理人-小华
let XiaoHua = {
  receiveLetter(customer) {
    XiaoHong.listenWhenGlad(() => {
      // 当小红心情好时才送情书, 也在送情书时创建情书
      XiaoHong.receiveLetter(new Letter(customer + '的情书'))
    })
  }
}

// 女神-小红
let XiaoHong = {
  name: '小红',
  receiveLetter(letter) {
    console.info(`${this.name}收到${letter.name}`)
  },
  listenWhenGlad(fn) {
    setTimeout(() => {
      fn()
    }, 1000);
  }
}

// 委托人发送情书给代理
XiaoMing.sendLetter(XiaoHua)

# 过程分析
 * 小明发送情书给代理(小华) 并附属上自己的名字(这件事就小明就等通知了,可以去做其他的事了)
 * 代理(小华)收到情书
 * 开始等心情好的时候(干的就是中介的活)(心情好可以理解为是个异步调用,不知道什么时候心情好.女人啊)
 * 终于等到了小红心情好的时候,然后发送情书，并且告诉小红告诉自己(中介)收到信后的反应
 * 然后执行小红收到信后的回调函数

Proxy

• Proxy 是 ES6 提供的专门以代理角色出现的代理器,Vue 3.0 的响应式数据部分弃用了 Object.defineProperty，使用 Proxy 来代替它。

var proxy = new Proxy(target, handler);

Proxy-使用场景

-为了保护不及格的同学，课代表拿到全班成绩单后只会公示及格人的成绩。对考分有疑问的考生，复议后新分数比以前大10分才有权利去更新成绩

const scoreList = {
  'wang': 90,
  'li': 60,
  'zhang': 100
}

const scoreProxy = new Proxy(scoreList, {
  get: function (scoreList, name) {
    if (scoreList[name] > 69) {
      console.info('输出成绩')
      console.info(scoreList[name])
    } else {
      console.info('不及格的成绩无法公示.')
    }
  },
  set: function (scoreList, name, newVal) {
    if (newVal - scoreList[name] > 10) { // 修改后分差不到10分的不能进行修改
      console.info(`${scoreList[name]}=>${newVal}`)
      scoreList[name] = newVal
    } else {
      console.info('无法修改成绩')
    }
  }
})

// get
console.info(' ------------- 测试 proxy -get  -------------')
scoreProxy['wang']
scoreProxy['li']

console.info(' ------------- 测试 proxy -set ------------- ')
// set
scoreProxy['li'] = 99
scoreProxy['li']