CN118057305A - 交互数据处理方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明公开了一种交互数据处理方法、装置、电子设备和存储介质，方法包括：构建目标交互页面的父级交互组件并添加若干子级交互组件；根据组件与组件之间的归属关系，确定资源文件之间的依赖信息；响应于更新操作，获取资源文件的修改信息，根据修改信息和依赖信息确定目标资源文件；根据修改信息的资源路径确定更新文件，并对目标资源文件进行热更新，实现对子级交互组件的热更新；并进一对父级交互组件进行热更新，从而实现目标交互页面的更新；方法有效地提升了更新维护以及开发过程的操作便捷性，进而有效地提高了开发效率，提升了目标对象的操作体验，可以广泛应用至计算机技术领域，并延伸至物联网、车联网以及云计算等相关技术领域。

Description

交互数据处理方法、装置、电子设备和存储介质

技术领域

本发明涉及计算机技术领域，尤其是交互数据处理方法、装置、电子设备和存储介质。

背景技术

随着计算机技术的发展，终端应用被广泛使用，并且随着搭载平台的不断更新，应用的呈现方式也出现了多种多样的方式，例如，在已知的社交软件上打通各类第三方移动交互开放接口，以搭载更为轻量的应用功能，带来更为丰富的实用体验。在相关技术方案中，针对前述更为轻量的应用功能或者服务的开发，其采用的构建工具或开发工具实现的热更新功能都是基于当前页面只有一个实例结构的情况下实现的；这一实例结构可以是文档窗口实例、视频窗口实例以及图片轮播实例等。

通过定制元素的方式对页面中的多个实例结构进行定义的开发方式，可以在单一页面中呈现更为丰富的信息流内容。但是，由于在多实例结构的开发模式下，不同的实例结构需要进行隔离；由于隔离的存在，在进行维护以及更新的过程中，在对实例结构进行修改变更之后，需要进行重新加载才能在对应的实例结构中进行信息流内容的展示；重复的更新和加载的方式，导致应用功能的开发流程繁琐，开发效率低下。

发明内容

有鉴于此，本发明实施例提供一种更易于搜索以及维护的交互数据处理方法、装置、电子设备和存储介质，以提高交互操作界面的响应效率，从而提高开发效率，增强交互体验。

本发明实施例的一方面提供了一种交互数据处理方法，方法包括：

构建目标交互页面的父级交互组件，在所述父级交互组件中添加若干子级交互组件；

根据所述父级交互组件与所述子级交互组件之间的归属关系，确定所述子级交互组件对应的第二资源文件与所述父级交互组件对应的第一资源文件之间的依赖信息；

响应于对所述父级交互组件的操作，获取所述父级交互组件对应的第一资源文件的修改信息，并根据所述修改信息以及所述依赖信息从若干所述第二资源文件中确定目标资源文件；

根据所述修改信息的第一资源路径确定更新文件，根据所述更新文件对所述目标资源文件进行热更新，根据热更新后的所述目标资源文件对所述子级交互组件进行热更新；

根据热更新后的所述子级交互组件确定热更新后的所述父级交互组件，根据热更新后的所述父级交互组件更新所述目标交互页面。

本发明实施例的另一方面提供了一种交互数据处理装置，装置包括：

第一单元，用于构建目标交互页面的父级交互组件，在所述父级交互组件中添加若干子级交互组件；

第二单元，用于根据所述父级交互组件与所述子级交互组件之间的归属关系，确定所述子级交互组件对应的第二资源文件与所述父级交互组件对应的第一资源文件之间的依赖信息；

第三单元，用于响应于对所述父级交互组件的操作，获取所述父级交互组件对应的第一资源文件的修改信息，并根据所述修改信息以及所述依赖信息从若干所述第二资源文件中确定目标资源文件；

第四单元，用于根据所述修改信息的第一资源路径确定更新文件，根据所述更新文件对所述目标资源文件进行热更新，根据热更新后的所述目标资源文件对所述子级交互组件进行热更新；

第五单元，用于根据热更新后的所述子级交互组件确定热更新后的所述父级交互组件，根据热更新后的所述父级交互组件更新所述目标交互页面。

在一种可能实现的方式中，所述第一单元包括：

第一子单元，用于获取候选交互组件的第三资源文件；

第二子单元，用于根据所述第三资源文件确定渲染所述候选交互组件的第二资源路径；

第三子单元，用于根据所述第三资源文件以及所述第二资源路径确定配置信息，根据所述配置信息将所述子级交互组件添加至所述父级交互组件。

在一种可能实现的方式中，所述第二单元包括：

第四子单元，用于获取所述第一资源文件与所述父级交互组件的第一映射关系；

第五子单元，用于获取所述第二资源文件与所述子级交互组件的第二映射关系；

第六子单元，用于将所述第一映射关系、所述第二映射关系以及所述归属关系进行整合得到所述依赖信息。

在一种可能实现的方式中，所述第二源文件包括第二逻辑文件以及第二样式文件；所述第五子单元包括：

第一模组，用于从所述第二资源文件中解析得到所述第二逻辑文件以及所述第二样式文件；

第二模组，用于确定所述第二逻辑文件的第三资源路径和所述第二样式文件的第四资源路径，并将所述第三资源路径以及所述第四资源路径加入至所述第二映射关系。

在一种可能实现的方式中，所述第三单元包括：

第七子单元，用于对所述修改信息进行静态分析确定进行修改操作后所述第一资源文件的文件属性信息；

第八子单元，用于根据所述文件属性信息中的第一标识信息以及所述依赖信息在第二资源文件中进行遍历，根据所述遍历结果确定第二标识信息；

第九子单元，用于根据所述第二标识信息确定与进行修改操作后的所述第一资源文件存在依赖关系的所述目标资源文件。

在一种可能实现的方式中，所述第四单元包括：

第十子单元，用于将所述更新文件中的第一逻辑文件更新至所述目标资源文件的脚本文件；

第十一子单元，用于将所述更新文件中的第一样式文件更新至所述目标资源文件的工程文件；

第十二子单元，用于根据所述更新后的所述脚本文件以及更新后的所述工程文件对所述子级交互组件进行热更新。

在一种可能实现的方式中，所述第四单元还包括：

第十三子单元，用于确定所述脚本文件与所述工程文件之间的关联关系；

第十四子单元，用于通过所述第一逻辑文件对所述脚本文件进行更新，根据所述关联关系获取未更新的工程文件，并根据更新后的所述脚本文件以及未更新的所述工程文件对所述子级交互组件进行热更新；

第十五子单元，用于通过所述第一样式文件对所述工程文件进行更新，根据所述关联关系获取未更新的脚本文件，并根据更新后的所述工程文件以及未更新的所述脚本文件对所述子级交互组件进行热更新。

在一种可能实现的方式中，所述第五单元包括：

第十六子单元，用于根据所述归属信息以及热更新后的所述子级交互组件对所述父级交互组件进行热更新；

第十七子单元，用于对所述父级交互组件以及父级交互组件下属的所述子级交互组件进行渲染，对所述目标交互页面进行更新。

在一种可能实现的方式中，所述第十六子单元包括：

第三模组，用于获取所述父级交互组件对应的第一资源文件中的父文件节点，根据所述依赖信息在所述父文件节点中确定所述子级交互组件对应的子文件节点；

第四模组，用于根据所述更新文件创建动态关联标签，根据所述动态关联标签将所述更新文件插入至所述子文件节点；

第五模组，用于根据所述子文件节点中的所述动态关联标签触发所述子级交互组件的热更新，并根据所述归属信息以及热更新后的所述子级交互组件对所述父级交互组件进行热更新。

在一种可能实现的方式中，所述第三模组包括：

第一子模组，用于获取所述父级交互组件中所述的父文件节点对应的父文本内容，并根据所述依赖信息确定所述父文本内容中的子文本内容；

第二子模组，用于向所述父文本内容中的子文本内容赋予第三标识信息，根据所述第三标识信息确定所述子文件节点。

在一种可能实现的方式中，所述第四模组包括：

第三子模组，用于获取所述子文件节点中的主体标签；

第四子模块，用于将所述第一资源路径插入至所述主体标签中生成所述动态关联标签，并根据所述动态关联标签将所述更新文件插入至所述子文件节点。

本发明实施例的另一方面提供了一种计算机可读存储介质，存储介质存储有程序，程序被处理器执行实现前面的交互数据处理方法。

本发明实施例的另一方面还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行前述的交互数据处理方法。

