代理模式
2019-09-22 本文已影响0人
zxhnext
◆ 使用者无权访问目标对象
◆ 中间加代理,通过代理做授权和控制
应用场景:
◆ 网页事件代理
◆ jQuery $.proxy
◆ ES6 Proxy
代理模式VS迺配器模式
◆ 适配器模式:提供一个不同的接口(如不同版本的插头)
◆ 代理模式:提供一模一祥的接口
◆ 装饰器模式:扩展功能,原有功能不变且可直接使用
◆ 代理模式:显示原有功能,但是经过限制或者阉割之后的
代理模式符合的设计原则:
◆ 代理类和目标类分离,隔离开目标类和使用者
◆ 符合开放封闭原则
1. 代理模式demo
image.pngclass 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)