CN116107778B - 前端事件应答实现方法、装置、终端设备和可读存储介质 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

目前市面上开源的事件通信库，或者浏览器自带的事件系统均是事件单向流动的，即组件A用于添加事件监听，组件B用于派发事件，缺乏将事件处理结果返回给派发方的能力。若需要实现上述的返回效果，则需要约定相应的事件名，即事件派发方（组件B）添加处理结果的事件监听，事件监听方（组件A）将事件处理结果反向派发回去给事件派发方（组件B）。

然而对于一些自研发系统，存在相对独立的插件体系，而系统的开发人员和插件开发人员并不是同一批人，彼此之间也互不知晓对方项目的实现，对于用户而言，面对的却是由包含插件在内的整个系统，若按照上述的约定方式来进行事件通信，则会大大增加双方沟通成本，降低开发效率等。

发明内容

有鉴于此，本申请实施例提供一种前端事件应答实现方法、装置、终端设备和可读存储介质，可以有效解决可应答的前端事件通信问题等。

第一方面，本申请实施例提供一种前端事件应答实现方法，包括：

响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件；

所述事件监听组件基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；

所述事件派发组件同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。

在一些实施例中，所述触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件，包括：

触发进入事件派发封装流程；

由事件派发组件创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，其中，所述promise列表数组用于存放待获取的promise对象；

然后所述事件派发组件调用dispatchEvent方法以将所述数据载体对象派发至事件监听组件。

在一些实施例中，所述事件监听组件基于所述事件创建对应的promise对象，包括：

所述事件监听组件调用addEventListener方法以监听派发的所述数据载体对象，并在监听到所述数据载体对象后，创建所述事件对应的promise对象，且从所述数据载体对象中获取所述promise列表数组，以将所述创建的promise对象添加至所述promise列表数组中。

在一些实施例中，所述异步执行所述事件调用的处理函数，包括：

所述事件监听组件从所述数据载体对象中获取所述事件参数，并基于所述事件参数异步调用及执行所述事件预先绑定的处理函数。

在一些实施例中，所述创建的promise对象中还包括调用的执行成功函数和执行失败函数，所述根据所述处理函数的执行结果更新所述promise对象的状态，包括：

所述事件监听组件调用Promise.allSettled函数以收集所述事件的处理函数的执行结果，其中，所述执行结果的类型包括执行成功和执行失败；

若所述处理函数执行成功，则所述事件监听组件选择所述执行成功函数，以将所述事件对应的promise对象由初始待定状态更新为已兑现状态；

若所述处理函数执行失败，则所述事件监听组件选择所述执行失败函数，以将所述事件对应的promise对象由初始待定状态更新为已拒绝状态。

在一些实施例中，若所述执行结果还包括不同类型下的执行返回值，该前端事件应答实现方法还包括：

所述事件监听组件在收集所述处理函数的执行结果时，将所述执行结果的类型及对应的所述执行返回值一并返回至所述事件派发组件。

在一些实施例中，若所述事件监听组件包括至少两个监听器，该前端事件应答实现方法还包括：

每一所述监听器基于所述事件创建各自对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新对应promise对象的状态；

所述事件派发组件同步获取所有创建的promise对象及所有处理函数的所述执行结果，等待所有处理函数对应的promise对象的状态均更新完成后，将所述事件的所有执行结果一并返回至所述前端页面。

第二方面，本申请实施例提供一种前端事件应答实现装置，包括：

事件派发单元，用于响应前端页面的操作指令，触发创建所述操作指令关联的事件，并将所述事件派发至事件监听单元；

事件监听单元，用于基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；

所述事件派发单元，还用于同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。

第三方面，本申请实施例提供一种终端设备，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施所述的前端事件应答实现方法。

第四方面，本申请实施例提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上执行时，实施所述的前端事件应答实现方法。

本申请的实施例具有如下有益效果：