本发明实施例提供了基于前端场景中的交互数据处理方法，方法首先构建父级交互组件，并设置隶属于该父级交互组件的子级交互组件，基于组件之间的归属关系构建依赖信息；方法通过确定不同层级的前端交互组件之间隶属关系和依赖信息，能够提供更为丰富的信息流内容以及交互方式，提升目标对象的使用体验。在针对前端页面进行更新维护的过程中，基于目标页面进行修改调整后的更新文件，通过前述的依赖关系确定页面中需要对应更新的目标模块；并且方法可以将更新文件中逻辑文件以及样式文件分别分配至需要进行更新的子级交互组件，以形成用于表征资源路径的映射关系；方案通过构建映射关系能够直接确定最终更新后的组件内容或者页面内容，通过映射关系实现对资源文件的直接插入，也能够有效地提高对前端页面更新维护的效率，节约更新维护的操作复杂度。最后，前端页面可以根据映射关系所表达的资源路径获取资源文件对交互组件进行更新，并且在更新的同时基于模块之间的归属关系进一步更新前端页面的内容，即能够实现对前端页面的热更新；相较于进行文件加载、页面刷新然后再进行可视化内容更新的更新方式，本申请技术方案的热更新方式，有效地提升了更新维护以及开发过程的操作便捷性，进而有效地提高了开发效率，提升了目标对象的操作体验。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请技术方案中交互数据处理方法的实施场景示意图；

图2为本申请技术方案中交互数据处理方法的步骤流程图；

图3为本申请技术方案中在父级交互组件中添加若干子级交互组件的步骤流程图；

图4为本申请技术方案中确定依赖信息的步骤流程图；

图5为本申请技术方案中确定目标资源文件的步骤流程图；

图6为本申请技术方案中确定底层模块是否被顶层模块引用的步骤流程图；

图7为本申请技术方案中对子级交互组件进行热更新的步骤流程图；

图8为本申请技术方案中更新目标交互页面的步骤流程图；

图9为本申请技术方案中将更新内容插入目标资源文件的步骤流程图；

图10为相关技术方案对前端页面进行更新的步骤流程图；

图11为本申请技术方案中交互数据处理装置的结构示意图；

图12为本申请技术方案中交互数据处理设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

可以理解，本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种概念，但除非特别说明，这些概念不受这些术语限制。这些术语仅用于将一个概念与另一个概念区分。举例来说，在不脱离本申请的范围的情况下，可以将第一组件单元称之为第二组件单元，将第二组件单元称之为第一组件单元。

另外，本申请所使用的术语“至少一个”、“多个”、“每个”、“任一”等，至少一个包括一个、两个或两个以上，多个包括两个或两个以上，每个是指对应的多个中的每一个，任一是指多个中的任意一个。

说明书将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。

人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。本申请所示的包含图像采集组件的显示设备主要涉及其中的计算机视觉技术以及机器学习/深度学习、自动驾驶、智慧交通等方向。

人机交互、人机互动(Human–Computer Interaction，HCI)是一门研究系统与操作对象之间的交互关系的学问。进行交互的系统可以是各种各样的机器，也可以是计算机化的系统和软件。人机交互界面通常是指操作人员可见的部分。操作人员通过人机交互界面与系统交流，并进行操作。小如收音机的播放按键，大至飞机上的仪表板，或发电厂的控制室。人机交互界面的设计要包含目标对象对系统的理解，是为了系统的可用性或者操作友好性。

微前端(Micro-Frontends)是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。总之，微前端不是单纯的前端框架或者工具，而是一套架构体系。

而针对前端或微前端的组件化开发已经是前端主流开发方式，因为组件化开发在代码复用提升团队效率方面有着无可比拟的优势，现在流行的React，Vue都是组件框架；在以浏览器作为前端页面的实施场景中，可以采用的浏览器原生组件，即Web ComponentsAPI，Web Components是一套不同的技术，可以使得开发人员创建可重用的定制元素，并在web应用中使用它们。

基于上述的技术原理或相关理论基础，本申请技术方案所提出的交互数据处理方法，能够应用于任意一种具备数据处理计算能力计算机设备，而这一计算机设备可以是各类终端或是服务器。当实施例中的计算机设备是服务器时，该服务器可以是独立的物理服务器，或者，是多个物理服务器构成的服务器集群或者分布式系统，或者，是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

需要进一步补充说明的是，本申请实施例中所涉及终端包括但不限于智能手机、电脑、智能语音交互设备、智能家电、车载终端、飞行器等。本申请实施例可应用于各种场景，包括但不限于云技术、人工智能、智慧交通、辅助驾驶等。

在一些可能实现方式中，本发明实施例提供了交互数据处理方法的计算机程序，可被部署在一个计算机设备上执行，或者在位于一个地点的多个计算机设备上执行；又或者，在分布在多个地点且通过通信网络互连的多个计算机设备上执行，分布在多个地点且通过通信网络互连的多个计算机设备能够组成区块链系统。

基于多个计算机设备能够组成区块链系统，本申请技术方案中所提供的交互数据处理方法，可以是由区块链中的某个节点执行并完成；并且用于执行交互数据处理方法的这一节点，可以是任意能够提供搭载了前端页面的移动终端，例如，智能手机、平板电脑以及个人计算机(PC，personal computer)等。在本申请技术方案中，对前端页面的开发、更新以及维护之间，首先需要前端页面的客户端中添加一个关系依赖表；这一关系依赖表所维护的是在客户端中某个源文件与其在前端页面中最终渲染得到的交互组件之间的映射关系。针对关系依赖表中的依赖关系，本申请技术方案中可以在对前端页面中的组件布局的过程中进行构建，将前端页面的整体页面视作一个最顶层的组件单元，确定每个最底层的基础组件单元最终会被最顶层的组件单元所使用，将组件之间使用与被使用之间的关联关系记录为关系依赖表中的依赖关系。在构建得到了关系依赖表，并明确了依赖关系之后，本申请技术方案中可以在客户端的前端页面开发的过程中，通过服务器端将依赖关系表连同前端页面的预置信息注入至移动终端的客户端中。进一步地，在对前端页面进行更新和维护的过程中，可以通过整体页面的模块入口文件对包含有目标更新内容的更新文件进行加载，完成更新文件的加载之后，对其进行静态能力以得到代码文件层面的更新内容。通过前述的依赖关系表，以整体页面的更新内容作为索引，更新所依赖的所有最底层的基础组件单元以及基础组件单元所对应源文件，进而确定了整体页面的所有依赖文件。本申请技术方案可以进一步通过依赖文件的标识信息确定依赖文件是否被顶层的页面组件使用，以及被哪个具体的顶层页面组件所使用；而后，将每个基础组件单元所对应的更新内容正确地插入至对应的源文件节点之中，并触发基础组件单元更新，即完成了基础组件单元热更新过程。将热更新后的基础组件单元进行整合可以得到热更新后的页面组件单元，至此，本申请技术方案实现了对客户端前端页面的热更新。本申请技术方案通过上述过程能够使得开发人员或者其他操作者在进行前端页面的本地开发、更新以及维护的过程中，无需反复地刷新页面对更新后的内容进行加载显示，有效地提升了开发体验和开发速度。

如图1所示，是本申请技术方案提供的一种交互数据处理方法的实施环境的示意图。参照图1，在该实施环境中，包括至少一个交互数据处理服务器110、开发终端120以及目标终端130；其中，开发终端120可以搭载具备管理者开发权限的运维平台；例如，该开发终端120包括有待开发(更新或维护)前端交互页面121，在前端交互页面121中包括多个交互组件单元122，可以通过多种不同的交互方式以及可视化方式为目标对象呈现信息内容。基于开发终端120与服务器210可以协同实现本发明实施例中的交互数据处理方法，另外，对于本领域技术人员可以理解的是，在本实施环境中的终端设备算力条件允许的情况下，交互数据处理方法还可以单独由终端设备执行，在终端设备本地进行前端页面的开发、更新以及维护。在这一实施环境中，开发终端120和目标终端130可以通过无线网络或有线网络与交互数据处理服务器110进行数据交换，从而获取预存页面中组件的呈现信息内容、样式内容以及依赖关系表等；其中，开发终端120和目标终端130可以是智能手机、摄像机、台式计算机、平板电脑、MP4播放器和膝上型便携计算机中的至少一种。目标终端130安装和运行应用程序的客户端。示例性地，目标终端130可以是搭载有交互应用程序客户端的终端，终端运行的应用程序客户端内登录有账号拥有者的账号。开发终端120和目标终端130可以泛指多个终端中的一个，本领域技术人员可以知晓，上述终端的数量可以更多或更少；比如上述远程终端可以仅为一个，或者上述远程终端为几十个或几百个，或者更多数量。在该实施环境中对开发终端120和目标终端130的数量和类型不加以限定。进一步补充说明的是，服务器110的构成方式可以是单独服务器、多台服务器或者云服务器的组合方式。在该实施环境中，交互数据处理服务器110主要用于提供数据处理能力，在开发终端120进行交互操作或者是通过开发终端120进行交互操作界面的配置过程中，提供必要的数据支持以及算力资源的支持。

