持续创作,加速成长!这是我参与「掘金日新计划 · 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('圣罗兰口红套装')
-
浏览器运行结果