CN108009030B - 通信方法和装置以及计算设备 - Google Patents

Abstract

本公开是关于一种通信方法，应用于至少包括第一组件和第二组件的组件容器中，所述方法包括：通过所述第一组件设置的内接口监听所述第一组件内的第一事件；通过所述第一组件设置的外接口监听由所述第二组件分派的第二事件；以及在监听到所述第二事件时，触发所述第一组件内的所述第一事件。根据本公开的实施例，通过引入事件通信机制，可以替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

Description

通信方法和装置以及计算设备

技术领域

本公开涉及互联网技术领域，尤其涉及一种通信方法和装置以及计算设备。

背景技术

React是作为一个JavaScript库提供的，其中包含一个JSX(JavaScript XML)编译器和关联的开发人员工具，用于创建可重用的高性能UI(User Interface，用户界面)视图组件。这些React组件可组合在一起，例如用于形成Web App(网络应用)的UI。由于React的设计思想极其独特，性能出众但代码逻辑却非常简单，所以得到越来越多的关注和使用，有趋势成为Web App开发的主流工具。

为了实现复杂框架下众多React组件之间的数据通信，引入了第三方数据流管理模块Redux。Redux的基本设计思路在于，将Web App视为一个状态机，所有的状态(state)保存在一个对象(store)里面，而向用户呈现的不同视图(view)则与不同时刻的状态一一对应。不同于传统React组件通过setState接口来修改状态数据，Redux中还引入action和reducer的概念，通过action传递状态数据给reducer，从而使store计算出新的state，对应呈现出新的视图。

然而，利用Redux处理React组件间的数据通信可能存在以下问题。例如，Redux引入了store、action和reducer等新的概念，对于不熟悉的开发人员而言具有较高的学习成本，相应需要编写很多额外的代码(用于action与reducer)，而无法通过配置的方式来使用；随着编码规模的扩大，代码体积和复杂度都会随之增长，从而难以维护。

综上所述，针对Redux存在的问题，需要提供一种能够实现React组件间数据通信的替代方案。

发明内容

本公开的目的是提供一种通信方法和装置以及计算设备，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开实施例的第一方面，提供一种通信方法，应用于至少包括第一组件和第二组件的组件容器中，所述方法包括：通过所述第一组件设置的内接口监听所述第一组件内的第一事件；通过所述第一组件设置的外接口监听由所述第二组件分派的第二事件；以及在监听到所述第二事件时，触发所述第一组件内的所述第一事件。

根据本公开实施例的第二方面，提供一种通信装置，应用于至少包括第一组件和第二组件的组件容器中，所述装置包括：内接口模块，设置为监听所述第一组件内的第一事件；外接口模块，设置为监听由所述第二组件分派的第二事件；以及事件触发模块，设置为在所述外接口模块监听到所述第二事件时，触发所述第一组件内的所述第一事件。

根据本公开实施例的第三方面，提供一种存储有计算机程序的存储介质，所述计算机程序在由安装有多个应用程序APP的设备的处理器运行时，使所述设备执行如以上任一实施例所述的方法。

根据本公开实施例的第四方面，提供一种计算设备，包括：处理器；存储器，存储有可由所述处理器执行的指令；其中所述处理器被配置为执行如以上任一实施例所述的方法。

根据本公开的实施例，通过引入事件通信机制，可以替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

图1为根据本公开一实施例的通信方法流程图。

图2为根据本公开一实施例的组件内部事件监听流程图。

图3为根据本公开一实施例的组件外部事件监听流程图。

图4为根据本公开一实施例的方法中React组件封装示意图。

图5为根据本公开一实施例的方法中组件容器封装示意图。

图6为根据本公开一实施例的通信装置示意框图。

图7为根据本公开一实施例的计算设备示意框图。

图8为根据本公开示例实施方式中一种计算设备的示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种通信方法和装置以及介质和计算设备。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

图1为根据本公开一实施例的通信方法流程图，如图所示，本实施例的方法包括以下步骤S101-S103。在一个实施例中，本实施例的方法可由安装有APP及其开发或测试工具的设备(例如计算机、手机、平板)来执行。

在步骤S101中，通过第一组件设置的内接口监听第一组件内的第一事件。

在一个实施例中，React组件间的数据通信可简化理解为第一组件获取第二组件发送的数据并将该数据用于第一组件状态的改变。为此，本实施例的方法引入事件通信机制，结合组件内部事件和外部事件的监听，在监听到预定的外部事件时触发相应的内部事件，达到改变组件自身状态的目的。本步骤涉及组件内部事件的监听处理。

需要说明的是，这里的第一组件以及第二组件都是基于传统React组件封装后的高阶组件，封装的实施例可参见后文图4的实施例，此处暂不赘述。