在相关技术方案中，针对客户端页面或者前端交互页面的构建工具或开发工具实现的热更新功能都是基于当前交互页面只有一个组件单元的情况下所实现。而在一些更为复杂的实施场景中，客户端页面或者前端交互页面是基于微前端架构所实现的，在微前端架构的基础下，一个前端页面中可能会存在多个不同的应用组件；例如，一个页面中可以同时展示网站A和网站B的网页元素。进而，相关技术方案中通过Web components技术来将同一前端页面的不同的应用组件之间进行隔离，再通过一些特定的接口使得不同应用组件之间可以传递数据以及共享对象。在前述的复杂的实施场景中，前端页面的底层文件中可能同时存在多个组件窗口的文档实例，并且运行在应用组件内部的代码默认只能够读取组件内容的文档实例，对于外层的其他文档实例是无法获取的。例如，网站A和网站B在同一个前端页面中进行可视化展示，相对的外层是指负责管理两个网站站点的外壳，外壳不包含任何展示元素，仅仅管理站点之间一些通信逻辑，相对的内层是指具体网站站点中的内容。也正是由于存在外层与内层的隔离、不互通的特性，导致了在此类场景对前端交互界面的热更新的过程中，所获取的更新内容或者是更新文件是针对最外层的文档实例进行修改的内容，进而无法正确获取当前加载的资源路径；另一方面，即便在解析得到资源路径之后，需要正确地插入到应用组件内部的文档实例中，才能够实现对页面中的组件进行热更新。

针对相关技术方案中可能存在的前述技术缺陷或者技术问题，基于图1所提供的实施环境，本发明实施例提出了一种交互数据处理方法。在该方法中，首先描述目标交互页面121中的父级交互组件以及子级交互组件122的从属关系，以及其底层代码文件之间的依赖关系；进而，针对微前端应用的更新，即针对目标交互页面121的组件进行更新，需要通过子级交互组件122和目标交互页面121之间的依赖关系以及更新后的资源文件的绝对路径完成对子级交互组件的更新，进而实现对组件的热更新，在完成对子级交互组件122的热更新之后，将子级交互组件122进行整合即可得到更新后的目标交互页面。方法通过构建映射关系能够直接确定最终更新后的组件内容或者页面内容，通过映射关系实现对资源文件的直接插入，也能够有效地提高对前端页面更新维护的效率，节约更新维护的操作复杂度。

需要补充说明的是，在本申请的各个具体实施方式中，当涉及到需要根据目标对象的信息、目标对象的行为数据、目标对象的历史数据以及目标对象的交互过程中所产生的交互数据进行相关处理时，都应当先获得目标对象的许可或者同意，而且，对这些数据的收集、使用和处理等，都会遵守相关国家和地区的相关法律法规和标准。此外，当本申请实施例需要获取目标对象的较为敏感信息时，会通过弹窗或者跳转到确认页面等方式获得目标对象的单独许可或者单独同意，在明确获得目标对象的单独许可或者单独同意之后，再获取用于使本申请实施例能够正常运行的必要的目标对象相关数据。

如图2所示，提供了本发明实施例中交互数据处理方法，方法可以由图1中的开发终端120和后台服务器110交互执行；或者在一些具备一定数据缓存以及运算能力的终端上独立执行。参考图2，该方法可以包括步骤S01-S05：

S01、构建目标交互页面的父级交互组件，在父级交互组件中添加若干子级交互组件。

其中，目标交互页面是指在移动终端所搭载的客户端应用或者网页页面；通过应用界面或者网页页面可以向目标用户呈现目标信息内容；且客户端应用或者网页页面其具备交互属性，可以响应于目标对象交互操作的指令内容，进行目标信息内容的切换变更。需要说明的是，实施例中用于呈现目标交互页面的应用程序，其可以是基于微前端(Micro-Frontends)所开发构建的，其包括但不限于通信应用、社交应用、娱乐应用序、办公应用序或者资源交换应用等。目标应用程序可以是基于各种不同技术栈实现的完整形态的应用程序，例如，安卓或者IOS(Iphone Operation System)等各种操作系统中部署的原生应用程序、不需要下载安装即可使用的小程序或者基于HTML5(HyperText Mark-up Language 5，超文本标记语言5)框架的公众号应用程序等。实施例中的父级交互组件是指在目标交互页面中最顶层的组件单元或者交互模块(说明书后文简称为顶层模块)，在顶层模块之下包含有多个底层的基础组件单元或交互模块，即为本实施例中的子级交互组件(说明书后文简称为底层模块)。可以理解的是，实施例中的顶层模块是由若干个底层模块所构建得到的，并且实施例中顶层模块主要用于进行组件与组件之间的通信交互，其模块内封装有一些通信逻辑，通过这一通信逻辑可以实现同一顶层模块下的底层模块之间的信息传递；实施例中底层模块则主要加载有对应信息流的文件资源路径，通过这一资源路径能够所实现信息流数据的获取与输出。

示例性地，在某网页页面作为目标交互页面的实施场景中，在针对该网页的前端页面进行开发的过程中，可以根据信息流的可视化需求对应在该网页的前端页面中加入其他的信息窗口。在该网页的开发后台中，则可以将网页完整的前端页面标记为顶层模块，而在该网页的前端页面中需要添加的其他站点的窗口组件，则可以作为对应顶层模块下的若干底层模块，并在对该类型的窗口组件的添加的过程中同样可以赋予相应的标记信息，以确定该底层模块所归属的顶层模块。需要说明的是，实施例中在前端进行渲染以及可视化展示的可以是多个目标交互页面，故而，在实施例进行前端页面开发过程中可以标记多个顶层模块，每个顶层模块下均添加有若干个底层模块，并且不同的顶层模块下述的底层模块可以存在交叉和重复使用。

S02、根据父级交互组件与子级交互组件之间的归属关系，确定子级交互组件对应的第二资源文件与父级交互组件对应的第一资源文件之间的依赖信息。

其中，归属关系主要用于描述子级交互组件与父级交互组件之间的从属关系，即在前端的目标交互页面中，整体页面的顶层模块由与之存在归属关系的底层模块组合形成。实施例中的第一资源文件是指在前端的目标交互页面开发过程中在代码层面构建的与底层模块对应的资源文件；相类似地，第二资源文件则是在前端的目标在代码层面构建的与顶层模块对应的资源文件。实施例中的依赖关系是根据顶层模块与底层模块在步骤S01中所确定的从属关系，对应描述资源文件之间的引用或归属关系。

示例性地，在实施例中对前端的目标交互页面进行布局设置时，在选定该目标交互界面作为顶层模块之后，可以对该顶层模块的代码文件中加入用于表征为顶层模块的标识信息，在对目标交互界面中的信息流的窗口组件进行构建时，将窗口组件作为顶层模块的所实用的底层模块，并同样赋予这一底层模块的代码文件相应的标识信息，根据底层模块与顶层模块所分别对应的代码文件中的标志信息，可以形成顶层模块的代码文件与底层模块的代码文件之间的依赖关系。需要说明的是，实施例中可以将所有顶层代码文件和底层代码文件之间的依赖关系进行整合，得到依赖关系表；以及实施例中的资源文件不仅限于实施例中所举例的代码文件，还可以包括其他任何形式或格式的资源文件，在此不进行一一举例。

S03、响应于对父级交互组件的操作，获取父级交互组件对应的第一资源文件的修改信息，并根据修改信息以及依赖信息从若干第二资源文件中确定目标资源文件。

其中，对父级交互组件的操作可以是指在对目标交互页面完成顶层模块与底层模块的配置，并基于各个模块的初始资源文件(或者初始资源路径)对前端页面进行初始化之后，再针对页面中的元素进行修改、调整、更新以及维护等操作；在实施例中，操作的作用对象为前端页面中的各种元素，这一元素的内容包括但不限于各个模块的交互逻辑、操作逻辑、可视化样式、可视化呈现的具体信息内容等等。实施例中的修改信息，是指在修改、调整、更新以及维护等操作对应在顶层模块或者底层模块对应资源文件中修改或者添加的信息内容。实施例中的目标资源文件是指在修改信息所指向的底层模块所对应的资源文件。

示例性地，在通过步骤S01-S02中构建了目标交互页面以及页面中各个组件、资源文件之间的依赖关系之后，将记录依赖关系的依赖关系表连同前端页面的预置信息添加至客户端中；在完成初始的配置以及前端页面的初始化之后，在搭载了客户端的移动终端，对初始化的目标交互页面进行渲染以及可视化展示。随着客户端版本的逐渐迭代以及目标需求的不断变化，需要对目标交互页面进行必要的更新迭代，因此，在该前端页面的开发平台(后台)，可以根据目标对象操作指令获取目标交互页面的更新内容，例如，针对整个页面中各个窗口组件中输出的具体信息内容进行变更，又或者，对某个具体的窗口组件的样式参数进行调整以更新页面的可视化效果。前端页面的开发平台(后台)响应于前述的修改操作对应在目标交互页面的资源文件中，对于信息内容的接入路径以及该窗口组件的组件样式等对应的文件内容进行修改，以确定最终的修改内容。并且，实施例基于微应用的架构特征，在进行前端页面的修改时，根据操作指令所确定的修改内容为全局文件，也就是说，所得到得到修改内容是针对顶层模块的资源文件的修改内容，底层模块的资源文件无法直接获悉操作所对应的修改内容，因此，实施例中根据前述步骤所构建依赖关系表，根据表中所记录的依赖关系，确定修改顶层模块的资源文件其所依赖的底层模块的资源文件，并基于这一依赖关系，将具体的修改内容，例如，更新的信息流的地址连接，将其更新至对应的底层模块的资源文件中。

