资讯专栏INFORMATION COLUMN

事件订阅广播组件

kumfo / 1946人阅读

摘要:事件栈获取事件对应栈的索引事件类型对应栈的索引不存在为已有事件类型处理栈监听事件自定义事件类型事件处理函数已存在事件类型处理直接把相应的处理函数入栈不存在事件,把对应的事件处理入栈触发对应的事件自定义事件类型参数对象执行对应的事件自定义

export default class {
    // 事件栈
    eventStacks = [{
        eventType: "",
        handlers: []
    }];
    /**
     * 获取事件对应栈的索引
     *
     * @param {string} eventType 事件类型
     * @return {number} stackIndex 对应栈的索引 不存在为-1
     */
    indexOf(eventType) {
        const eventStacks = this.eventStacks;
        // 已有事件类型处理栈
        let stackIndex = -1;
        for (let i = 0; i < eventStacks.length; i++) {
            const eventStack = eventStacks[i];
            if (eventStack.eventType === eventType) {
                stackIndex = i;
                break;
            }
        }
        return stackIndex;
    };
    /**
     * 监听事件
     *
     * @param {string} eventType 自定义事件类型
     * @param {Function} handler 事件处理函数
     */
    on(eventType, handler) {
        const index = this.indexOf(eventType);
        if (index >= 0) {
            // 已存在事件类型处理 直接把相应的处理函数入栈
            this.eventStacks[index].handlers.push(handler);
        }
        else {
            // 不存在事件,把对应的事件处理入栈
            const newEventStack = {
                eventType,
                handlers: [handler]
            };
            this.eventStacks.push(newEventStack);
        }
    };
    /**
     * 触发对应的事件
     *
     * @param {string} eventType 自定义事件类型
     * @param {Object} params 参数对象
     */
    emit(eventType, params = {}) {
        this.execEvent(eventType, params);
    };
    /**
     * 执行对应的事件
     *
     * @param {string} eventType 自定义事件类型
     * @param {Object} params 参数对象
     */
    execEvent(eventType, params = {}) {
        const index = this.indexOf(eventType);
        if (index < 0) {
            return;
        }
        const handlers = this.eventStacks[index].handlers;
        for (let i = 0; i < handlers.length; i++) {
            const currentHandler = handlers[i];
            if (currentHandler && typeof currentHandler === "function") {
                currentHandler(params);
            }
        }
    };
    /**
     * 解除对应的事件
     *
     * @param {string} eventType 事件类型
     * @param {Function} handler 事件处理器 必须是引用传进来 使用对象引用相等判断
     */
    offHandler(eventType, handler) {
        const index = this.indexOf(eventType);
        if (index >= 0 && this.eventStacks[index].handlers.length) {
            // 存在,并且已经入栈
            const handlers = this.eventStacks[index].handlers;
            this.eventStacks[index].handlers = handlers.filter(currentHandler => {
                return currentHandler !== handler
            });
        }
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105511.html

相关文章

  • vue采用EventBus实现跨组件通信及注意事项

    摘要:挂载到添加文件第一个参数是事件对象,第二个参数是接收到消息信息,可以是任意类型事件订阅监听当前实例上的自定义事件。取消事件订阅,移除自定义事件监听器。 EventBus EventBus是一种发布/订阅事件设计模式的实践。在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex。 挂载EventBus到vue.prototype 添加...

    Panda 评论0 收藏0
  • 事件总线源码分析

    摘要:事件总线,是中心控制节点,负责管理事件的注册,接收发布的事件,并完成事件匹配以进行事件处理。订阅者,负责事件处理并注册到事件总线。主要简化的是事件处理所处的线程。 基本概念 在安卓中处理不同组件之间的事件传递依靠广播机制,即Intent/BroadcastReceiver机制,其原理类似于传感网中的Ad hoc网络模式,所有组件处在一种无序状态; 事件总线机制则引入中心控制节点来集中管...

    forsigner 评论0 收藏0
  • EventBus使用方法详解

    摘要:消息处理的方法也只能限定于和,分别代表四种线程模型。如果使用事件处理函数指定了线程模型为,那么无论事件在哪个线程发布,该事件处理函数都会在新建的子线程中执行。分别使用上面四个方法订阅同一事件,打印他们运行所在的线程。 前言:EventBus出来已经有一段时间了,github上面也有很多开源项目中使用了EventBus。所以抽空学习顺便整理了一下。目前EventBus最新版本是3.0,所...

    huaixiaoz 评论0 收藏0
  • EventBus使用方法详解

    摘要:消息处理的方法也只能限定于和,分别代表四种线程模型。如果使用事件处理函数指定了线程模型为,那么无论事件在哪个线程发布,该事件处理函数都会在新建的子线程中执行。分别使用上面四个方法订阅同一事件,打印他们运行所在的线程。 前言:EventBus出来已经有一段时间了,github上面也有很多开源项目中使用了EventBus。所以抽空学习顺便整理了一下。目前EventBus最新版本是3.0,所...

    justjavac 评论0 收藏0
  • EventBus使用详解

    摘要:相关文章使用详解源码解析概述是针一款对的发布订阅事件总线。在此事件处理函数中禁止进行更新操作。如果使用事件处理函数指定了线程模型为,那么无论事件在哪个线程发布,该事件处理函数都会在新建的子线程中执行。 前言:EventBus出来已经有一段时间了,github上面也有很多开源项目中使用了EventBus。所以抽空学习顺便整理了一下。目前EventBus最新版本是3.0,所以本文是基于E...

    YanceyOfficial 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<