浅谈代理设计模式的实现和场景应用

169 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

前情提要

  • 对于代理模式相信大家可能相对比较熟悉。毕竟代理这个词可太熟悉了。比如,10年以前那会各种线上抢票的app还没有出来,大家只能去火车站去购买火车票。但是有的人可能离火车站很远,买票不方便该怎么办呢?
  • 这个时候就应用到了代理模式,找个人或者机构,代替自己去火车站购买火车票。这就是在很久以前比较常见的一种方式。
  • 其次还有代送情书,代写课后作业,代打卡等等,这里面运用到的都是代理模式的概念。
  • 除了以上那些,还有个更为大家所熟知的例子:使用框架开发前端的时候,时常会遇到跨域的问题。如果项目最终的部署站点与后端一致,那么这个时候最好的解决办法就是使用webpack自带的代理模式。原理就是通过本地的node服务代为请求转发,而服务器请求服务器并不会触发跨域的问题。

那么代理的模式的特点是什么?

  • 代理者具有被代理人同样的功能,否则无法进行代理。

  • 最终的目标客户并不知道是谁发起的代理。

  • 流程图:

    graph LR
    真实对象 --> 代理对象 --> 用户
    

模拟实现一个代理模式

// 模拟男生向女生送礼物的过程
// 声明一个女生对象
const Gril = function(name) {
    this.name = name;
}
// 声明一个男生对象
const Boy = function(girl) {
    this.girl = girl;
    this.sendGift = function(gift) {
        console.log(`${this.girl},我喜欢你,这是送你的第一份礼物:${gift}`);
    }
}
// 代理对象
const Proxy = function(girl) {
    this.girl = girl;
    this.sendGift = function(gift) {
        (new Boy(this.girl)).sendGift(gift); // 替男生送礼物
    }
}
// 调用
const girl = new Girl('小红');
const proxy1 = new Proxy(girl);
proxy1.sendGift('圣罗兰口红套装')
  • 浏览器运行结果

    image.png