S04、根据修改信息的第一资源路径确定更新文件，根据更新文件对目标资源文件进行热更新，根据热更新后的目标资源文件对子级交互组件进行热更新。

其中，热更新是一种应用软件或者前端页面的更新方式；当对资源文件进行修改了之后，实施例将对修改内容进行编译，编译后所得到文件即为实施例中的更新文件。实施例中在编译得到更新文件之后，根据这一更新文件，将托管在服务器中的客户端应用或者网页页面进行全局刷新或者是局部模块的重载，进而实现自动刷新的效果，即为实施例中的热更新。实施例中的资源路径可以包括但不限于：绝对路径(Absolute Path)，带域名的文件的完整路径；相对路径(Relative Path)，同一个目录的文件引用。在实施例中，针对HTML文件的前端页面，需要引用一个文件，则需要使用正确的文件路径；通过正确的路径，托管在服务器中的前端页面程序可以获得对应的更新资源，此处的更新资源包括图像文件，影视文件，文本文件等。

示例性地，在实施例中，为了能够实现前端页面的热更新，因此，所采用的资源路径为绝对路径。在实施例通过前述的步骤确定了更新或者其他修改操作所针对的底层模块以及该底层模块所对应的资源文件之后，根据修改操作后的资源内容所对应的绝对资源路径对初始的资源文件中对应的文件内容部分进行修改替换，并且，进一步将修改替换后的资源文件进行重新编译，从而得底层模块对应的新的资源文件，将这一资源文件进行必要的数据打包过程，传输至该前端页面所托管的服务器，服务器完整对这一前端页面中对应底层模块的组件单元进行实施更新，进而实现热更新的效果。需要说明的是，实施例中列举了对资源内容进行修改替换的过程，但并不对实施例中可以实现的更新方式进行限制，即实施例中的更新方式还可以包括但不限于对资源内容的删减移出，以及对组件单元的可视化样式进行修改。

S05、根据热更新后的子级交互组件确定热更新后的父级交互组件，根据热更新后的父级交互组件更新目标交互页面。

具体在实施例中，在通过前述步骤对目标交互页面中的一个或者多个底层模块的资源文件进行修改之后，通过托管的服务器对目标交互页面对前端页面进行实时的重载以得到更新后的交互组件内容。根据步骤S01中所确立的在前端页面中顶层模块与底层模块之间的归属关系，可以确定某个具体的底层模块是否被底层模块所使用，在存在使用或者归属关系的前提下，对底层模块进行热更新，也进而实现了对顶层模块的更新。示例性地，在实施例中，需要针对某应用软件的前端页面中图片轮播组件中的图片内容更新，实施例首先将新图片的资源内容添加至轮播组件所对应的资源文件中，通过编译以及打包发送的过程将包含有新图片资源内容的文件传输至服务器。服务器进行必要的数据解压以及反编译得到新图片资源内容，并且服务器根据更新文件中用于表征是针对轮播组件进行更新的标识，根据预先注入的依赖关系表，以该标识作为索引确定新图片资源内容所对应的轮播组件；并实时地将资源内容更新至该轮播组件，实现轮播组件的热更新，也从而实现对目标交互页面的热更新，从而能够满足新的场景需求。

实施例中，需要能够实现对前端的目标交互页面进行更新、修改以及维护操作，则需要在开发阶段完成初次对目标交互页面进行组件单元的配置与初始化，并将完成配置的前端页面或者对应的应用程序在服务器中进行托管，以实现在客户端实现初始的前端页面内容可视化展示和信息流输出。因此，如图3所示，在一些可行的实施方式中，方法中构建目标交互页面的父级交互组件，在父级交互组件中添加若干子级交互组件这一步骤S01可以包括步骤S011-S013：

S011、获取候选交互组件的第三资源文件；

其中，候选交互组件可以是指在对前端的目标交互页面进行初始的页面布置中，添加在该页面中的各类性的组件；需要说明的是，实施例中的候选交互组件的构建方式与实施例前述的子级交互组件的构建方式相同，其同样需要进行归属关系以及对应的资源文件的依赖关系的构建；并且，前述实施例中完成热更新的交互组件应当是所候选交互组件中的部分或全部。实施例中的第三资源文件是候选交互组件，即候选底层模块用于描述在前端的目标在代码层面以目标可视化样式对目标信息内容进行输出方式的文件，实施例中的资源文件包括但不限于CSS、JS等静态资源文件。

示例性地，实施例中在对目标交互页面进行初次设置时，需要为该前端页面中的所有内容进行设置或配置；针对前端页面中的需要进行信息流输出的窗口组件进行配置中，首先需要根据窗口组件设置的当前页面确定窗口组件与顶层页面之间的归属关系，以及窗口组件对应的资源文件与顶层页面的资源文件之间的依赖关系。在实施例中，在完成页面的样式布局之后，需要将需要进行输出展示的目标信息内容进行载入，例如根据目标信息内容的资源路径进行代码描述得到CSS、JS等静态资源文件。

S012、根据第三资源文件确定渲染候选交互组件的第二资源路径；

其中，与第一资源路径相类似地，第二资源路径是用于描述候选组件的资源来源，第二资源路径同样可以包括绝对路径和目标路径。

以实施例中选取绝对路径作为资源路径描述资源文件的来源为例，实施例中目标web页面中的所有初始的组件单元的资源文件放在WEB-INF目录下。在web.xml文件中加在spring的配置文件时，将资源文件的路径前面加上“classpath:”，“classpath:”后面的文件的路径是相对于WEB-INF目录的。需要说明的是，实施例中获得资源文件的路径的过程可以是把资源文件的项目路径转化为磁盘的绝对路径，这样得到文件的路径是唯一并且正确的。

S013、根据第三资源文件以及第二资源路径确定配置信息，根据配置信息将子级交互组件添加至父级交互组件；

具体在实施例中，在明确了目标交互页面中所有交互组件的确定了资源文件的资源路径之后，将资源路径、组件间的归属关系以及资源文件之间依赖关系，连同其他的前端页面属性信息整合得到页面的配置信息。实施例中可以根据目标页面的交互需求确定配置信息中各个信息元素的具体内容；交互需求包括但不限于组件的组件样式、组件输出的目标信息内容以及组件之间的关联逻辑。

示例性地，实施例中可以在将应用程序托管至服务器或者在服务器端生成网页代码的时候，将一些后续在客户端需要用到的信息添加到网页代码中，让客户端可以直接使用。以网页中的manifest构建清单为例，manifest构建清单目的是将Web应用程序安装到移动终端的主屏幕，为目标对象提供更快的访问和更丰富的体验；实施例中通过这一manifest构建清单可以使得服务器在运行网页代码时，获悉每一个资源文件属于哪一个最终生成的组件单元；例如，资源文件中的index.js会生成到index.chunk.css当中。实施例中，诸如manifest构建清单的配置信息可以由服务器输出至目标对象的移动终端，从而完成前端页面的渲染。

在实施例可以将资源文件到最终页面中文件产物之间的映射作为要素，生成依赖关系表或者生成依赖信息。实施例中最终页面中文件产物包括但不仅限于前述的顶层模块和底层模块，即父级交互组件与子级交互组件；进而，如图4所示，交互数据处理方法中，根据父级交互组件与子级交互组件之间的归属关系，确定子级交互组件对应的第二资源文件与父级交互组件对应的第一资源文件之间的依赖信息这一步骤S02，可以包括步骤S021-S023：

S021、获取第一资源文件与父级交互组件的第一映射关系。

其中，第一映射关系用于描述诸如CSS、JS等静态资源文件与最终前端页面进行渲染的顶层模块，例如完整的前端页面之间的对应关系。示例性地，实施例中在前述的初始页面的构建过程中，提出了可以根据资源文件确定最终前端页面渲染得到的组件的资源路径的步骤，基于这一步骤，实施例中可以根据顶层模块需要进行信息交换的需求构建用于描述通信逻辑的资源文件，将这一资源文件写入至服务器中前端页面的应用程序文件之中，并由服务器将包括有该通信逻辑的文件内容传输至客户端，根据该资源文件与前端页面最终的渲染结果之间的资源路径以及传输路径等整合形成资源文件与顶层模块之间的映射关系。

S022、获取第二资源文件与子级交互组件的第二映射关系。

相类似地，第二映射关系用于描述诸如CSS、JS等静态资源文件与最终前端页面进行渲染的底层模块之间的对应关系。示例性地，在初始页面的构建过程中，可以根据顶层模块需要进行信息交换的需求构建底层模块最终渲染后可视化样式的资源文件，或者是底层文件在最终前端页面中需要进行信息内容呈现的文档内容或资源路径等，将资源文件、信息内容以及资源路径等写入至服务器中前端页面的应用程序文件之中，并由服务器将相关文件的内容传输至客户端，根据该资源文件与前端页面最终的渲染结果之间的资源路径以及传输路径等整合形成资源文件与底层模块之间的映射关系。

