// 发布订阅模式
class EventEmitter {
constructor() {
// 事件对象,存放订阅的名字和事件 如: { click: [ handle1, handle2 ] }
this.events = {}
}
// 订阅事件的方法
on(eventName, callback) {
if (!this.events[eventName]) {
// 一个名字可以订阅多个事件函数
this.events[eventName] = [callback]; // 如果之前不存在则存进数组中
} else {
// 存在则push到指定数组的尾部保存
this.events[eventName].push(callback)
}
}
// 触发事件的方法
emit(eventName, ...rest) {
// 遍历执行所有订阅的事件
// ... rest 是触发函数时所带的参数
this.events[eventName] &&
this.events[eventName].forEach(f => f.apply(this, rest))
}
// 移除订阅事件
remove(eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(f => f != callback)
}
}
// 只执行一次订阅的事件,然后移除
once(eventName, callback) {
// 声明一个fn函数,在其内部执行callback
const fn = () => {
callback() // fn函数中调用原有的callback
this.remove(eventName, fn) // 删除fn, 再次执行的时候之后执行一次
}
this.on(eventName, fn)
}
}
const em = new EventEmitter();
let workday = 0;
em.on("work", function () {
workday++;
console.log("work everyday");
});
em.once("love", function () {
console.log("just love you");
});
function makeMoney() {
console.log("make one million money");
}
em.on("money", makeMoney);
const time = setInterval(() => {
em.emit("work");
em.remove("money", makeMoney);
em.emit("money");
em.emit("love");
if (workday === 5) {
console.log("have a rest")
clearInterval(time);
}
}, 1);
欢迎关注:http://www.w3schools.top/ 学习您想要的一切IT教程!