在一个实施例中，组件内部事件的监听流程如图2所述，包括以下步骤S201-S202。

在步骤S201中，调用内接口注册第一事件。

在步骤S202中，实现事件监听处理器监听第一事件。

在一个实施例中，这里的内接口可以理解为纯函数，其在被调用时会注册一个组件内部事件(只能被组件自身监听)，并实现一个事件监听处理器。在后续步骤监听到该组件内部事件(即第一事件)被组件自身分派时，该内接口的纯函数进一步用于执行事件监听处理器中定义的逻辑。

在步骤S102中，通过第一组件设置的外接口监听由第二组件分派的第二事件。

如上所述，本实施例的方法引入事件通信机制，结合组件内部事件和外部事件的监听，在监听到预定的外部事件时触发相应的内部事件，达到改变组件自身状态的目的。本步骤涉及组件外部事件的监听处理。需要说明的是，步骤S101对组件内部事件的监听处理和S102对组件外部事件的监听处理之间并无特定顺序的要求，两个步骤的顺序可以交换。

在一个实施例中，组件外部事件的监听流程如图3所述，包括以下步骤S301-S302。

在步骤S301中，通过第一外接口指定第二组件对应的标识。

在一个实施例中，上述组件容器内的各组件都具有能够彼此区分的唯一标识。本步骤中，通过第一外接口的配置来指定第一组件当前要监听哪个其他组件(本实施例中即第二组件)的事件。在一个实施例中，第一外接口可配置为文本的形式。

在步骤S302中，通过第二外接口将由第二组件分派的第二事件关联至第一事件。

在一个实施例中，各组件在自身内部注册事件时，会为事件指定相应的事件名。本步骤中，为了实现通过事件机制实现组件间的通信，在通过第一外接口指定第二组件唯一标识的基础上，通过第二外接口将第二组件分配的第二事件与第一组件内部分派的第一事件相关联。

在步骤S103中，在监听到第二事件时，触发第一组件内的第一事件。

经过步骤S102设置好对第二事件的监听后，本步骤中，一旦监听到第二事件，即触发第一组件内的第一事件，进而引起第一组件的状态变化，由此实现第一组件与第二组件间通信的目的。

接续图3的实施例，在将第二组件分配的第二事件与第一组件内部分派的第一事件相关联后，一旦有监听到第二事件的分派，则本步骤会分派当前第一组件监听的第一事件。

根据本公开的实施例，通过引入事件通信机制，可以替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

为实现前述实施例的方法，本公开还提供一种React组件的封装结构和方法。

图4为根据本公开一实施例的React组件封装结构示意图。如图所示，本实施例的封装结构首先在现有React组件41的基础上封装一个高阶组件(可称为Ragdoll组件)42，并实现第一内接口getIntialData(获取初始数据)和第二内接口submit(提交)；之后在高阶组件42的基础上再通过Connect函数封装成最终组件(即前述实施例的第一组件或第二组件)43，并实现第三内接口on(监听)和第四内接口emit(分派)。

图5为根据本公开一实施例的方法中组件容器封装示意图。在一个实施例中，本实施例的组件容器50可对应于Web App的一个页面，并包括一至多个最终组件43。虽然图5中仅示出一个最终组件43，但本领域技术人员可以理解，图1实施例中所述的组件容器至少可包括第一组件和第二组件共两个最终组件，并且本公开的实施例不限于此。

如图5所示，本实施例的组件容器50中最终组件43设有上文已经述及的第一外接口uniqueKey(唯一键)和第二外接口configs(配置)，另外还可选地设有第三外接口trackConfigs(追踪配置)；组件容器50自身则视需要定义有初始化外接口getInitialData(获取初始数据)、状态提交外接口submitButton(提交按钮)、提交成功外接口submit(提交)和提交失败外接口errorCallback(错误调回)中的一个或多个。

以下针对图4和图5中各接口的实现示例分别加以详细说明。

在一个实施例中，最终组件43的第一内接口getIntialData可实现为纯函数，其获取从组件容器50的初始化外接口getInitialData返回的初始化状态数据，用于初始化最终组件43的状态数据。

在一个实施例中，最终组件43的第二内接口submit也可实现为纯函数，当组件容器50的状态提交外接口submitButton被调用时，会触发调用组件容器内包含的所有最终组件43的第二内接口submit，用于控制将各最终组件43的状态数据提交给服务器。

在一个实施例中，最终组件43的第三内接口on也可实现为纯函数，其调用时会注册一个组件内部事件(只会被该组件自身监听)，并实现一个事件监听处理器，当这个内部事件被该组件自己分派时，会执行监听处理器中定义的逻辑。在一个实施例中，第三内接口on对应的纯函数设有两个参数type(类型)和callback(回调)，前者用于表示订阅的事件名，后者对应于监听到分派事件时的回调函数。

