简单实现一个EventEmitter

最新推荐文章于 2026-03-25 01:32:04 发布

原创最新推荐文章于 2026-03-25 01:32:04 发布 · 3.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#观察者模式 #EventEmitter

收录于

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种自定义事件发射器的实现方式：一种是基于ES6的类实现，另一种是模仿Vue事件机制的ES5版本。这两种方法均可用于创建自定义事件监听和触发系统。

scriptoj 看到的题目

下面是我的实现，暂时只能这样了，具体可看https://scriptoj.com/problems/36，方法很多

1、函数式编程（es6）

class EventEmitter {
	constructor() {
		this.events = {};
	}

	on(eventName, fn) {
		let fnList = this.events[eventName] || [];
		fnList.push(fn)
		if (eventName) {
			this.events[eventName] = fnList;
		}
	}

	emit(eventName, ...agr) {
		let funcs = this.events[eventName];
		if (funcs && funcs.length) {
			for (let j = 0; j < funcs.length; j++) {
				funcs[j](...agr);
			}
		}
	}

	off(eventName, fn) {
		let funcs = this.events[eventName];
		if (fn) {
			this.events[eventName].splice(fn, 1);
		} else {
			delete this.events[eventName]
		}
	}
}

2、es5 模拟vue事件

var App = {
	eventList: [],
	$on: function(event, cb) {                
		if (!event) return
		this.eventList[event] = cb;
	},
	$emit: function(event, cb) {
		if (!event) return
		this.eventList[event]();
	},
	$off: function(event, cb) {
		if (event) {
			delete this.eventList[event]
		} else {
			this.eventList = [];
		}
	}
}