CN111782214B - 客户端系统、运行方法、电子设备和存储介质 - Google Patents

Abstract

本发明涉及前端系统技术领域，提供一种客户端系统、运行方法、电子设备和存储介质。客户端系统包括：多个业务模块，每个业务模块配置有：视图单元，配置有对应不同类型客户端的视图层，视图单元用于加载当前客户端的视图界面并捕捉视图界面的更新事件；接口单元，用于获取供视图单元加载视图界面的初始化数据和用于更新视图界面的更新数据；以及事件监听模块，与各业务模块耦接，用于监听各业务模块的更新事件，并传输更新事件的更新数据。本发明的客户端系统可以覆盖不同类型的客户端，适用于基于多种客户端的应用，节省开发成本，降低维护成本；并通过事件监听实现业务模块之间的数据传输，统一各种客户端与服务端之间的数据交互。

Description

客户端系统、运行方法、电子设备和存储介质

技术领域

本发明涉及前端系统技术领域，具体地说，涉及一种客户端系统、运行方法、电子设备和存储介质。

背景技术

在进行前端开发时，需要考虑到不同的客户端，不同的使用场景。现有技术中，应用在前端交互和设计时，通常需要针对不同的客户端开发几套不同的系统，以分别适应不同客户端的使用场景。

这种针对不同客户端开发多套系统的方式，不仅在开发时耗费大量人力物力，延后应用上线时间，增加企业开发成本；在维护方面，也会因为不同客户端的不同系统，通常需要三到四个专门的团队来进行各套系统的维护，极大增加了企业的维护成本。

因此，需要解决针对不同客户端使用多套系统，导致开发成本和维度成本均较高的问题。

需要说明的是，上述背景技术部分公开的信息仅用于加强对本发明的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

有鉴于此，本发明提供一种客户端系统、运行方法、电子设备和存储介质，可以覆盖不同类型的客户端，适用基于多种客户端的应用，节省开发成本，降低维护成本；并通过事件监听实现业务模块之间的数据传输，统一各种客户端与服务端之间的数据交互。

本发明的一个方面提供一种客户端系统，包括：多个业务模块，每个所述业务模块配置有：视图单元，配置有对应不同类型客户端的视图层，所述视图单元用于加载当前客户端的视图界面并捕捉所述视图界面的更新事件；接口单元，用于获取供所述视图单元加载所述视图界面的初始化数据和用于更新所述视图界面的更新数据；以及事件监听模块，与各所述业务模块耦接，所述事件监听模块用于监听各所述业务模块的更新事件，并传输所述更新事件的更新数据。

在一些实施例中，所述视图层包括：对应移动端应用程序的视图层，对应移动端网页应用的视图层和对应PC端网页应用的视图层。

在一些实施例中，所述视图单元加载当前客户端的视图界面时，根据所述当前客户端的设备参数，触发对应所述当前客户端的视图层，以加载所述当前客户端的视图界面；对应不同类型客户端的视图层的触发事件各不相同。

在一些实施例中，所述更新数据包括外部页面的更新事件的更新数据和外部业务模块的更新事件的更新数据。

在一些实施例中，所述接口单元自服务端获取所述初始化数据和用于更新所述视图界面的更新数据；所述事件监听模块将所述更新事件的更新数据传输至所述服务端。

在一些实施例中，所述事件监听模块当所述视图单元捕捉到所述视图界面的更新事件时被触发。

在一些实施例中，每个所述业务模块还配置有：逻辑单元，耦接于所述视图单元和所述接口单元之间；交互接收器，与所述视图单元和所述逻辑单元耦接，用于接收交互触发事件，经所述逻辑单元计算后由所述视图单元显示。

