代理模式

◆ 使用者无权访问目标对象
◆ 中间加代理,通过代理做授权和控制

image.png

应用场景：
◆ 网页事件代理
◆ jQuery $.proxy
◆ ES6 Proxy

代理模式VS迺配器模式
◆ 适配器模式：提供一个不同的接口(如不同版本的插头)
◆ 代理模式：提供一模一祥的接口
◆ 装饰器模式：扩展功能，原有功能不变且可直接使用
◆ 代理模式：显示原有功能，但是经过限制或者阉割之后的

代理模式符合的设计原则：
◆ 代理类和目标类分离，隔离开目标类和使用者
◆ 符合开放封闭原则

1. 代理模式demo

image.png

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()
  }
}

2. $.proxy

$("#div1").click(function () {
  // this 符合期望
  $(this).addClass('red')
})
$("#div1").click(function () {
  setTimeout(function () {
    // this 不符合期望
    $(this).addClass('red')
  }, 1000);
});

// 解决方案1
$("#div1").click(function () {
  var_this = this
  setTimeout(function () {
    $(_this).addClass('red')
  }, 1000);
});

// 使用jquery代理方法解决
$("#div1").click(function () {
  setTimeout($.proxy(function () {
    $(this).addClass('red')
  }, this), 1000);
});

2. es6中的代理模式

// 明星
let star = {
    name: '张XX',
    age: 25,
    phone: '13910733521'
}

// 经纪人
let agent = new Proxy(star, {
    get: function (target, key) {
        if (key === 'phone') {
            // 返回经纪人自己的手机号
            return '18611112222'
        }
        if (key === 'price') {
            // 明星不报价，经纪人报价
            return 120000
        }
        return target[key]
    },
    set: function (target, key, val) {
        if (key === 'customPrice') {
            if (val < 100000) {
                // 最低 10w
                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
// agent.customPrice = 90000  // 报错：价格太低
console.log('customPrice', agent.customPrice)