$on $emit $off 底层封装

最新推荐文章于 2023-12-15 00:00:12 发布

原创最新推荐文章于 2023-12-15 00:00:12 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析事件池机制，包括事件的订阅、执行与删除过程。通过定义事件池，实现事件的统一管理和高效触发，适用于多种场景下的事件监听需求。

定义事件池

const eventList = {
    //eventName:[fn1,fn2,fn3] ;
}

事件订阅

const $on = (eventName, callback) => {
    if (!eventList[eventName]) eventList[eventName] = [];
    eventList[eventName].push(callback);
}

事件执行

const $emit = (eventName, parmse) => {
    if (!eventList[eventName]) return;
    eventList[eventName].map((cb) => {
        cb(parmse);
    })
}

事件删除

const $off = (eventName, callback) => {
    if (eventList[eventName]) {
        let index = eventList[eventName].indexOf(callback);
        eventList[eventName].splice(index, 1);
    } else {
        eventList[eventName].length = 0;
    }
}

调用事例：

function fn1(val) {
    console.log(111, val)
}

function fn2(val) {
    console.log(222, val)
}

function fn3(val) {
    console.log(333, val)
}
$on("handle", fn1);	//绑定fn1
$on("handle", fn2);	//绑定fn2
$on("handle", fn3);	//绑定fn3
$emit("handle", "abc");	//111 abc ; 222 abc ; 333 abc
$off("handle", fn2);	//解绑fn2
$off("handle", fn3);	//解绑fn3
$emit("handle", "abc");	//111 abc