本申请提出的前端事件应答实现方法通过响应前端页面的操作指令，触发事件派发组件创建操作指令关联的事件，并将事件派发至事件监听组件；然后由事件监听组件基于事件创建对应的promise对象，再异步执行事件调用的处理函数并根据处理函数的执行结果更新promise对象的状态；同时，事件派发组件将同步获取创建的promise对象及处理函数的执行结果，等待处理函数对应的promise对象的状态更新完成后，将事件的执行结果返回至前端页面。该方法基于网页提供的事件目标（EventTarget）功能进行事件封装，并结合Promise机制等来对事件的处理结果进行收集并返回，这样不需要再双方就事件处理结果的返回进行约定及沟通，降低了维护及沟通成本，提高了双方的开发效率等。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例前端事件应答实现方法的一种系统架构图；

图2示出了本申请实施例前端事件应答实现方法的第一流程图；

图3示出了本申请实施例前端事件应答实现方法的交互流程图；

图4示出了本申请实施例前端事件应答实现方法的第二流程图；

图5示出了本申请实施例前端事件应答实现方法的第三流程图；

图6示出了本申请实施例前端事件应答实现方法的第四流程图；

图7示出了本申请实施例前端事件应答实现装置的结构示意图。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

在下文中，可在本申请的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则这里使用的所有术语(包括技术术语和科学术语)具有与本申请的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本申请的各种实施例中被清楚地限定。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互结合。

由于现有的事件通信方式要么是单向设计，要么需要按照提前约定好的方式进行事件通信，导致在面对由不同人员分别开发不同部分所构成的组成系统时，往往无法满足相应需求或系统的维护及沟通成本太高等，为此，本申请提出一种可应答的前端事件通信机制，其基于浏览器提供的EventTarget（事件目标）并结合Promise机制等来实现前端页面下触发的事件派发及对事件处理结果的返回，从而实现前端事件的可应答，以此减轻开发者的时间成本及维护成本。

下面结合一些具体的实施例来对该前端事件应答实现方法进行说明。在此之前，先对本申请提及的主要术语进行解释或定义。

EventTarget，即事件目标，是浏览器提供的一种API函数，其提供了addEventListener和dispatchEvent两个方法，分别用于事件监听与事件派发；其中，addEventListener是将指定监听器注册到该事件目标，每个事件目标可注册有若干事件监听器（EventListener）；dispatchEvent是将事件派发到该事件目标。

Promise，译为承诺，是JavaScript提供的一种异步API函数，用于表示一个异步操作的最终完成（或失败）及其结果值。

Promise对象，用于封装一个异步操作并可以获取其执行结果，其具有三种状态，分别是Pending（初始待定状态，既没有被兑现也没有被拒绝）、Fulfilled（已完成，即表明操作成功）、Rejected（已失败，即表明操作成失败）。其中，一个promise对象的状态只能改变一次。

Promise.allSettled，是Promise提供的一种处理方法，可用于并行执行独立的异步操作并收集这些异步操作的执行结果。

Payload，数据载体对象，一般指传输对象的主体部分，其中包含关键的有用数据，不包含头部和其他辅助信息。

需要明白的是，本申请中提及的前端页面（Web）、事件派发组件（Dispatch）及事件监听组件（Listener）是支持前端事件应答的系统中的重要组成部分，如图1所示，其中，前端页面作为系统的交互界面，主要面对用户并且用户可以在该页面上进行相应操作；事件派发组件是系统中用于实现事件派发且与前端页面操作直接关联的代码逻辑实现单元；而事件监听组件是系统中用于监听派发的事件且能够对事件进行处理的底层逻辑单元。

在实际运用场景中，例如，以某一自主研发的系统而言，事件派发组件可以指系统中与前端页面关联的且支持事件派发的功能模块，而事件监听组件可以指系统中的与各功能模块相对独立的插件或组件，其可以对事件进行底层异步处理。

下面对本申请的前端事件应答实现方法的具体过程进行详细说明。

图2示出了本申请实施例的前端事件应答实现方法的一种流程图。示范性地，该前端事件应答实现方法包括以下步骤：

S110，响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件。

其中，该操作指令是指能够触发事件派发的操作指令，具体可以为需要对相应数据进行处理及返回等的业务操作，例如，可包括但不限于为，点击前端页面中的刷新按钮，添加新的工单表，对已有工单表进行修改等操作。可以理解，对于一些如打开某项弹窗等的简单操作，由于不需要对数据进行额外处理，也就不会触发前端事件的派发及监听操作。