本发明的另一个方面提供一种客户端系统的运行方法，基于上述任意实施例所述的客户端系统，所述运行方法包括：各所述业务模块的视图单元响应于当前客户端的操作指令，分别通过对应的接口单元获取初始化数据，加载对应所述操作指令的视图界面，形成显示于所述当前客户端的初始页面；当至少一所述业务模块的视图单元捕捉到其视图界面的更新事件，触发所述事件监听模块，所述事件监听模块根据监听到的所述更新事件，传输所述更新事件的更新数据；以及，各所述业务模块的接口单元获取所述更新数据，分别供对应的视图单元更新其视图界面，形成显示于所述当前客户端的更新页面。

本发明再一个方面提供一种电子设备，包括：一处理器；一存储器，所述存储器中存储有所述处理器的可执行指令；其中，所述处理器被配置为经由执行所述可执行指令来实现上述实施例所述的客户端系统的运行方法。

本发明的又一个方面提供一种计算机可读的存储介质，用于存储程序，所述程序被执行时实现上述实施例所述的客户端系统的运行方法。

本发明与现有技术相比的有益效果至少包括：

通过各个业务模块配置的对应不同类型客户端的视图层，实现覆盖不同类型的客户端，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统，节省开发成本，降低维护成本；

各个业务模块之间的数据传输交互通过接口单元和事件监听模块实现，通过事件监听的独立服务进行模块解耦，并实现了不同类型客户端与服务端之间的数据交互的统一。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出本发明实施例中客户端系统的模块示意图；

图2示出本发明实施例中一业务模块的示意图；

图3示出本发明实施例中业务模块之间的数据传输示意图；

图4示出本发明实施例中客户端系统的运行方法的步骤示意图；

图5示出本发明实施例中电子设备的结构示意图；以及

图6示出本发明实施例中计算机可读的存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的实施方式。相反，提供这些实施方式使本发明全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的结构，因而将省略对它们的重复描述。

此外，附图仅为本发明的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

图1示出实施例中客户端系统的主要模块，图2示出实施例中一个业务模块的主要结构。结合图1和图2所示，本实施例中客户端系统10主要包括：多个业务模块11，每个业务模块11配置有：视图单元111，视图单元111配置有对应不同类型客户端的视图层，视图单元111用于加载当前客户端的视图界面并捕捉视图界面的更新事件；接口单元112，用于获取供视图单元111加载视图界面的初始化数据和用于更新视图界面的更新数据；以及事件监听模块12，与各业务模块11耦接，事件监听模块12用于监听各业务模块11的更新事件，并传输更新事件的更新数据。

视图单元111配置的视图(View)层具体包括：对应移动端应用程序的视图层，图1中标示为RN(React Native)视图层1111；对应移动端网页应用的视图层，图1中标示为H5(Html5)视图层1112；以及对应PC(Personal Computer，个人计算机)端网页应用的视图层，图1中标示为Web视图层1113。通过RN视图层1111，实现移动端移动程序的页面渲染和事件捕捉，通过H5视图层1112，实现移动端网页应用的页面渲染和事件捕捉，通过Web视图层1113，实现PC端网页应用的页面渲染和事件捕捉。进而，本实施例中的客户端系统通过各个业务模块11配置的对应不同类型客户端的视图层，实现覆盖不同类型的客户端，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统，就能使用于不同类型的客户端，节省开发成本，降低维护成本。

进一步地，视图单元111加载当前客户端的视图界面时，根据当前客户端的设备参数，触发对应当前客户端的视图层，以加载当前客户端的视图界面，且对应不同类型客户端的视图层的触发事件各不相同。例如，移动端应用程序的触发事件可以是对某一页面区域的触控操作，则各个业务模块11的视图单元111接收到用户输入的该触控操作，根据该触控操作携带的设备参数，分别触发各自的对应移动端应用程序的RN视图层1111加载渲染视图界面，最终形成显示于当前客户端的当前显示页面。再如，PC端网页应用的触发事件可以是对某一页面区域的点击操作，则各个业务模块11的视图单元111接收到该点击操作，根据该点击操作携带的设备参数，分别触发各自的对应PC端网页应用的Web视图层1113加载渲染视图界面，最终形成显示于当前客户端的当前显示页面。