在一个实施例中，最终组件43的第四内接口emit也可实现为纯函数，其调用时会分派一个外部事件(只会被该组件之外的其他最终组件监听)，而监听到这个外部事件的其他最终组件会分派自身注册的内部事件。在一个实施例中，第四内接口emit对应的纯函数设有两个参数type(类型)和data(数据)，前者用于表示分派的事件名，后者表示分派事件时传递的相关数据。

在一个实施例中，最终组件43的第一外接口uniqueKey可实现为文本，其表示最终组件的唯一标识，用于在当前最终组件监听外部事件时指定监听哪个其他最终组件的事件。

在一个实施例中，最终组件43的第二外接口configs可实现为对象，其示例格式可采用：{'监听组件的uniqueKey/监听组件的事件名'：'触发本组件的事件'}，但本公开不限于此。例如，{'component3/shop change':'refresh pic'}的配置表示当前组件(第一组件)监听uniqueKey值为component3的组件(第二组件)所分派的shop change事件(第二事件)，并且一旦监听到shop change事件的分派时，则触发分派当前组件(第一组件)监听的refresh pic事件(第一事件)。另外，在一个实施例中，第二外接口configs也支持以通配符来指定第二组件，例如如果最终组件43希望订阅任意其他组件分派的shop-change事件，只需要在设置configs时，将上述示例中的component3修改为通配符*(星号)即可实现。

在一个实施例中，最终组件43的第三外接口trackConfigs可作为预留的打点接口，该接口的数据格式可以为任意自定义的数据，并无固定格式，从而便于后续的扩展使用。

接续，在一个实施例中，组件容器50的初始化外接口getInitialData可实现为纯函数，其返回值为初始化数据，从而该组件容器50所包含的最终组件43在初始化时可以通过组件的第一内接口getInitailData获取到该初始化数据。

在一个实施例中，组件容器50的状态提交外接口submitButton对应于传统的React组件，组件容器50会传递一个onSubmit(监听提交)函数给该React组件，该React组件在调用该onSubmit函数时会调用其第二内接口submit。

在一个实施例中，组件容器50的提交成功外接口submit可实现为纯函数，当组件容器50包含的所有最终组件43的第二内接口submit都成功执行完毕后，调用该函数。

在一个实施例中，组件容器50的提交失败外接口errorCallback也可实现为纯函数，当组件容器50包含的最终组件43的第二内接口submit存在执行错误时，调用该函数并接收一个参数值例如为错误信息文本的参数。

根据本公开的实施例，通过提供React组件的封装结构和容纳封装后最终组件的组件容器，能够实现事件通信机制的引入，进而替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。另外，也易于理解的是，这些步骤可以是例如在多个模块/进程/线程中同步或异步执行。

本示例实施方式中进一步提供了一种通信装置。

图6为根据本公开一实施例的通信装置示意框图。本实施例的通信装置应用于至少包括第一组件和第二组件的组件容器中，如图6所示，该装置包括内接口模块61、外接口模块62和事件触发模块63。

在一个实施例中，内接口模块61设置为监听上述第一组件内的第一事件；外接口模块62设置为监听由上述第二组件分派的第二事件；事件触发模块63设置为在上述外接口模块62监听到第二事件时，触发上述第一组件内的第一事件。

根据本公开的实施例，通过引入事件通信机制，可以替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

图7为根据本公开另一实施例的通信装置示意框图。如图7所示，本实施例的通信装置在图6实施例的基础上，内接口模块61进一步包括注册单元611和监听单元612，外接口模块62进一步包括指定单元621和关联单元622。

在一个实施例中，注册单元611设置为调用内接口注册第一事件，监听单元612设置为实现事件监听处理器监听第一事件。作为示例，这里的内接口可以理解为纯函数，其在被注册单元611调用时会注册一个组件内部事件(只能被组件自身监听)，并实现一个事件监听处理器(即监听单元612)。后续在事件监听处理器监听到该组件内部事件(即第一事件)被组件自身分派时，该内接口的纯函数进一步用于执行事件监听处理器中定义的逻辑。

在一个实施例中，指定单元621设置为通过第一外接口指定第二组件对应的标识，关联单元622设置为通过第二外接口将由第二组件分派的第二事件关联至第一事件。作为示例，各组件在自身内部注册事件时，会为事件指定相应的事件名，相应地，为了实现通过事件机制实现组件间的通信，在指定单元621通过第一外接口指定第二组件唯一标识的基础上，关联单元622设通过第二外接口将第二组件分配的第二事件与第一组件内部分派的第一事件相关联。

根据本公开的实施例，通过引入事件通信机制，可以替代Redux方案实现React组件间的数据通信，减轻了代码的体积和复杂度，从而降低了项目的开发和维护成本。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。作为模块或单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

