前端事件应答实现方法、装置、终端设备和可读存储介质制造方法及图纸

本申请涉及前端开发技术领域，提供了一种前端事件应答实现方法、装置、终端设备和可读存储介质，该方法包括：响应前端页面的操作指令，触发事件派发组件创建操作指令关联的事件，并将事件派发至事件监听组件；事件监听组件基于事件创建对应的promise对象，再异步执行事件调用的处理函数，并根据处理函数的执行结果更新promise对象的状态；事件派发组件同步获取创建的promise对象及处理函数的执行结果，在处理函数对应的promise对象的状态更新完成后，将事件的执行结果返回至前端页面。该方法可以实现可应答的前端事件通信，减少了开发过程中的沟通及维护成本，提高了开发效率。提高了开发效率。提高了开发效率。

【技术实现步骤摘要】
前端事件应答实现方法、装置、终端设备和可读存储介质


[0001]本申请涉及前端开发
，尤其涉及一种前端事件应答实现方法、装置、终端设备和可读存储介质。

技术介绍

[0002]目前市面上开源的事件通信库，或者浏览器自带的事件系统均是事件单向流动的，即组件A用于添加事件监听，组件B用于派发事件，缺乏将事件处理结果返回给派发方的能力。若需要实现上述的返回效果，则需要约定相应的事件名，即事件派发方（组件B）添加处理结果的事件监听，事件监听方（组件A）将事件处理结果反向派发回去给事件派发方（组件B）。
[0003]然而对于一些自研发系统，存在相对独立的插件体系，而系统的开发人员和插件开发人员并不是同一批人，彼此之间也互不知晓对方项目的实现，对于用户而言，面对的却是由包含插件在内的整个系统，若按照上述的约定方式来进行事件通信，则会大大增加双方沟通成本，降低开发效率等。

技术实现思路

[0004]有鉴于此，本申请实施例提供一种前端事件应答实现方法、装置、终端设备和可读存储介质，可以有效解决可应答的前端事件通信问题等。
[0005]第一方面，本申请实施例提供一种前端事件应答实现方法，包括：响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件；所述事件监听组件基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；所述事件派发组件同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。
[0006]在一些实施例中，所述触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件，包括：触发进入事件派发封装流程；由事件派发组件创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，其中，所述promise列表数组用于存放待获取的promise对象；然后所述事件派发组件调用dispatchEvent方法以将所述数据载体对象派发至事件监听组件。
[0007]在一些实施例中，所述事件监听组件基于所述事件创建对应的promise对象，包
括：所述事件监听组件调用addEventListener方法以监听派发的所述数据载体对象，并在监听到所述数据载体对象后，创建所述事件对应的promise对象，且从所述数据载体对象中获取所述promise列表数组，以将所述创建的promise对象添加至所述promise列表数组中。
[0008]在一些实施例中，所述异步执行所述事件调用的处理函数，包括：所述事件监听组件从所述数据载体对象中获取所述事件参数，并基于所述事件参数异步调用及执行所述事件预先绑定的处理函数。
[0009]在一些实施例中，所述创建的promise对象中还包括调用的执行成功函数和执行失败函数，所述根据所述处理函数的执行结果更新所述promise对象的状态，包括：所述事件监听组件调用Promise.allSettled函数以收集所述事件的处理函数的执行结果，其中，所述执行结果的类型包括执行成功和执行失败；若所述处理函数执行成功，则所述事件监听组件选择所述执行成功函数，以将所述事件对应的promise对象由初始待定状态更新为已兑现状态；若所述处理函数执行失败，则所述事件监听组件选择所述执行失败函数，以将所述事件对应的promise对象由初始待定状态更新为已拒绝状态。
[0010]在一些实施例中，若所述执行结果还包括不同类型下的执行返回值，该前端事件应答实现方法还包括：所述事件监听组件在收集所述处理函数的执行结果时，将所述执行结果的类型及对应的所述执行返回值一并返回至所述事件派发组件。
[0011]在一些实施例中，若所述事件监听组件包括至少两个监听器，该前端事件应答实现方法还包括：每一所述监听器基于所述事件创建各自对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新对应promise对象的状态；所述事件派发组件同步获取所有创建的promise对象及所有处理函数的所述执行结果，等待所有处理函数对应的promise对象的状态均更新完成后，将所述事件的所有执行结果一并返回至所述前端页面。
[0012]第二方面，本申请实施例提供一种前端事件应答实现装置，包括：事件派发单元，用于响应前端页面的操作指令，触发创建所述操作指令关联的事件，并将所述事件派发至事件监听单元；事件监听单元，用于基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；所述事件派发单元，还用于同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。
[0013]第三方面，本申请实施例提供一种终端设备，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施所述的前端事件应答实现方法。
[0014]第四方面，本申请实施例提供一种可读存储介质，其存储有计算机程序，所述计算
机程序在处理器上执行时，实施所述的前端事件应答实现方法。
[0015]本申请的实施例具有如下有益效果：本申请提出的前端事件应答实现方法通过响应前端页面的操作指令，触发事件派发组件创建操作指令关联的事件，并将事件派发至事件监听组件；然后由事件监听组件基于事件创建对应的promise对象，再异步执行事件调用的处理函数并根据处理函数的执行结果更新promise对象的状态；同时，事件派发组件将同步获取创建的promise对象及处理函数的执行结果，等待处理函数对应的promise对象的状态更新完成后，将事件的执行结果返回至前端页面。该方法基于网页提供的事件目标（EventTarget）功能进行事件封装，并结合Promise机制等来对事件的处理结果进行收集并返回，这样不需要再双方就事件处理结果的返回进行约定及沟通，降低了维护及沟通成本，提高了双方的开发效率等。
附图说明
[0016]为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0017]图1示出了本申请实施例前端事件应答实现方法的一种系统架构图；图2示出了本申请实施例前端事件应答实现方法的第一流程图；图3示出了本申请实施例前端事件应答实现方法的交互流程图；图4示出了本申请实施例前端事件应答实现方法的第二流本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端事件应答实现方法，其特征在于，包括：响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件；所述事件监听组件基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；所述事件派发组件同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。2.根据权利要求1所述的前端事件应答实现方法，其特征在于，所述触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件，包括：触发进入事件派发封装流程；由事件派发组件创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，其中，所述promise列表数组用于存放待获取的promise对象；然后所述事件派发组件调用dispatchEvent方法以将所述数据载体对象派发至事件监听组件。3.根据权利要求2所述的前端事件应答实现方法，其特征在于，所述事件监听组件基于所述事件创建对应的promise对象，包括：所述事件监听组件调用addEventListener方法以监听派发的所述数据载体对象，并在监听到所述数据载体对象后，创建所述事件对应的promise对象，且从所述数据载体对象中获取所述promise列表数组，以将所述创建的promise对象添加至所述promise列表数组中。4.根据权利要求2所述的前端事件应答实现方法，其特征在于，所述异步执行所述事件调用的处理函数，包括：所述事件监听组件从所述数据载体对象中获取所述事件参数，并基于所述事件参数异步调用及执行所述事件预先绑定的处理函数。5.根据权利要求3所述的前端事件应答实现方法，其特征在于，所述创建的promise对象中还包括调用的执行成功函数和执行失败函数，所述根据所述处理函数的执行结果更新所述promise对象的状态，包括：所述事件监听组件调用Promise.allSettled函数以收集所述事件的处理函数的执行结果...

【专利技术属性】
技术研发人员：叶梓军，林煌东，万鑫，陈韦润，
申请(专利权)人：深圳复临科技有限公司，
类型：发明
国别省市：