视图单元111除负责渲染页面外，还负责捕捉其对应视图界面的更新事件，进而触发事件监听模块12，通过事件监听模块12和各个业务模块11的接口单元112实现各个业务模块11之间的数据传输。

具体来说，视图界面的更新事件包括数据增加、数据删除、页面刷新等任意可能导致界面内容发生变化的事件。更新事件由视图单元111中对应当前客户端的视图层捕捉；事件监听模块12用于监听更新事件，当视图层捕捉到更新事件发生，则事件监听模块12触发，进而向其余的业务模块11传输监听到的更新事件的更新数据。也就是说，当事件监听模块12监听到一个业务模块11的监听事件，会及时地将该监听事件通过其余的业务模块11的接口单元112传输至其余的业务模块11，以使当前显示页面中各个区域的视图界面对应更新。通过事件监听的独立服务，实现业务模块11之间的解耦，各个业务模块11之间仅通过接口单元112和事件监听模块12实现数据传输。

在一些实施例中，接口单元112获取的用于更新视图界面的更新数据不仅包括图2所示的外部业务模块11’的更新事件的更新数据，还包括外部页面20的更新事件的更新数据。其中，外部业务模块11’即客户端系统10中除该业务模块11外的其他业务模块，外部页面20是与当前显示页面关联的其他页面，例如第三方页面。对于一个业务模块11来说，当其他业务模块和其他关联页面中发生任何可能导致视图界面变化的更新事件，均会由事件监听模块12通过该业务模块11的接口单元112传输获得更新数据，以使该业务模块11对应的视图界面及时更新。

在一些实施例中，各个业务模块11的接口单元112是自服务端获取用于渲染视图界面的初始化数据和用于更新视图界面的更新数据。并且，事件监听模块12监听到更新事件时，将更新事件的更新数据传输至服务端。从而，通过事件监听模块12和各个业务模块11的接口单元112，实现了不同类型客户端与服务端之间的数据交互的统一。

进一步地，参照图2所示，每个业务模块11还配置有：逻辑单元113，耦接于视图单元111和接口单元112之间，逻辑单元113用于对接口单元112获取的数据进行计算，例如可使用通用的JS(JavaScript)类方法进行逻辑运算，并传输给视图单元111进行加载显示。每个业务模块11可以通过各自的渲染通道进行逻辑单元113和视图单元111的重绘和渲染。交互接收器114，与视图单元111和逻辑单元113耦接，用于接收交互触发事件，例如来自用户的交互触发事件，经逻辑单元113计算后由视图单元111显示。业务模块11还可配置状态集合115等用于存储数据的单元。

图3示出一个具体的示例中，不同业务模块之间的数据传输示意。参照图3所示，本实施例中客户端系统例如是机票预订应用的客户端系统，其中包括两个业务模块，在图3中标示为乘机人模块11a和保险模块11b。当用户触发机票预订应用的“机票预订”事件时，乘机人模块11a采用其接口单元112a获取的初始化数据，通过渲染函数Render由视图单元111a加载乘机人视图界面，保险模块11b采用其接口单元112b获取的初始化数据，通过渲染函数Render由视图单元111b加载保险视图界面，从而可以形成显示于客户端的包含乘机人视图界面和保险视图界面的机票预定填写页面。进一步地，乘机人模块11a和保险模块11b通过事件监听模块12实现数据传输，此处事件监听模块12可采用事件派发函数Event Emit实现事件监听。当乘机人模块11a的视图单元111a捕捉到更新事件，触发事件监听模块12，通过接口单元112a和112b向保险模块11b传输更新数据。同理，当保险模块11b的视图单元111b捕捉到更新事件，触发事件监听模块12，通过接口单元112b和112a向乘机人模块11a传输更新数据。其中，乘机人模块11a的接口单元112a和保险模块11b的接口单元112b均可自服务端获取初始化数据和更新数据。