S023、将第一映射关系、第二映射关系以及归属关系进行整合得到依赖信息。

具体在实施例中，将步骤S021和步骤S022所确定的映射关系，并结合底层模块与顶层模块之间的归属关系进行整合得到包含了组件与组件，资源文件与资源文件之间多维度的依赖关系，并将若干依赖关系进行整合记录得到依赖信息(表)。根据所构建的依赖信息表以及表中所记录的依赖关系，在获取更新内容之后，根据组件之间(顶层模块和底层模块)的归属关系迅速确定更新内容对应修改的底层模块，完成对应资源文件的更新，更新完成之后再根据资源文件与模块之间的映射关系，将具体的更新内容载入至对应的底层模块或者顶层模块之中，从而实现更为快捷、直接的更新方式，减少重复的载入更新操作。

示例性地，实施例中在完成向服务器端上传包含了所有依赖关系的依赖信息表之后，当在开发者后台修改应用程序的index.css文件后，可以根据该依赖信息表，查询到index.css对应的最终构建的JS文件是http://localhost:3000/static/index.chunk.js文件，而根据构建规则该页面对应的最终构建生成的CSS路径为http://localhost:3000/static/index.chunk.css。与JS文件路径一致，只有后缀名不一样。因此，当index.css文件修改时，服务器需要下发指令，使客户端浏览器再重新去加载一遍http://localhost:3000/static/index.chunk.css来获取最新的样式代码。

在一些可行的实施方式中，实施例中资源可以包括但不限于逻辑文件以及样式文件，进而实施例中，将第一映射关系、第二映射关系以及归属关系进行整合得到依赖信息这一步骤S023，可以包括步骤S0231-S0232：

S0231、从第二资源文件中解析得到第二逻辑文件以及第二样式文件。

其中，第二逻辑文件是用于描述底层模块的交互逻辑的资源文件，实施例中的交互逻辑包括但不限于底层模块的数据链路或模块需要进行目标信息内容(字符串)的可视化输出等等；实施例中的第二样式文件是用于描述底层模块在最终的前端页面中进行渲染后的可视化效果，该可视化效果可以包括但不限于模块能够响应的交互操作方式、模块的结构属性以及模块的形状外观等等。

示例性地，实施例中基于前述的web components这种技术场景，通过webcomponents可以实现逻辑文件与样式文件之间的隔离，即代码运行环境是相互隔离互不影响的，实施例中主要是JS逻辑代码的隔离和CSS页面样式的隔离。在该实施例中，前端页面的样式代码与逻辑代码的构建路径和构建名称完全一致，只有后缀名不一样，即index.chunk.js可以代表逻辑文件，index.chunk.css可以代表样式文件。实施例中可以根据文件的后缀名从初始页面的应用程序中提取得到逻辑文件和样式文件。

S0232、确定第二逻辑文件的第三资源路径和第二样式文件的第四资源路径，并将第三资源路径以及第四资源路径加入至第二映射关系。

与前述的资源路径相同的是，第三资源路径与第四资源路径分别用于描述初始构建的前端页面中底层模块的逻辑文件和样式文件的资源路径。

示例性地，当实施例中在初次加载前端页面过程中，通过各个底层模块的JS文件，即逻辑文件进行加载，在逻辑文件进行加载时，触发其依赖的CSS文件的热更新注册逻辑。例如，某个底层模块的JS文件中加载了CSS文件，实施例将对应建立一个关联关系(或者是新的文件依赖关系)，用于描述JS与CSS文件之间的关系。进一步地，实施例将这一关联关系同步至依赖信息表的构建过程中，并记录在依赖信息表中。

在一些可行的实施方式中，实施例交互数据处理方法在应用程序的开发模式下或者在应用程序的后台中，对前端页面进行更新、修改的过程中，可以根据前述步骤构建的依赖信息表完成对应内容的更新或修改；如图5所示，在实施例方法中，响应于对父级交互组件的操作，获取父级交互组件对应的第一资源文件的修改信息，并根据修改信息以及依赖信息从若干第二资源文件中确定目标资源文件这一步骤S03，可以包括步骤S031-S033：

S031、对修改信息进行静态分析确定进行修改操作后第一资源文件的文件属性信息。

其中，文件属性信息是指通过文件程序静态分析(Program Static Analysis)所获取得到的信息内容，该信息内容包括但不限于资源文件中的所有代码格式文档内容以及必要的属性描述信息，例如各种文档中标志符号以及字符内容等。实施例中静态分析，即程序静态分析是指在不运行代码的方式下，通过词法分析、语法分析、控制流、数据流分析等技术对程序代码进行扫描，验证代码是否满足规范性、安全性、可靠性、可维护性等指标的一种代码分析技术。

示例性地，实施例中可以通过词法分析，从左至右逐个的读入资源文件对应的源程序，对构成源程序的字符流进行扫描，通过使用正则表达式匹配方法将源代码转换为等价的符号(Token)流，生成相关符号列表。

S032、根据文件属性信息中的第一标识信息以及依赖信息在第二资源文件中进行遍历，根据遍历结果确定第二标识信息。

其中，第一标识信息用于描述底层模块对应的资源文件中用于对文档内容(数据内容)进行标识的符号信息；相类似地，第二标识信息用于描述顶层模块对应的资源文件中用于对文档内容(数据内容)进行标识的符号信息。

示例性地，实施例中通过步骤S031中的程序静态分析的过程，从更新后的顶层模块的资源文件进行符号流的转换，并且从转换后得到的相关符号列表确定用于描述文件标识信息的符号内容进行提取，例如提取得到文件ID，根据文件ID这一信息作为索引，在前述步骤中所构建的依赖信息表中，根据ID进行遍历，确定对应文件ID所有关联的子文件ID。实施例里中的子文件ID即为该顶层模块所依赖的依赖文件ID，该依赖文件即对应了所依赖的底层模块。

S033、根据第二标识信息确定与进行修改操作后的第一资源文件存在依赖关系的目标资源文件。

示例性地，在HTML的前端页面进行更新的实施场景中，实施例在前端页面的index.vue文件中加载了index.css文件；index.vue文件代表了前端页面中首页的模块入口文件，其可以是HTML类型或者JS(JavaScript)类型；实施例中可以通过构建工具提供的静态分析能力index.vue的所有依赖文件ID。更进一步地，如图6所示，在实施例场景中，可以对顶层模块的文件ID再分配一个信息标识，该信息标识可以用于表述这一文件在某个具体的顶层面中被使用。进而实施例中在确定依赖文件的过程，可以首先确定进行更新修改的页面顶层模块，并获取这一页面模块的importlds，并且为页面模块中的每一个importlds设置归属页面信息，然后对所有底层模块进行深度遍历，进而确定每个底层模块作为依赖文件被顶层模块中某些具体的页面所使用。

在实施例方法确定了顶层模块所依赖的底层模块之后，需要根据修改内容对应修改底层模块的资源文件，并且实现顶层模块的热更新；如图7所示，故方法中根据修改信息的第一资源路径确定更新文件，根据更新文件对目标资源文件进行热更新，根据热更新后的目标资源文件对子级交互组件进行热更新这一步骤S04，可以包括步骤S041-S043：

S041、将更新文件中的第一逻辑文件更新至目标资源文件的脚本文件。

其中，第一逻辑文件主要包括该更新文件中针对前端页面中组件中的或者组件之间的逻辑进行修改的内容。实施例中的脚本文件(Script)是应用程序提供的编程语言内容，脚本文件用于批处理文件数据，它可以将不同的命令组合起来，并按确定的顺序自动连续地执行。以Java的前端开发环境为例，脚本语言可以是指文件中所包含的JavaScript代码，以“.js”为扩展名的文本文档，用于在网页中执行JavaScript指令。

具体在实施例中，在对前端页面的更新过程中，针对页面中对应的程序逻辑进行修改和调整，将调整修改后的内容添加至更新文件，根据这一更新文件根据前述步骤所确定的需要进行对应修改调整的底层模块，并将更新文件中的程序逻辑对底层模块脚本文件中初始的程序逻辑进行更新覆盖，从而实现对资源文件中的脚本文件的更新。

S042、将更新文件中的第一样式文件更新至目标资源文件的工程文件。

相类似地，第一样式文件主要包括该更新文件中针对前端页面进行渲染后组件结构特征和外观形状进行修改的内容。实施例中的工程文件主要用于将多种装饰作用进行封装，进一步便于页面的HTML文件使用，能够有效地减少代码的重复量。

具体在实施例中，在对前端页面的更新过程中，针对页面中某个组件或者某些组件的样式、外观以及最终渲染效果进行修改和调整的内容，将前述的修改内容添加至更新文件，根据这一更新文件根据前述步骤所确定的需要进行对应修改调整的底层模块，并将更新文件中的程序逻辑对底层模块样式文件中用于描述组件的样式、外观以及最终渲染效果的内容进行更新覆盖，从而实现对资源文件中的样式文件的更新。

