<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者模式</title>
</head>
<body>
<script>
class Event{
constructor() {
}
//事件容器，可以是一个也可以是多个
handlers ={}
//事件添加方法、事件名称，事件方法
addEventListener(type, handler) {
if (!(typein this.handlers)) {
this.handlers[type] =[];
}
//将事件存入
this.handlers[type].push(handler)
}
//触发事件
dispatchEvent(type, ...params) {
if (!(typein this.handlers)) {
return new Error("未注册该事件")
}
//触发
this.handlers[type].forEach(item =>{
item(...params);
})
}
//移除事件
removeEventListener(type, handler) {
if (!(typein 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>
