<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>觀察者模式</title>
</head>
<body>
<script>
class Event {
constructor() {
}
//事件容器，可以是一個也可以是多個
handlers = {}
//事件添加方法、事件名稱，事件方法
addEventListener(type, handler) {
if (!(type in this.handlers)) {
this.handlers[type] = [];
}
//將事件存入
this.handlers[type].push(handler)
}
//觸發事件
dispatchEvent(type, ...params) {
if (!(type in this.handlers)) {
return new Error("未注冊該事件")
}
//觸發
this.handlers[type].forEach(item => {
item(...params);
})
}
//移除事件
removeEventListener(type, handler) {
if (!(type in this.handlers)) {
return new Error("無效事件")
}
if (!handler) {
//delete刪除對象元素
delete this.handlers[type]
}else {
const idx = this.handlers[type].findIndex(item => item === handler)
if (idx===undefined){
return new Error("無效事件")
}
this.handlers[type].splice(idx, 1)
if (this.handlers[type].length === 0) {
delete this.handlers[type]
}
}
}
}
//創建事件對象
const event = new Event();
//定義一個load事件
function load(params) {
console.log("load", params)
}
//添加事件
event.addEventListener("load", load)
function load2(params) {
console.log("load2", params)
}
event.addEventListener("load", load2)
//觸發
event.dispatchEvent("load", "load事件觸發")
//刪除
event.removeEventListener("load", load)
</script>
</body>
</html>
posted on
浙公網安備 33010602011771號