上述实施例所描述的客户端系统10，通过各个业务模块11配置的对应不同类型客户端的视图层111，实现覆盖不同类型的客户端的前端应用和站点(包括React Native，Html5，PC等)，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统即可使用于各种客户端，极大地节省了开发成本，并降低了维护成本。另外，客户端系统10的各个业务模块11之间的数据传输交互通过接口单元112和事件监听模块12实现，通过事件监听的独立服务实现各个业务模块11之间的解耦，并实现了不同类型客户端与服务端之间的数据交互的统一。

本发明实施例还提供一种客户端系统的运行方法，基于上述实施例所描述的客户端系统。图4示出实施例中客户端系统的运行方法的主要步骤，参照图4所示，本实施例中客户端系统的运行方法主要包括：在步骤S410中，各业务模块的视图单元响应于当前客户端的操作指令，分别通过对应的接口单元获取初始化数据，加载对应操作指令的视图界面，形成显示于当前客户端的初始页面；在步骤S420中，当至少一业务模块的视图单元捕捉到其视图界面的更新事件，触发事件监听模块，事件监听模块根据监听到的更新事件，传输更新事件的更新数据；以及在步骤S430中，各业务模块的接口单元获取更新数据，分别供对应的视图单元更新其视图界面，形成显示于当前客户端的更新页面。

需要说明的是，本实施例的各步骤的序号仅用于表示不同场景下的运行方式，并不限定步骤之间的逻辑关系和执行顺序。

本实施例的客户端系统的运行方法的各个步骤中，各个业务模块的视图单元和接口单元，以及事件监听模块的工作原理与图1～图3所描述的客户端系统中各个业务模块的视图单元和接口单元，以及事件监听模块的工作原理相同，因此不再重复说明。

本实施例的客户端系统的运行方法，通过各个业务模块配置的对应不同类型客户端的视图层，实现覆盖不同类型的客户端的前端应用和站点，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统即可使用于各种客户端，极大地节省了开发成本，并降低了维护成本。另外，本实施例的客户端系统的运行方法通过各个业务模块的接口单元和事件监听模块实现各个业务模块之间的数据传输，通过事件监听的独立服务实现各个业务模块的解耦，并实现了不同类型客户端与服务端之间的数据交互的统一。

本发明实施例还提供一种电子设备，包括处理器和存储器，存储器中存储有可执行指令，处理器被配置为经由执行可执行指令来执行上述实施例中的客户端系统的运行方法的步骤。

如上所述，本发明的电子设备能够通过各个业务模块配置的对应不同类型客户端的视图层，实现覆盖不同类型的客户端的前端应用和站点，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统即可使用于各种客户端，极大地节省了开发成本，并降低了维护成本。另外，本发明的电子设备能够通过各个业务模块的接口单元和事件监听模块实现各个业务模块之间的数据传输，通过事件监听的独立服务实现各个业务模块的解耦，并实现了不同类型客户端与服务端之间的数据交互的统一。

图5是本发明实施例中电子设备的结构示意图，应当理解的是，图5仅仅是示意性地示出各个模块，这些模块可以是虚拟的软件模块或实际的硬件模块，这些模块的合并、拆分及其余模块的增加都在本发明的保护范围之内。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“平台”。

下面参照图5来描述本发明的电子设备500。图5显示的电子设备500仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，电子设备500以通用计算设备的形式表现。电子设备500的组件可以包括但不限于：至少一个处理单元510、至少一个存储单元520、连接不同平台组件(包括存储单元520和处理单元510)的总线530、显示单元540等。

其中，存储单元存储有程序代码，程序代码可以被处理单元510执行，使得处理单元510执行上述实施例中描述的客户端系统的运行方法的步骤。例如，处理单元510可以执行如图4所示的步骤。

存储单元520可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)5201和/或高速缓存存储单元5202，还可以进一步包括只读存储单元(ROM)5203。

