js设计模式——代理模式

134 阅读2分钟

老规矩,什么是代理模式?

代理模式通常是指,一个对象(A)不能直接访问另一个对象(B),需要通过一个第三者(代理:C)来访问对象,所有A对B的操作,都会经过C。这个就是代理模式。

比如我们经常用到的nginx,ES6的Proxy,Vue的响应式原理等等,都使用到了代理模式的设计思想。

举个例子

小花也到了适婚年龄了,一个风格日丽的上午,她来到婚姻中介所,中介人员问她:“你的理想型是什么呢”?

当然了,小花还没到饥不择食的地步。思考良久后说出:

  1. 年龄不大于30岁
  2. 月薪2W+

附加:给我50W彩礼

如果满足附加条件:忽略以上两点,直接结婚

如果满足以上两个条件,就可以安排我们见面了。中介心里嘟囔着:“你这是不想让我赚中介费啊!”,但还是抱着渺茫的希望,接下了这单。

那么此时,中介就是代理,用ES6Proxy来表示

// 女主角
const hua = {
    name:'小花',
    age:26,
    address:'黄土高坡花家屯',
    phone:'13678789922', // 满足择偶要求才能看到
    aboutMe:'充钱就会变得更强!', //座右铭
    betrothalGifts:0 //收到的彩礼,低于50W不收
}
// 男嘉宾一号
const first_man = {
    name:'备胎1号',
    age:31,
    monthlyPay:23000, // 月薪
    betrothalGifts:0 // 没有彩礼
}
// 男嘉宾二号
const second_man = {
    name:'备胎2号',
    age:28,
    monthlyPay:13500, // 月薪
    betrothalGifts:200000 // 彩礼20W
}
// 男嘉宾三号
const third_man = {
    name:'金主',
    age:35,
    monthlyPay:NaN, // 月薪
    betrothalGifts:555555 // 彩礼55.55W
}

// 男嘉宾列表
const manInfos = [first_man,second_man,third_man] 


// info 表示男嘉宾信息
const info = manInfos[0]
// const info = manInfos[1]
// const info = manInfos[2]

// 中介所
const marriageAgency = new Proxy(hua,{
    get:function(hua,key){
        if(info.age < 30 && info.monthlyPay > 20000){
            return hua[key]
        }
        return '您配吗?'
    },
    set:function(hua,key,value){
        if(key==='betrothalGifts' && value > 555555){
            hua[key] = value // 先把彩礼收了
            return '我们结婚吧'
        }
        return '您配吗?'
    }
})

用一个简单的例子,说明了代理模式的来龙去脉,简单来说:某些条件下,A对象不能直接操作B对象,需要经过代理C把操作进行处理或者加工后,再作用到B对象