S043、根据更新后的脚本文件以及更新后的工程文件对子级交互组件进行热更新。

示例性地，实施例通过步骤S041和步骤S042将前端页面中首页所用到的逻辑文件，分配到最终的index.chunk.js文件中，而首页用到的样式文件，最终分配到index.chunk.css文件中。最终实施例可以得到每一个源文件与最终的文件的一个映射信息表。该映射信息表中的记录内容如下：

{

index.vue:https://localhost:3000/static/index.chunk.js

index.css:https://localhost:3000/static/index.chunk.css

}

当实施例中明确了上述的依赖关系后，通过该依赖表，实施例在更新过程中，可以立即获悉当前正在修改的源文件，最终将会影响到哪些最终被生成的产物文件，也就是这次修改所需要更新，在浏览器重新被加载的文件。

在一些可选的实施方式中，针对前端页面的更新或者维护的内容，可以仅仅只是对脚本文件或者工程文件中的某一项进行更新；故方法中根据修改信息的第一资源路径确定更新文件，根据更新文件对目标资源文件进行热更新，根据热更新后的目标资源文件对子级交互组件进行热更新这一步骤S04，可以包括步骤S044-S046：

S044、确定脚本文件与工程文件之间的关联关系。

具体在实施例中，可以通过前述实施例中通过各个底层模块的JS文件，即逻辑文件进行加载，在逻辑文件进行加载时，触发其依赖的CSS文件的热更新注册逻辑。例如，某个底层模块的JS文件中加载了CSS文件，实施例将对应建立一个关联关系(或者是新的文件依赖关系)，并基于这一关联关系，在针对脚本文件或者工程文件其中之一进行更新之后，使得剩下部分的文件能够保持与原有状态或原有内容一致。

S045、通过第一逻辑文件对脚本文件进行更新，根据关联关系获取未更新的工程文件，并根据更新后的脚本文件以及未更新的工程文件对子级交互组件进行热更新。

示例性地，实施例中通过顶层模块的index.vue文件加载了前端页面更新后的index.css文件，该文件中的相较于初始的index.css文件仅对文件中程序逻辑进行了更新，并未针对前端页面中的组件样式进行修改调整，实施例将更新后的index.css文件的逻辑文件分配至最终的index.chunk.js文件中，并且同步获知当前正在修改的脚本的源文件，并根据该脚本文件所对应的未进行更新的工程文件共同进行加载得到热更新后的底层模块。

S046、通过第一样式文件对工程文件进行更新，根据关联关系获取未更新的脚本文件，并根据更新后的工程文件以及未更新的脚本文件对子级交互组件进行热更新。

示例性地，实施例中通过顶层模块的index.vue文件加载了前端页面更新后的index.css文件，该文件中的相较于初始的index.css文件仅对文件中组件样式进行了更新，并未针对前端页面中的程序逻辑进行修改调整，实施例将更新后的index.css文件的样式文件分配至index.chunk.css文件中，并且同步获知当前正在修改的页面工程文件，例如CSS工程的源文件，并根据该脚本文件所对应的未进行更新的工程文件共同进行加载得到热更新后的底层模块。

实施例的前端页面更新的过程中，在确定要加载哪些文件后，那么接下来就是如何插入到正确的文件内容中；如图8所示，故方法中根据热更新后的子级交互组件确定热更新后的父级交互组件，根据热更新后的父级交互组件更新目标交互页面这一步骤S05，可以包括步骤S051-S052：

S051、根据归属信息以及热更新后的子级交互组件对父级交互组件进行热更新。

具体在实施例中，通过前述步骤确定需要热更新之后，根据顶层模块与底层模块之间的依赖关系确定在目标顶层模块中所使用的所有底层模块中是否存在热更新。确定顶层模块下的底层模块存在热更新，则根据更热新后的底层模块对顶层模块对应的资源文件进行适应性调整。例如，在更新过程中，某一底层模块的数据输入原址进行了修改，则需要对应修改顶层模块中包含有与该底层模块进行数据交换的所有通信逻辑。

S052、对父级交互组件以及父级交互组件下属的子级交互组件进行渲染，对目标交互页面进行更新。

具体在实施例中，在通过步骤S052中将顶层模块对应的资源文件进行了更新修改之后，通过实时渲染实现对顶层模块所描述的前端页面的整体内容进行更新。

在一些可行的实施方式中，用于描述顶层模块的资源文件与用于描述底层模块的资源文件，两者的文档内容实例是以父文档与子文档的方式进行构建的，即顶层模块的资源文件作为父文档，而父文档内容是由若干的子文档进行组合得到的。故方法中根据归属信息以及热更新后的子级交互组件对父级交互组件进行热更新这一步骤S051，可以包括步骤S0511-S0513：

S0511、获取父级交互组件对应的第一资源文件中的父文件节点，根据依赖信息在父文件节点中确定子级交互组件对应的子文件节点。

其中，文档节点(document)是用于表示浏览器等前端页面的window对象。具体在实施例中，实施例中父文件节点，即父文档节所表征的是前端页面的整个页面，又可以称之为根节点；对应在根节点之下的子节点，即为实施例前端页面中具体组件的子文件节点，即子文档节点。实施例中根节点与子节点的层级关系是基于前述的依赖关系所构建的，若可以确定顶层模块与某个或某些个底层模块存在依赖关系，那么在该顶层模块的文档包括底层模块对应的子文档内容，也就是说，该顶层模块的父文档节点下，包括了若干个子文档节点。

S0512、根据更新文件创建动态关联标签，根据动态关联标签将更新文件插入至子文件节点。

其中，动态关联标签包括但不限于HTML文件中的link标签，在实施例中，该link标签可以标签定义文档与外部资源的关系。

具体在实施例中，通过前述的步骤确定了需要进行更新的资源文件之后，通过动态创建link标签。示例性地，实施例中link标签可以描述为：

<link rel＝'stylesheet'href＝'main.css'>

在该link标签使用了href属性设置外部资源的路径，并设置rel属性的值为“stylesheet”(样式表)。rel表示“关系(relationship)”，是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。实施例中link标签的规定了当前文档与外部更新资源的关系。

S0513、根据子文件节点中的动态关联标签触发子级交互组件的热更新，并根据归属信息以及热更新后的子级交互组件对父级交互组件进行热更新。

具体在实施例中，通过动态创建link标签，再通过ShadowRoot API获取到子文档的实例后插入到子文档中。其中，ShadowRoot API是DOM子树的根节点，该子树与文档的主DOM树分开呈现。实施例中可以使用link标签中的Element.shadowRoot属性来检索对元素阴影根的引用，前提是该元素是使用Element.attachShadow()创建且mode选项设置为open。最后，根据所插入的link标签，首先触发对底层模块的热更新，在基于底层模块的热更新的基础上，实现对顶层模块的热更新。

在一些可行的实施方式中，方法中获取父级交互组件对应的第一资源文件中的父文件节点，根据依赖信息在父文件节点中确定子级交互组件对应的子文件节点这一步骤S0511，可以包括步骤S05111-S05112：

S05111、获取父级交互组件中的父文件节点对应的父文本内容，并根据依赖信息确定父文本内容中的子文本内容。

具体在实施例中，在进行更新内容的插入过程中，需要确定如何插入到正确的子文档节点中。实施例可以通过Web Components提供的ShadowRoot API拿到虚拟的文档节点，也就是候选的子文档节点，这一子文档节点中所记录的内容即为实施例中的子文档(文本)内容。通过ShadowRoot API获取文档实例的原理及过程如步骤S0513中，在此不进行赘述。

S05112、向父文本内容中的子文本内容赋予第三标识信息，根据第三标识信息确定子文件节点。

其中，第三标识信息是对所获取的文档实例进行标志的符号信息。具体在实施例中，如图9所示，实施例可以将每一个子文档的ID写在子文档自身的HTML文件内容当中，因此实施例中可以直接在前端页面的HTML文件中获取子文档的ID。基于子文档的ID，实施例可以轻易的判断出当前更新文件或者更新文件内容是处于哪一个子文档当中；实施例中可以直接通过window.microApp.id来获取当前子文档的ID。获取子文档的ID之后，进而能够确定当前更新文件或者更新文件内容应当如何插入至对应的资源文件之中。

在一些可行的实施方式中，方法中根据更新文件创建动态关联标签，根据动态关联标签将更新文件插入至子文件节点这一步骤S0512，可以包括步骤S05121-S05122：

S05121、获取子文件节点中的主体标签。

