JavaScript中的代理模式

130 阅读1分钟

介绍

※ 使用者无权访问目标对象

※ 中间加代理,通过代理做授权和控制

实现代码(ES6)

class ReadImg {
    constructor(fileName){
        this.fileName = fileName; //初始化即从硬盘中加载。模拟
        this.loadFromDisk()
    }
    display(){
        console.log('display...' + this.fileName)
    }
    loadFromDisk(){
        console.log('loading...' + this.fileName)
    }
}

class ProxyImg {
    constructor(fileName){
        this.realImg = new ReadImg(fileName)
    }
    display(){
        this.realImg.display()
    }
}


let proxyImg = new ProxyImg('1.png')
proxyImg.display()

明星经纪人例子

//明星
let star = {
    name : '黄子华',
    age:59,
    phone:'13030161654'
}

// 经纪人

let agent = new Proxy(star,{
    get : function(target,key){
        if(key === 'phone'){
            //返回经纪人自己的电话
            return '16512545225'
        }
        if(key === 'price'){
            //明星不报价,经纪人报价
            return 120000
        }
        return target[key]
    },
    set:function(target,key,val){
        if(key === 'customPrice'){
            if(val < 100000){
                //最低 10万
                throw new Error('价格太低')
            }else{
                target[key] = val
                return true
            }
        }
    }
})

console.log(agent.name)
console.log(agent.age)

console.log(agent.phone)
console.log(agent.price)

agent.customPrice = 150000;

console.log(agent.customPrice)

举个栗子

● 科学上网,访问github.com

● 明显经纪人

设计原则

● 代理类目和目标分离,隔离开目标类和使用者

● 符合开放封闭原则

代理模式&适配器模式&装饰模式对比

1.代理模式vs适配器模式

● 适配器模式:提供一个不同的接口(如不同版本的插头)

● 代理模式 提供一模一样的接口

2.代理模式vs装饰器模式

● 装饰器模式: 扩展功能,原有功能不变且可直接使用

● 代理模式: 显示原有功能,但是经过限制或者阉割之后的