代理模式 - 演示与场景

使用场景

• VPN代理
• SSR

UML类图

image.png

代码演示：

class RealImg {
    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 RealImg(fileName)
    }
    display() {
        this.realImg.display()
    }
}
// 测试
let proxyImg = new ProxyImg('1.png')
proxyImg.display()

JS使用场景

• 网页事件代理
• jQuery $.proxy

$('#div').click(function() {
  setTimeout($.proxy(function(){
    $(this).addClass('red')
  }, this), 1000)
})

• ES6 Proxy 明星与经纪人

代理模式 vs 适配器模式

• 适配器模式：提供一个不同的接口（如不同版本的插头）
• 代理模式：提供一模一样的接口

代理模式 vs 装饰器模式

• 装饰器模式：扩展功能，原有功能不变且可直接使用
• 代理模式： 显示原有功能，但是经过限制或者阉割之后