实施例中，前端页面可以是采用超文本标记语言HTML进行构建的，由于HTML一种标记语言，包括了一系列标签；通过这些标签可以将网络上的文档格式统一，使分散的Internet网页资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以用于说明文字，图形、动画、声音、表格、链接等。在其标签中包括了link、head、body等多种标签类型。在相关技术方案中都是在HTML文本的head标签中插入新的样式表；但由于本申请技术方案是在微前端场景下构建得到前端页面的HTML文本；因此，前端页面的HTML文本只存在一个全局的head标签，也就是最顶层的整体页面内容的head标签。因此，在实施例中将更新后的样式内容插入至顶层模块的中是不会生效的，因为不同应用的文档实例是存在样式隔离的。因此实施例中需要获取得到子文件节点中的主体标签，根据HTML文本的内容，根据标签名称<body>可以直接确定主体标签的位置。

S05122、将第一资源路径插入至主体标签中生成动态关联标签，并根据动态关联标签将更新文件插入至子文件节点。

具体在实施例中，将前述步骤中从更新文件或者更新文件中的样式文件插入到子文档的body标签当中而不是head标签。示例性地，实施例中完成样式文件插入后的代码内容描述如下：

const link＝document.createElement('link')

const href＝`${css}？${Date.now()}`

link.setAttribute('rel','stylesheet')

document.querySelector('#microl body').appendChild(link)

综上所述，本申请技术方案通过上述实施例所提供的具体的实现方法，提供了前端页面的客户端热更新逻辑，实现了与微前端框架不绑定的新的热更新方式。方案也可以应用在所有使用到了Web Components的场景通用，具有优秀的适用性。

下面结合具体的应用场景以及与本申请技术方案较为接近相关技术方案内容，通过对比的方式对本申请技术方案的实施过程进行更为清楚完整的描述：

如图10所示，在相关技术方案中，初始化页面时，是通过document获取到当前的文档实例，document.currentScript.src获取当前加载的资源路径。例如，当页面在加载index.chunk.js文件时，该文件代表首页的逻辑文件。加载该文件时，该文件触发其中依赖的CSS文件的热更新注册逻辑。例如index.chunk.js里面加载了in-dex.css文件，则此时建立一个依赖文件，维护JS与CSS文件之间的关系。通过document.currentScript.src获取当前浏览器加载的绝对路径的JS文件地址：

{

index.css:http://localhost:3000/static/index.chunk.js

}

建立完依赖关系之后，当实施过程中修改index.css文件后，可以根据该依赖关系表查询到index.css对应的最终构建的JS文件是http://localhost:3000/static/index.chunk.js文件，而根据构建规则，相关技术方案可以确定该页面对应的最终构建生成的CSS路径为http://localhost:3000/static/index.chunk.css。与JS文件路径一致，只有后缀名不一样。根据前述实施过程，相关技术方案中当index.css文件修改时，需要告诉浏览器再重新去加载一遍http://localhost:3000/static/index.chunk.css来获取最新的样式代码。

而在本申请技术方案中，针对微前端场景，实施例中存在多个文档实例，因此，本申请技术方案可以在无法修改微前端框架自身逻辑的前提下，实现与微前端框架不绑定的新的热更新逻辑。

以某个电商购物的应用程序的前端页面为例，实施例首先需要为客户端的代码提供一些基本的预置信息，其中，预置信息可以在服务端生成网页代码的过程中，将一些后续在客户端需要用到的信息添加到网页代码中，让客户端可以直接使用。

然后，实施例向该电商购物的客户端注入一个依赖关系表，该依赖关系表所维护的，是一个源文件到最终构建生成文件的映射。例如，源文件的index.css将会被最终加载到index.chunk.css文件当中。实施例的客户端会生成一个这样的表结构：

{

index.css:https://localhost:3000/static/index.chunk.css

}

根据前述的依赖关系表，在客户端通过服务端挂载到window对象中的信息获取热更新的必要信息。

针对这一依赖关系表的构建过程，实施例中可以通过构建工具提供的能力来确定每一个文件依赖哪些文件。以页面为一个基本单位，找到每一个底层的模块最终会被顶层的哪些页面所使用；其中顶层模块指的是代码中的页面级别的模块，所有的构建都是以页面为基本单位；底层模块是非页面级模块，也就是在页面模块里面引入的其他模块。实施例中在index.vue文件中加载了index.css文件，其中，index.vue文件代表首页的模块入口文件。进而，实施例在构建时可以通过构建工具提供的静态分析能力获取index.vue的所有依赖文件ID。并且可以为每一个文件ID分配一个信息，这个信息代表这个文件在哪个页面被使用了。

进一步地，实施例将会把首页所用到的逻辑文件，分配到最终的index.chunk.js文件中，而首页用到的样式文件，最终分配到index.chunk.css文件中。最终可以得到每一个源文件与最终的文件的一个映射关系表：

{

index.vue:https://localhost:3000/static/index.chunk.js

index.css:https://localhost:3000/static/index.chunk.css

}

当建立起依赖关系表后，通过该依赖关系表，实施例可以实时获悉当前正在修改的源文件，最终将会影响到哪些最终被生成的产物文件，也就是当前修改所需要更新，在浏览器重新被加载的文件。

实施例中在确定完要加载哪些文件后，下一步需要确定如何插入到正确的文档节点中，可以通过Web Components提供的shadowRoot API获取虚拟的文档节点，也就是子文档节点。更进一步地，实施例可以直接通过window.microApp.id来获取当前子文档的ID。

在实施例确定了要更新哪些资源文件后，可以通过动态创建link标签，再通过shadowRoot API获取到子文档的实例后插入到子文档中触发子文档的更新。实施例中可以通过动态创建link标签，使得新样式可以生效。

需要说明的是，相关技术方案中都是在head标签中插入新的样式表，但在微前端场景下，本申请技术方案中只存在一个全局的head标签，也就是最外层的父应用的head标签。如果将样式插入到父应用中是不会生效的，因为不同应用的文档实例直接是样式隔离的。所以这里要做特殊处理，本申请技术方案中需要插入到子文档的body标签当中而不是head标签。

综上所述，本申请技术方案相较于进行文件加载、页面刷新然后再进行可视化内容更新的更新方式，本申请技术方案的热更新方式，有效地提升了更新维护以及开发过程的操作便捷性，进而有效地提高了开发效率，提升了目标对象的操作体验。

可以理解的是，上述具体应用场景中的实施方式，仅仅只是对本发明实施例的一种可能实现的方式进行举例说明，其并不对本发明实施例的应用场景进行限制；对于本领域技术人员而言，基于实施例的详细完整的实施过程描述，可以将本发明实施例应用于例如电商消费、金融服务以及社交媒体等多种应用场景中。

如图11所示，本发明实施例在另一方面还提供了一种交互数据处理装置，该装置包括：

第一单元1101，用于构建目标交互页面的父级交互组件，在父级交互组件中添加若干子级交互组件；

第二单元1102，用于根据父级交互组件与子级交互组件之间的归属关系，确定子级交互组件对应的第二资源文件与父级交互组件对应的第一资源文件之间的依赖信息；

第三单元1103，用于响应于对父级交互组件的操作，获取父级交互组件对应的第一资源文件的修改信息，并根据修改信息以及依赖信息从若干第二资源文件中确定目标资源文件；

第四单元1104，用于根据修改信息的第一资源路径确定更新文件，根据更新文件对目标资源文件进行热更新，根据热更新后的目标资源文件对子级交互组件进行热更新；

第五单元1105，用于根据热更新后的子级交互组件确定热更新后的父级交互组件，根据热更新后的父级交互组件更新目标交互页面。

需要说明的是：上述实施例提供的装置在运行应用程序时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的装置与方法实施例属于同一构思，其具体实现过程参见前述的交互数据处理方法实施例，这里不再赘述。