示范性地，如图3所示，当用户在前端页面进行了能够触发事件派发的相关业务操作后，即触发了dispatch条件，系统在接收到该操作指令时会进行响应，具体而言，当该操作指令满足事件派发条件时，系统将触发进入事件派发封装流程，以创建与上述操作指令关联的事件。可以理解，本实施例的事件创建主要是利用EventTarget方式来进行事件的扩展封装，以便将事件发送到底层的事件监听组件进行异步处理。

在一种实施方式中，如图4所示，事件的创建过程包括以下子步骤：

S111，事件派发组件创建与该操作指令关联的事件的数据载体对象。

其中，数据载体（payload）作为事件传输的主要主体部分，其将用于承载该事件的关键性信息，如传入参数（params）、promiselist等属性信息。

S112，将该操作指令传入的事件参数存放于该数据载体对象的参数（params）属性下。

S113，在该数据载体对象的promise列表属性下创建一个空的promise列表数组，其中，该promise列表数组将用于存放待获取的promise对象。

结合图3，触发事件派发后，由事件派发组件（Dispatch）创建一个该事件的payload对象，进而将该操作指令传入的事件参数，如操作对象的名称、具体处理指令等，存放在该payload对象的params属性下；同时，还创建一个空数组，存放在该payload对象的promise列表（即promiseList）属性下。至此，事件派发组件完成对事件的封装，之后将其派发至事件监听组件（Listener）。例如，系统按照上述流程完成封装后，可调用原生的DispatchEvent方法发送该payload对象到事件监听组件。

可以理解，通过创建上述的空数组以后续用来存储从事件监听组件获取到的相应事件处理的promise对象，这样可以不需要提前让事件派发组件和事件监听组件进行每个事件的事件名的提前约定，可以等到事件监听组件在接收到派发的事件后，再将创建的promise对象推进该空数组中即可。

S120，事件监听组件基于所述事件创建对应的promise对象，再异步执行事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态。

本实施例中，事件监听组件可以采用addEventListener方法，用以监听事件派发组件派发的事件的数据载体对象，以此确定是否进行对相应事件的监听及异步处理并收集处理结果。

示范性地，事件监听组件在监听到数据载体对象后，将创建该事件对应的promise对象，例如，可通过promise = new Promise((resolve, reject)=>{…})的方式来创建，同时还调用该promise对象的resolve方法和reject方法。其中，resolve方法即执行成功函数，reject方法即执行失败函数，分别用于在不同执行结果下对promise对象的状态进行更新。

然后，事件监听组件将从该数据载体对象中获取到promise列表数组，以将创建的promise对象添加至该promise列表数组中。例如，可以将该promise对象添加在数组的头部或尾部等位置，这里不作限定。可以理解，创建的promise对象的初始状态均为Pending态，这里将创建的promise对象放入列表中，可以让事件派发组件知晓此处还有未完成的事件处理。

进而，利用promise的异步机制，事件监听组件从该数据载体对象中获取调用者传入的事件参数，并基于该事件参数以异步调用该事件预先绑定的处理函数并执行。具体地，将传入的事件参数作为处理函数的输入参数并执行。其中，该处理函数是用来捕获并处理该事件的函数，一个事件通常只绑定一个处理函数。

最后，事件监听组件在执行完事件函数后，将根据执行的结果来对预先创建的promise对象的状态进行更新。在一种实施方式中，如图5所示，事件监听组件根据处理函数的执行结果更新promise对象的状态，包括：

S121，调用Promise.allSettled函数以收集事件的处理函数的执行结果并返回至事件派发组件，其中，执行结果的类型包括执行成功和执行失败。

值得注意的是，通过调用Promise.allSettled函数来收集执行结果，尤其当处理函数存在多个的情况下，则可以并行收集各事件的执行结果，而不需要等待前面一个事件执行完后再获取下一个。

S122，若处理函数执行成功，则事件监听组件选择执行成功函数，以将事件对应的promise对象由初始待定状态更新为已兑现状态。

