# 八.代理模式
- 由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介作用
- 可以在使用者和目标对象之间加一个代理对象，通过代理可以实现控制
# 1.类图
# 2.代码
class Google {
constructor() {}
get() {
return "google"
}
}
class Proxy {
google: any
constructor() {
this.google = new Google()
}
get() {
return this.google.get()
}
}
let proxy = new Proxy()
let ret = proxy.get()
console.log(ret)
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
# 3.场景
# 3.1 事件委托
- 事件捕获指的是从 document 到触发事件的那个节点，即自上而下的去触发事件
- 事件冒泡是自下而上的去触发事件
- 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true 为事件捕获；false 为事件冒泡，默认 false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>事件委托</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let list = document.querySelector("#list")
list.addEventListener("click", (event) => {
alert(event.target.innerHTML)
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3.2 图片懒加载
1
# 3.3 防抖代理
1
# 3.4 跨域代理
1