JavaScript 常见设计模式----代理模式

一、什么是代理模式

• 针对一个对象
• 设置代理，控制这个对象的访问
• 用户不得直接访问对象，而要通过代理

二、ULM类图

class RealImg {
    fileName: string
    constructor(fileName: string) {
        this.fileName = fileName
    }
    display() {
        this.loadFromDist()
        console.log('display...', this.fileName)
    }
    private loadFromDist() {
        console.log('loading...', this.fileName)
    }
}

class ProxyImg {
    realImg: RealImg
    constructor(fileName: string) {
        this.realImg = new RealImg(fileName)
    }
    // 代理
    display() {
        // 限制
        this.realImg.display()
    }
}

const proxImg = new ProxyImg('xxx.png')
proxImg.display()

// 装饰器模式：不能该表原始对象的行为
// 代理模式：可以改变原始对象的行为

三、是否符合设计原则

• 代理和目标分离，解耦
• 代理可自行扩展
• 目标也可自行扩展

四、使用场景

1. DOM事件代理（委托）
2. Webpack devServer proxy
3. Nginx 反向代理