S123，若处理函数执行失败，则事件监听组件选择执行失败函数，以将事件对应的promise对象由初始待定状态更新为已拒绝状态。

可以理解，若相应事件的处理函数执行成功，则将选择resolve方法来将promise对象的状态由Pending态更新为fulfilled态；反之，若执行失败，则选择reject方法来将promise对象的状态由Pending态更新为rejected态。至此，当一个事件的promise对象变成完成态后，则表明该事件处理完成，才会将执行结果返回给事件派发组件。

可选的，在传入的事件处理方法中，若预先定义了执行结果还包括不同执行类型下的执行返回值（即return值），那么，事件监听组件在收集处理函数的执行结果时，会将执行结果的类型及对应的执行返回值一并返回至事件派发组件。

在一种实施方式，若选择了return，其返回的格式可为{status: ‘fulfilled’,value: return值}，如果未选择return，则该格式中的value则默认为undefined，此时事件派发组件只能知道此事件处理函数的执行成功与否而不能得知具体的返回值。例如，若定义return的对象是执行失败时的错误原因，那么，当处理函数执行失败时，此时将返回{status: 'rejected', reason: 错误原因 }数据。

S130，事件派发组件同步获取创建的promise对象及所述处理函数的执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的执行结果返回至前端页面。

由于DispatchEvent方法是同步操作，事件派发组件在调用后，可以从事件监听组件那搜集到相应事件的promise对象，以及处理函数的执行结果。与此同时，还将调用awaitPromise.allSettled函数来对事件监听组件的事件处理完成进行异步等待，即当事件处理函数都执行完后，事件派发组件才会将获取到执行结果作为事件应答，返回至前端页面。

此外，考虑到一个事件可能需要重复监听或存在对应的多个监听者的实际情况，基于上述实施例，作为一种可选的方案，如图6所示，若事件监听组件包括至少两个监听器，该前端事件应答实现方法包括：

S210，响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将创建的事件派发至每一监听器。

S220，每一监听器基于所述事件创建各自对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新对应promise对象的状态。

S230，事件派发组件同步获取所有创建的promise对象及所有处理函数的所述执行结果，并等待所有处理函数对应的promise对象的状态均更新完成后，将所有事件的执行结果一并返回至前端页面。

可以理解，存在多个事件监听时，表明事件存在多个，对应的promise对象和处理函数也存在多个，因此，事件监听组件通过调用Promise.allSettled函数以并行收集所有事件的处理函数的执行结果，可以保证执行效率，也可以保证所有事件的执行结果可以一并返回。

下面结合一个举例来说明上述的方法的具体运用。例如，对于一自研发系统，其中，该系统中安装有相应插件，该插件可能唤起新建工作项表单的弹窗，从而让用户进行工单添加。例如，当用户进入该系统的前端页面或在系统的前端页面中进行相应按钮操作时，系统将唤起新建工作项表单弹窗的方法来添加invokeForm事件监听，具体地，系统可通过采用上述的事件封装流程方式对invokeForm事件进行封装，进而将其发送至插件。然后，由插件在底层调用事件的处理函数以唤起弹窗，呈现在前端页面，以供用户进行工单填写。当用户取消填写或者完成填写提交后，插件将收集到的返回值拿到相应的状态（被取消/已提交）和相关数据，从而判断插件逻辑下一步如何运行。

可以理解，本实施例提出的前端事件应答实现方法基于网页提供的事件目标功能进行事件封装，并结合Promise机制等来对事件的处理结果进行收集并返回，因此则不需要双方就事件处理结果的返回进行提前约定及沟通，降低了维护及沟通成本，也提高了双方的开发效率等。

图7示出了本申请实施例的前端事件应答实现装置100的一种结构示意图。示范性地，该前端事件应答实现装置100包括：

事件派发单元110，用于响应前端页面的操作指令，触发创建所述操作指令关联的事件，并将所述事件派发至事件监听单元；

事件监听单元120，用于基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；

事件派发单元110，还用于同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至前端页面。

作为一种可选的方案，事件监听单元120中包括至少两个监听器，在事件派发单元110将所述事件派发至事件监听单元后，则有：

