Appearance
代理模式
介绍
- 使用者无权访问目标对象
- 中间加代理，通过代理做授权和控制
传统 UML 类图
简化模式类图
示例
javascript
class ReadImg {
constructor(fileName) {
this.fileName = fileName
this.loadFromDisk() // 初始化即从硬盘中加载，模拟
}
display(){
console.log('display...')
}
loadFromDisk(){
console.log('loading...')
}
}
class ProxyImg {
constructor(fileName) {
this.realImg= new ReadImg(fileName)
}
display() {
this.realImg.display()
}
}
// test
let proxyImg = new ProxyImg('1.png')
proxyImg.display()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
事件代理
html
<body>
<div id="div1">
<a href="#">al</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<a href="#">a5</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script>
var div1 = document.getELementById("div1");
div1.addEventListener("click", function (e){
var target = e.target;
if(target.nodeName === 'A'){
alert (target.innerHTML)
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.proxy
javascript
$('#div1'）.click( function (){
// this 符合期望
$(this).addClass('red")
})
$("#div1").click(function (){
setTimeout(function () {
// this 不符合期望
$(this).addClass("red")
},1000)
});
// 可以用如下方式解决
$('#div1'）.click( function (){
var _this = this
setTimeout(function () {
// _this 符合期望
$(_this).addClass("red")
},1000)
})
// 但推荐使用 $.proxy解决，这样就少定义一个变量
$('#div1'）.click(function (){
setTimeout($.proxy(function (){
// this 符合期望
$(this).addClass("red")
},this),1000);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
经纪人代理模式
javascript
// 明星
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
设计原则验证
- 代理类和目标类分离，隔离开目标类和使用者
- 符合开放封闭原则
代理模式 vs 适配器模式
- 适配器模式：提供一个不同的接口（如不同版本的插头）
- 代理理模式：提供一模一样的接口
代理模式 vs 装饰器模式
- 装饰器模式：扩展功能，原有功能不变且可直接使用
- 代理模式：显示原有功能，但是经过限制或者阉割之后的