标签：load handlers 观察者 js params 事件 设计模式 type event
<!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>
标签：load,
handlers,
观察者,
js,
params,
事件,
设计模式,
type,
event
From： https://www.cnblogs.com/itzhijia/p/17977708