每一所述监听器用于基于所述事件创建各自对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新对应promise对象的状态；

事件派发单元110还用于同步获取所有创建的promise对象及所有处理函数的所述执行结果，等待所有处理函数对应的promise对象的状态均更新完成后，将所述事件的所有执行结果一并返回至所述前端页面。

进一步地，事件派发单元110包括派发创建子单元、派发调用子单元，其中，派发创建子单元用于在进入事件派发封装流程后，创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，其中，所述promise列表数组用于存放待获取的promise对象；

派发调用子单元用于调用dispatchEvent方法以将所述数据载体对象派发至事件监听组件。

进一步地，事件监听单元120可以仅包括一个监听器，也可以包括至少两个监听器，其中，每个监听器的构成都是相同的。

具体地，该监听器包括派发监听子单元、promise创建子单元，其中，监听子单元用于调用addEventListener方法以监听派发的所述数据载体对象；

promise创建子单元用于创建所述事件对应的promise对象，且从所述数据载体对象中获取所述promise列表数组，以将所述创建的promise对象添加至所述promise列表数组中。

进一步地，该监听器还包括处理函数执行子单元，其中，该处理函数执行子单元用于从所述数据载体对象中获取所述事件参数，并基于所述事件参数异步调用及执行所述事件预先绑定的处理函数。

进一步地，所述创建的promise对象中还包括调用的执行成功函数和执行失败函数，该监听器还包括状态更新子单元，其中，状态更新子单元用于调用Promise.allSettled函数以收集所述事件的处理函数的执行结果，其中，所述执行结果的类型包括执行成功和执行失败；

若所述处理函数执行成功，则选择所述执行成功函数，以将所述事件对应的promise对象由初始待定状态更新为已兑现状态；

若所述处理函数执行失败，则选择所述执行失败函数，以将所述事件对应的promise对象由初始待定状态更新为已拒绝状态。

进一步地，若所述执行结果还包括不同类型下的执行返回值，该监听器还用于在收集所述处理函数的执行结果时，将所述执行结果的类型及对应的所述执行返回值一并返回至所述事件派发组件。

可以理解，本实施例的装置对应于上述实施例的前端事件应答实现方法，上述实施例中的可选项同样适用于本实施例，故在此不再重复描述。

本申请还提供了一种终端设备，如计算机等，示范性地，该终端设备包括处理器和存储器，其中，存储器存储有计算机程序，处理器通过运行所述计算机程序，从而使终端设备执行上述的前端事件应答实现方法或者上述前端事件应答实现装置中的各个模块的功能。

其中，处理器可以是一种具有信号的处理能力的集成电路芯片。处理器可以是通用处理器，包括中央处理器（Central Processing Unit，CPU）、图形处理器（GraphicsProcessing Unit，GPU）及网络处理器（Network Processor，NP）、数字信号处理器（DSP）、专用集成电路（ASIC）、现成可编程门阵列（FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件中的至少一种。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

存储器可以是，但不限于，随机存取存储器（Random Access Memory，RAM），只读存储器（Read Only Memory，ROM），可编程只读存储器（Programmable Read-Only Memory，PROM），可擦除只读存储器（Erasable Programmable Read-Only Memory，EPROM），电可擦除只读存储器（Electric Erasable Programmable Read-Only Memory，EEPROM）等。其中，存储器用于存储计算机程序，处理器在接收到执行指令后，可相应地执行所述计算机程序。

本申请还提供了一种可读存储介质，用于储存上述终端设备中使用的所述计算机程序，其中，所述计算机程序在处理器上执行时，实施上述实施例的前端事件应答实现方法，该方法包括：

响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件；所述事件监听组件基于所述事件创建对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新所述promise对象的状态；所述事件派发组件同步获取所述创建的promise对象及所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。

可以理解，上述实施例的前端事件应答实现方法中的可选项同样适用于本实施例，故在此不再重复描述。

其中，上述的可读存储介质可以是非易失性存储介质，也可以是易失性存储介质。例如，该可读存储介质可包括但不限于为：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是智能手机、个人计算机、服务器、或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims (8)

1.一种前端事件应答实现方法，其特征在于，包括：