存储单元520还可以包括具有一个或多个程序模块5205的程序/实用工具5204，这样的程序模块5205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线530可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备500也可以与一个或多个外部设备600通信，外部设备600可以是键盘、指向设备、蓝牙设备等设备中的一种或多种。这些外部设备600使得用户能与该电子设备500进行交互通信。电子设备500也能与一个或多个其它计算设备进行通信，所示计算机设备包括路由器、调制解调器。这种通信可以通过输入/输出(I/O)接口550进行。并且，电子设备500还可以通过网络适配器560与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器560可以通过总线530与电子设备500的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备500使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。

本发明实施例还提供一种计算机可读的存储介质，用于存储程序，程序被执行时实现上述实施例描述的客户端系统的运行方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行上述实施例描述的客户端系统的运行方法的步骤。

如上所述，本发明的计算机可读的存储介质能够通过各个业务模块配置的对应不同类型客户端的视图层，实现覆盖不同类型的客户端的前端应用和站点，使客户端系统适用于基于多种客户端的应用，即一个应用只需开发一套客户端系统即可使用于各种客户端，极大地节省了开发成本，并降低了维护成本。另外，本发明的计算机可读的存储介质能够通过各个业务模块的接口单元和事件监听模块实现各个业务模块之间的数据传输，通过事件监听的独立服务实现各个业务模块的解耦，并实现了不同类型客户端与服务端之间的数据交互的统一。

图6是本发明的计算机可读的存储介质的结构示意图。参考图6所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品700，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子包括但不限于：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读的存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备，例如利用因特网服务提供商来通过因特网连接。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (5)

1.一种客户端系统，其特征在于，包括：

多个业务模块，每个所述业务模块配置有：

视图单元，配置有对应不同类型客户端的视图层，包括对应移动端应用程序的视图层、对应移动端网页应用的视图层和对应PC端网页应用的视图层，所述视图单元用于加载当前客户端的视图界面并捕捉所述视图界面的更新事件；

其中，所述视图单元加载当前客户端的视图界面时，根据所述当前客户端的设备参数，触发对应所述当前客户端的视图层，以加载所述当前客户端的视图界面，对应不同类型客户端的视图层的触发事件各不相同；

接口单元，用于获取供所述视图单元加载所述视图界面的初始化数据和用于更新所述视图界面的更新数据；

其中，所述更新数据包括外部页面的更新事件的更新数据和外部业务模块的更新事件的更新数据；以及

事件监听模块，与各所述业务模块耦接，所述事件监听模块用于监听各所述业务模块的更新事件，并传输所述更新事件的更新数据；

其中，所述事件监听模块当所述视图单元捕捉到所述视图界面的更新事件时被触发，所述接口单元自服务端获取所述初始化数据和用于更新所述视图界面的更新数据，所述事件监听模块将所述更新事件的更新数据传输至所述服务端。

2.如权利要求1所述的客户端系统，其特征在于，每个所述业务模块还配置有：

逻辑单元，耦接于所述视图单元和所述接口单元之间；

交互接收器，与所述视图单元和所述逻辑单元耦接，用于接收交互触发事件，经所述逻辑单元计算后由所述视图单元显示。

3.一种客户端系统的运行方法，其特征在于，基于权利要求1或2所述的客户端系统，所述运行方法包括：

各所述业务模块的视图单元响应于当前客户端的操作指令，分别通过对应的接口单元获取初始化数据，加载对应所述操作指令的视图界面，形成显示于所述当前客户端的初始页面；

当至少一所述业务模块的视图单元捕捉到其视图界面的更新事件，触发所述事件监听模块，所述事件监听模块根据监听到的所述更新事件，传输所述更新事件的更新数据；以及

各所述业务模块的接口单元获取所述更新数据，分别供对应的视图单元更新其视图界面，形成显示于所述当前客户端的更新页面。

4.一种电子设备，其特征在于，包括：

一处理器；

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

其中，所述处理器被配置为经由执行所述可执行指令来实现权利要求3所述的客户端系统的运行方法。

5.一种计算机可读的存储介质，用于存储程序，其特征在于，所述程序被执行时实现权利要求3所述的客户端系统的运行方法。