如图12所示，本发明实施例还提供了一种可以实现前述的交互数据处理方法的电子设备，该设备包括但不限于智能手机、平板电脑、MP4(Moving Picture Experts GroupAudio Layer IV，动态影像专家压缩标准音频层面)播放器、笔记本电脑或台式电脑。电子设备还可能被称为移动设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，电子设备包括有：处理器1201和存储器1202。处理器1201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1201可以采用DSP(Digital SignalProcessing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1201也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。

在一些实施例中，处理器1201可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1201还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1202中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1201所执行以实现本申请中方法实施例提供的文本处理方法和文本处理模型的训练方法之中的至少之一。

在一些实施例中，电子设备还可选包括有：外围设备接口1203和至少一个外围设备。处理器1201、存储器1202和外围设备接口1203之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1203相连。具体地，外围设备包括：射频电路1204、显示屏1205、摄像头组件1206、音频电路1207、定位组件1208和电源1209中的至少一种。

本发明实施例还公开了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行图2所示的方法。

综合前述的所有实施例，本发明实施例所提供的交互数据处理方法，通过多叉树的方式存储组件单元，以使得能够在查找以及后期维护过程中，基于节点关系进行快速查找，并且基于组件单元状态信息，能够在调用过程中通过状态信息的查询进行高度复用，进而降低组件开发成本，降低错误操作的风险；并且基于多叉树的搜索查询方式，能够有效提高交互操作的响应速度，提高交互体验；以及实施例中模块化的拼接方式，更便于后期的维护以及更新迭代处理。

在一些可选择的实施例中，在方框图中提到的功能/操作可以不按照操作示图提到的顺序发生。例如，取决于所涉及的功能/操作，连续示出的两个方框实际上可以被大体上同时地执行或所述方框有时能以相反顺序被执行。此外，在本发明的流程图中所呈现和描述的实施例以示例的方式被提供，目的在于提供对技术更全面的理解。所公开的方法不限于本文所呈现的操作和逻辑流程。可选择的实施例是可预期的，其中各种操作的顺序被改变以及其中被描述为较大操作的一部分的子操作被独立地执行。

此外，虽然在功能性模块的背景下描述了本发明，但应当理解的是，除非另有相反说明，所述的功能和/或特征中的一个或多个可以被集成在单个物理装置和/或软件模块中，或者一个或多个功能和/或特征可以在单独的物理装置或软件模块中被实现。还可以理解的是，有关每个模块的实际实现的详细讨论对于理解本发明是不必要的。更确切地说，考虑到在本文中公开的装置中各种功能模块的属性、功能和内部关系的情况下，在工程师的常规技术内将会了解该模块的实际实现。因此，本领域技术人员运用普通技术就能够在无需过度试验的情况下实现在权利要求书中所阐明的本发明。还可以理解的是，所公开的特定概念仅仅是说明性的，并不意在限制本发明的范围，本发明的范围由所附权利要求书及其等同方案的全部范围来决定。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)、便携式计算机盘盒(磁装置)、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编辑只读存储器(EPROM或闪速存储器)、光纤装置以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (15)

1.一种交互数据处理方法，其特征在于，包括：

构建目标交互页面的父级交互组件，在所述父级交互组件中添加若干子级交互组件；

根据所述父级交互组件与所述子级交互组件之间的归属关系，确定所述子级交互组件对应的第二资源文件与所述父级交互组件对应的第一资源文件之间的依赖信息；

响应于对所述父级交互组件的操作，获取所述父级交互组件对应的第一资源文件的修改信息，并根据所述修改信息以及所述依赖信息从若干所述第二资源文件中确定目标资源文件；

根据所述修改信息的第一资源路径确定更新文件，根据所述更新文件对所述目标资源文件进行热更新，根据热更新后的所述目标资源文件对所述子级交互组件进行热更新；

根据热更新后的所述子级交互组件确定热更新后的所述父级交互组件，根据热更新后的所述父级交互组件更新所述目标交互页面。

2.根据权利要求1所述的交互数据处理方法，其特征在于，所述构建目标交互页面的父级交互组件，在所述父级交互组件中添加若干子级交互组件，包括：

获取候选交互组件的第三资源文件；

根据所述第三资源文件确定渲染所述候选交互组件的第二资源路径；

根据所述第三资源文件以及所述第二资源路径确定配置信息，根据所述配置信息将所述子级交互组件添加至所述父级交互组件。

3.根据权利要求1所述的交互数据处理方法，其特征在于，所述根据所述父级交互组件与所述子级交互组件之间的归属关系，确定所述子级交互组件对应的第二资源文件与所述父级交互组件对应的第一资源文件之间的依赖信息，包括：

获取所述第一资源文件与所述父级交互组件的第一映射关系；

获取所述第二资源文件与所述子级交互组件的第二映射关系；

将所述第一映射关系、所述第二映射关系以及所述归属关系进行整合得到所述依赖信息。

4.根据权利要求3所述的交互数据处理方法，其特征在于，所述第二资源文件包括第二逻辑文件以及第二样式文件；所述获取所述第二资源文件与所述子级交互组件的第二映射关系，包括：

从所述第二资源文件中解析得到所述第二逻辑文件以及所述第二样式文件；

确定所述第二逻辑文件的第三资源路径和所述第二样式文件的第四资源路径，并将所述第三资源路径以及所述第四资源路径加入至所述第二映射关系。

5.根据权利要求1所述的交互数据处理方法，其特征在于，所述响应于对所述父级交互组件的操作，获取所述父级交互组件对应的第一资源文件的修改信息，并根据所述修改信息以及所述依赖信息从若干所述第二资源文件中确定目标资源文件，包括：

对所述修改信息进行静态分析确定进行修改操作后所述第一资源文件的文件属性信息；

根据所述文件属性信息中的第一标识信息以及所述依赖信息在第二资源文件中进行遍历，根据所述遍历结果确定第二标识信息；

根据所述第二标识信息确定与进行修改操作后的所述第一资源文件存在依赖关系的所述目标资源文件。

6.根据权利要求1所述的交互数据处理方法，其特征在于，所述根据所述修改信息的第一资源路径确定更新文件，根据所述更新文件对所述目标资源文件进行热更新，根据热更新后的所述目标资源文件对所述子级交互组件进行热更新，包括：

将所述更新文件中的第一逻辑文件更新至所述目标资源文件的脚本文件；

将所述更新文件中的第一样式文件更新至所述目标资源文件的工程文件；

根据所述更新后的所述脚本文件以及更新后的所述工程文件对所述子级交互组件进行热更新。

7.根据权利要求6所述的交互数据处理方法，其特征在于，所述交互数据处理方法，还包括：

确定所述脚本文件与所述工程文件之间的关联关系；

通过所述第一逻辑文件对所述脚本文件进行更新，根据所述关联关系获取未更新的工程文件，并根据更新后的所述脚本文件以及未更新的所述工程文件对所述子级交互组件进行热更新；

或者，通过所述第一样式文件对所述工程文件进行更新，根据所述关联关系获取未更新的脚本文件，并根据更新后的所述工程文件以及未更新的所述脚本文件对所述子级交互组件进行热更新。

8.根据权利要求1所述的交互数据处理方法，其特征在于，所述根据热更新后的所述子级交互组件确定热更新后的所述父级交互组件，根据热更新后的所述父级交互组件更新所述目标交互页面，包括：

根据所述归属信息以及热更新后的所述子级交互组件对所述父级交互组件进行热更新；

对所述父级交互组件以及父级交互组件下属的所述子级交互组件进行渲染，对所述目标交互页面进行更新。

9.根据权利要求8所述的交互数据处理方法，其特征在于，所述根据所述归属信息以及热更新后的所述子级交互组件对所述父级交互组件进行热更新，包括：

获取所述父级交互组件对应的第一资源文件中的父文件节点，根据所述依赖信息在所述父文件节点中确定所述子级交互组件对应的子文件节点；

根据所述更新文件创建动态关联标签，根据所述动态关联标签将所述更新文件插入至所述子文件节点；

根据所述子文件节点中的所述动态关联标签触发所述子级交互组件的热更新，并根据所述归属信息以及热更新后的所述子级交互组件对所述父级交互组件进行热更新。

10.根据权利要求9所述的交互数据处理方法，其特征在于，所述获取所述父级交互组件对应的第一资源文件中的父文件节点，根据所述依赖信息在所述父文件节点中确定所述子级交互组件对应的子文件节点，包括：

获取所述父级交互组件中所述的父文件节点对应的父文本内容，并根据所述依赖信息确定所述父文本内容中的子文本内容；

向所述父文本内容中的子文本内容赋予第三标识信息，根据所述第三标识信息确定所述子文件节点。

11.根据权利要求9所述的交互数据处理方法，其特征在于，所述根据所述更新文件创建动态关联标签，根据所述动态关联标签将所述更新文件插入至所述子文件节点，包括：

获取所述子文件节点中的主体标签；

将所述第一资源路径插入至所述主体标签中生成所述动态关联标签，并根据所述动态关联标签将所述更新文件插入至所述子文件节点。

12.一种交互数据处理装置，其特征在于，包括：

第一单元，用于构建目标交互页面的父级交互组件，在所述父级交互组件中添加若干子级交互组件；

第二单元，用于根据所述父级交互组件与所述子级交互组件之间的归属关系，确定所述子级交互组件对应的第二资源文件与所述父级交互组件对应的第一资源文件之间的依赖信息；

第三单元，用于响应于对所述父级交互组件的操作，获取所述父级交互组件对应的第一资源文件的修改信息，并根据所述修改信息以及所述依赖信息从若干所述第二资源文件中确定目标资源文件；

第四单元，用于根据所述修改信息的第一资源路径确定更新文件，根据所述更新文件对所述目标资源文件进行热更新，根据热更新后的所述目标资源文件对所述子级交互组件进行热更新；

第五单元，用于根据热更新后的所述子级交互组件确定热更新后的所述父级交互组件，根据热更新后的所述父级交互组件更新所述目标交互页面。

13.一种电子设备，其特征在于，包括处理器以及存储器；

所述存储器用于存储程序；

所述处理器执行所述程序实现如权利要求1至11中任一项所述的交互数据处理方法。

14.一种计算机可读存储介质，其特征在于，所述存储介质存储有程序，所述程序被处理器执行实现如权利要求1至11中任一项所述的交互数据处理方法。

15.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至11中任一项所述的交互数据处理方法。