当前位置: 代码迷 >> 综合 >> 自定义on/once/off/emit
  详细解决方案

自定义on/once/off/emit

热度:33   发布时间:2023-12-17 03:08:41.0
class EventEmmiter {
    constructor() {
    // 存储事件的容器this._events = {
    // eventName: [listener1, listener2...]};}// 绑定事件on(eventName, listener) {
    if (this._events[eventName]) {
    // 说明之前添加过事件this._events[eventName].push(listener);} else {
    // 说明之前没有值this._events[eventName] = [listener];}}// 绑定一次性事件:触发一次后自动解绑once(eventName, listener) {
    const lis = (...data) => {
    // 解绑事件this.off(eventName, lis);// 触发事件回调函数listener(...data);};this.on(eventName, lis);}// 解绑事件off(eventName, listener) {
    if (!this._events[eventName]) {
    return;}if (listener) {
    // 传入了listener,解绑一个回调this._events[eventName] = this._events[eventName].filter((lis) => lis !== listener);} else {
    // 没有传入listener,解绑所有回调this._events[eventName] = null;}}// 触发事件emit(eventName, ...data) {
    /*...data 代表剩下所有参数例如:emit('xxx', 1, 2, 3, 4)data --> [1, 2, 3, 4]*/if (!this._events[eventName]) {
    return;}// ...data --> 展开数组,将数组中的值作为参数传入函数中this._events[eventName].forEach((listener) => listener(...data));}
}const myEvent = new EventEmmiter();const cb = function () {
    console.log(111);
};myEvent.on("aaa", cb);// myEvent.once("aaa", function () {
    
// console.log(222);
// });myEvent.on("aaa", function () {
    console.log(222);
});myEvent.emit("aaa");
myEvent.off("aaa");
// myEvent.off("aaa", cb);
myEvent.emit("aaa");
  相关解决方案