通过以上实施方式的描述，本领域的技术人员易于理解，上文描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。

例如，在一个示例实施方式中，还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时可以实现上述任意一个实施例中所述方法的步骤。所述方法的具体步骤可参考前述实施例中的详细描述，此处不再赘述。所述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在另一个示例实施方式中，还提供一种计算设备，该计算设备可以是手机、平板电脑等移动终端，也可以是台式计算机、服务器等终端设备，本示例实施方式中对此不作限制。图8示出根据本公开示例实施方式中一种计算设备80的示意图。例如，计算设备80可以被提供为一移动终端。参照图8，设备80包括处理组件81，其进一步包括一个或多个处理器，以及由存储器82所代表的存储器资源，用于存储可由处理组件81的执行的指令，例如应用程序。存储器82中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件81被配置为执行指令，以执行上述的通信方法。该方法的步骤可参考前述方法实施例中的详细描述，此处不再赘述。

计算设备80还可以包括一个电源组件83被配置为执行计算设备80的电源管理，一个有线或无线网络接口84被配置为将计算设备80连接到网络，和一个输入输出(I/O)接口85。计算设备80可以操作基于存储在存储器82的操作系统，例如Android、IOS或类似。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由所附的权利要求指出。

虽然已参照几个典型实施例描述了本公开，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本公开能够以多种形式具体实施而不脱离申请的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。

Claims (9)

1.一种通信方法，其特征在于，应用于至少包括第一组件和第二组件的组件容器中，其中，所述第一组件和所述第二组件包括基于React组件封装后的高阶组件，并在所述高阶组件的基础上通过Connect函数封装成最终组件，所述方法包括：

通过所述第一组件设置的内接口监听所述第一组件内的第一事件，其中，所述内接口包括监听所述第一组件内的第一事件的接口函数；

通过所述第一组件设置的外接口监听由所述第二组件分派的第二事件，其中，所述外接口包括监听由所述第二组件分派的第二事件的接口函数；以及

在监听到所述第二事件时，触发所述第一组件内的所述第一事件。

2.如权利要求1所述的方法，其中，通过所述内接口监听所述第一事件包括：

调用所述内接口注册所述第一事件；以及

实现事件监听处理器监听所述第一事件。

3.如权利要求2所述的方法，其中，触发所述第一事件包括：

在所述第一事件在所述第一组件内被分派时，执行所述事件监听处理器中的预定逻辑。

4.如权利要求1所述的方法，其中，通过所述外接口监听所述第二事件包括：

通过第一外接口指定所述第二组件对应的标识；以及

通过第二外接口将由所述第二组件分派的第二事件关联至所述第一事件。

5.如权利要求1至4任一项所述的方法，其中，在通过所述内接口监听所述第一事件之前，所述方法还包括通过以下步骤将React组件封装成所述第一或第二组件：

基于React组件封装成设置有第一和第二内接口的高阶组件，所述第一内接口用于获取从所述组件容器的相应外接口返回的初始化状态数据，所述第二内接口用于提交所述React组件的状态数据；以及

基于所述高阶组件通过Connect函数封装成具有第三和第四内接口的所述第一或第二组件，所述第三内接口用于监听组件内部事件，所述第四内接口用于分派组件外部事件。

6.如权利要求5所述的方法，还包括：

通过初始化外接口获取预先配置的初始化状态数据并返回至所述第一内接口；

通过状态提交外接口调用所述第二内接口提交所述React组件的状态数据；

通过提交成功外接口调用所述第二内接口成功提交状态数据时进行调用；以及

通过提交失败外接口调用所述第二内接口提交状态数据失败时进行调用并接收错误提示信息。

7.一种通信装置，其特征在于，应用于至少包括第一组件和第二组件的组件容器中，其中，所述第一组件和所述第二组件包括基于React组件封装后的高阶组件，并在所述高阶组件的基础上通过Connect函数封装成最终组件，所述装置包括：

内接口模块，设置为监听所述第一组件内的第一事件，其中，所述内接口模块包括监听所述第一组件内的第一事件的接口函数；

外接口模块，设置为监听由所述第二组件分派的第二事件，其中，所述外接口模块包括监听由所述第二组件分派的第二事件的接口函数；以及

事件触发模块，设置为在所述外接口模块监听到所述第二事件时，触发所述第一组件内的所述第一事件。

8.一种存储有计算机程序的存储介质，所述计算机程序在由安装有多个应用程序APP的设备的处理器运行时，使所述设备执行如权利要求1-6中任一项所述的方法。

9.一种计算设备，包括：

处理器；

存储器，存储有可由所述处理器执行的指令；

其中所述处理器被配置为执行如权利要求1-6中任一项所述的方法。

Images