响应前端页面的操作指令，触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件；

其中，所述触发事件派发组件创建所述操作指令关联的事件，并将所述事件派发至事件监听组件，包括：触发进入事件派发封装流程；由事件派发组件创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，然后调用dispatchEvent方法以将所述数据载体对象派发至事件监听组件；

所述事件监听组件基于所述事件创建对应的promise对象及调用该promise对象的执行成功函数和执行失败函数，将创建的promise对象添加至所述promise列表数组中，并从所述数据载体对象中获取所述事件参数，以基于所述事件参数异步调用及执行所述事件调用的处理函数，并根据所述处理函数的执行结果通过所述执行成功函数和所述执行失败函数更新所述promise对象的状态；

所述事件派发组件同步获取所述创建的promise对象及调用Promise.allSettled函数以收集所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。

2.根据权利要求1所述的前端事件应答实现方法，其特征在于，所述事件监听组件基于所述事件创建对应的promise对象，包括：

所述事件监听组件调用addEventListener方法以监听派发的所述数据载体对象，并在监听到所述数据载体对象后，创建所述事件对应的promise对象，且从所述数据载体对象中获取所述promise列表数组，以将所述创建的promise对象添加至所述promise列表数组中。

3.根据权利要求2所述的前端事件应答实现方法，其特征在于，所述根据所述处理函数的执行结果通过所述执行成功函数和所述执行失败函数更新所述promise对象的状态，包括：

所述执行结果的类型包括执行成功和执行失败；

若所述处理函数执行成功，则所述事件监听组件选择所述执行成功函数，以将所述事件对应的promise对象由初始待定状态更新为已兑现状态；

若所述处理函数执行失败，则所述事件监听组件选择所述执行失败函数，以将所述事件对应的promise对象由初始待定状态更新为已拒绝状态。

4.根据权利要求3所述的前端事件应答实现方法，其特征在于，若所述执行结果还包括不同类型下的执行返回值，所述方法还包括：

所述事件监听组件在收集所述处理函数的执行结果时，将所述执行结果的类型及对应的所述执行返回值一并返回至所述事件派发组件。

5.根据权利要求1至4中任一项所述的前端事件应答实现方法，其特征在于，若所述事件监听组件包括至少两个监听器，所述方法还包括：

每一所述监听器基于所述事件创建各自对应的promise对象，再异步执行所述事件调用的处理函数，并根据所述处理函数的执行结果更新对应promise对象的状态；

所述事件派发组件同步获取所有创建的promise对象及所有处理函数的所述执行结果，等待所有处理函数对应的promise对象的状态均更新完成后，将所述事件的所有执行结果一并返回至所述前端页面。

6.一种前端事件应答实现装置，其特征在于，包括：

事件派发单元，用于响应前端页面的操作指令，触发创建所述操作指令关联的事件，并将所述事件派发至事件监听单元；其中，所述触发创建所述操作指令关联的事件，并将所述事件派发至事件监听单元，包括：触发进入事件派发封装流程；创建与所述操作指令关联的事件的数据载体对象，并将所述操作指令传入的事件参数存放于所述数据载体对象的参数属性下，以及在所述数据载体对象的promise列表属性下创建一个空promise列表数组，然后调用dispatchEvent方法以将所述数据载体对象派发至事件监听单元；

事件监听单元，用于基于所述事件创建对应的promise对象及调用该promise对象的执行成功函数和执行失败函数，将创建的promise对象添加至所述promise列表数组中，并基于所述事件参数异步调用及执行所述事件调用的处理函数，并根据所述处理函数的执行结果通过所述执行成功函数和所述执行失败函数更新所述promise对象的状态；

所述事件派发单元，还用于同步获取所述创建的promise对象及调用Promise.allSettled函数以收集所述处理函数的所述执行结果，在所述处理函数对应的promise对象的状态更新完成后，将所述事件的所述执行结果返回至所述前端页面。

7.一种终端设备，其特征在于，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施权利要求1-5中任一项所述的前端事件应答实现方法。

8.一种可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序在处理器上执行时，实施根据权利要求1-5中任一项所述的前端事件应答实现方法。

Images