用class实现观察者模式
当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。
- 事件池 :events
- 监听器 :on
- 解除监听 :of
- 触发器 :dispatch
class Event {
events = {} // 事件池记录所有的相关事件及处理函数
/* 形式
events = {
"click":[f1,f2,f3……],
...
}
*/
//添加一个事件处理 eventName 事件名称 fn 对应的处理函数
on(eventName,fn){
//当添加的事件名称不存在时
if(!this.events[eventName]){
this.events[eventName] = [];//设置为空数组
}
this.events[eventName].push(fn);//添加对应数组中
}
// 删除一个事件处理 eventName 事件名称 fn 对应的处理函数
off(eventName,fn){
// 如果没有添加过该事件直接跳出不处理了
if(!this.events[eventName]){
return ;
}
//过滤掉当前fn后的剩下的值重新赋值(删除fn)
this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
}
/*
dispatch 负责把触发到的事件给执行了
*/
dispatch(eventName){ //触发事件
// 如果没有添加过该事件直接跳出不处理了
if(!this.events[eventName]){
return ;
}
//对应的事件集合执行调用
this.events[eventName].forEach(item => {
item.call(this);
});
}
}
let event = new Event;
// let f = ()=>{
// console.log(2);
// }
// event.on("dragstart",()=>{
// console.log(1);
// })
// event.on("dragstart",f);
// event.off("dragstart",f);
// event.on("dragend",()=>{
// console.log(3);
// })
console.log(event);
console.dir(document);
/*
addEventListener
removeEventListener
*/
// document.onclick = function(){
// console.log("呵呵");
// };
// document.onclick = function(){
// console.log("哈哈");
// };
// document.addEventListener("click",()=>{
// console.log("呵呵");
// });
// document.addEventListener("click",()=>{
// console.log("哈哈");
// });