CN112395483A - 基于树形结构的页面渲染方法及装置 - Google Patents

Abstract

本申请实施例公开了一种基于树形结构的页面渲染方法及装置。所述方法包括：获取目标页面对应的DOM树结构；DOM树结构用于表征目标页面中的各组件之间的依赖关系；根据目标页面中的各组件之间的依赖关系，分别创建各组件在树形链表结构中对应的节点，并确定各节点在树形链表结构中的节点级别；在各节点分别对应的特征属性中存储相应的属性数据，特征属性包括状态属性、方法属性和状态继承属性中的至少一项；根据各节点对应的节点级别和属性数据，生成目标页面对应的目标树形链表结构，以基于目标树形链表结构渲染目标页面。该技术方案基于树形链表结构实现了对页面的数据管理效果，且不局限于页面的复杂度要求。

Description

基于树形结构的页面渲染方法及装置

技术领域

本发明涉及页面处理技术领域，尤其涉及一种基于树形结构的页面渲染方法及装置。

背景技术

目前，随着前端页面的业务复杂度逐渐提高，数据也越来越复杂，简单的数据管理模式已无法满足页面管理需求，因此需要一种专门的、能适用于页面复杂化需求的数据管理方案。相关技术中，针对前端页面的数据管理方案大多数都是线性的，即使用一个或多个存储结构管理前端页面的数据状态，而各个存储结构之间又是彼此独立的，因此导致前端页面的数据管理无法适用于复杂页面，且数据管理效果较差。

发明内容

本申请实施例的目的是提供一种基于树形结构的页面渲染方法及装置，用以解决现有技术中对前端页面的数据管理效果较差、且对页面复杂度的局限性较大的问题。

为解决上述技术问题，本申请实施例是这样实现的：

一方面，本申请实施例提供一种基于树形结构的页面渲染方法，包括：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

另一方面，本申请实施例提供一种基于属性结构的页面渲染装置，包括：

获取模块，用于获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

第一创建模块，用于根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

存储模块，用于在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

生成模块，用于根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

再一方面，本申请实施例提供一种基于属性结构的页面渲染设备，包括处理器和与所述处理器电连接的存储器，所述存储器存储有计算机程序，所述处理器用于从所述存储器调用并执行所述计算机程序以实现：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

再一方面，本申请实施例提供一种存储介质，用于存储计算机程序，所述计算机程序在被处理器执行时以实现以下流程：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

采用本发明实施例的技术方案，通过创建目标页面对应的目标树形链表结构中的各个节点，以及在各个节点分别对应的特征属性中存储相应的属性数据，其中，特征属性包括状态属性、方法属性和状态继承属性中的至少一项，状态属性用于存储节点的当前状态值，方法属性用于存储节点对应的组件被触发后执行的方法数据，状态继承属性用于存储与节点之间共享属性数据的其他节点的标识信息，从而使目标页面能够基于目标树形链表结构进行渲染，且目标页面中的各组件均能够通过目标树形链表结构中的各节点实现数据状态管理效果；并且，由于各组件分别对应各自的节点，且各节点对应的特征属性中分别存储对应节点的属性数据，因此各节点能够独立管理对应组件的数据状态，各节点之间彼此不受影响。此外，各节点还可通过状态继承属性获取其他节点的状态属性中的数据，因此使得特征属性中存储的数据能够在各节点之间实现共享，通过数据共享机制降低页面数据管理的复杂度，从而能够适用于复杂页面的数据管理。

附图说明

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

图1是根据本发明一实施例的一种基于树形结构的页面渲染方法的示意性流程图；

图2是根据本发明另一实施例的一种基于树形结构的页面渲染方法的示意性流程图；

图3是根据本发明一实施例的一种H5页面的DOM树结构的结构示意性图；

图4是根据本发明一实施例的一种H5页面的树形链表结构的结构示意性图；

图5是根据本发明一实施例的一种基于树形结构的页面渲染装置的示意性框图；

图6是根据本发明一实施例的一种基于树形结构的页面渲染设备的示意性框图。

具体实施方式

本申请实施例提供一种基于树形结构的页面渲染方法及装置，用以解决现有技术中对前端页面的数据管理效果较差、且对页面复杂度的局限性较大的问题。

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

图1是根据本发明一实施例的一种基于树形结构的页面渲染方法的示意性流程图，如图1所示，该方法包括：

S102，获取目标页面对应的文档对象模型DOM树结构，DOM树结构用于表征目标页面中的各组件之间的依赖关系。

其中，DOM(Document Object Model，文档对象化模型)树是指通过DOM将HTML页面进行解析、并生成的HTML树状结构和对应的访问方法。

在执行S102之前，可先定义树形链表结构以及树形链表结构中的节点，每个节点均有两个引用，即父节点和子节点。并且定义节点的特征属性，包括状态属性、方法属性和状态继承属性。

S104，根据目标页面中的各组件之间的依赖关系，分别创建各组件在树形链表结构中对应的节点，并确定各节点在树形链表结构中的节点级别。

其中，节点级别包括父节点和/或子节点。创建节点包括创建父节点和创建子节点。具体的，可为各节点的特征属性设置拦截器，利用JS中的Proxy方法为状态属性设置获取(即getter)字段，即在getter中获取节点对应的状态属性中存储的当前状态值。若在节点的getter中未获取到对应的当前状态值，而是从与该节点之间可共享属性数据的父节点中获取到了当前状态值，则可在其父节点的状态继承属性中存储该节点的节点标识信息，用于表示该节点属于其父节点的观察者(或状态继承者)。

S106，在各节点分别对应的特征属性中存储相应的属性数据，特征属性包括状态属性、方法属性和状态继承属性中的至少一项，其中，状态属性用于存储节点的当前状态值，方法属性用于存储节点对应的组件被触发后执行的方法数据，状态继承属性用于存储与节点之间共享属性数据的其他节点的标识信息。

其中，各方法数据分别对应有各自的目标状态值。目标状态值指组件被触发后，该组件对应的渲染内容所应呈现的状态值，即当前状态值被更新为目标状态值。

对于同一节点，其方法属性中可存储多个方法数据，也可理解为多种不同类型的方法所对应的方法数据。不同的方法数据对应有不同的目标状态值。例如，对于弹窗节点，其方法属性中存储有打开弹窗类方法数据和关闭弹窗类方法数据，那么，打开弹窗类方法数据对应的目标状态值即为弹窗界面的显示结果，关闭弹窗类方法数据对应的目标状态值即为弹窗界面的隐藏结果。

S108，根据各节点对应的节点级别和属性数据，生成目标页面对应的目标树形链表结构，以基于目标树形链表结构渲染目标页面。

采用本发明实施例的技术方案，通过创建目标页面对应的目标树形链表结构中的各个节点，以及在各个节点分别对应的特征属性中存储相应的属性数据，其中，特征属性包括状态属性、方法属性和状态继承属性中的至少一项，状态属性用于存储节点的当前状态值，方法属性用于存储节点对应的组件被触发后执行的方法数据，状态继承属性用于存储与节点之间共享属性数据的其他节点的标识信息，从而使目标页面能够基于目标树形链表结构进行渲染，且目标页面中的各组件均能够通过目标树形链表结构中的各节点实现数据状态管理效果；并且，由于各组件分别对应各自的节点，且各节点对应的特征属性中分别存储对应节点的属性数据，因此各节点能够独立管理对应组件的数据状态，各节点之间彼此不受影响。此外，各节点还可通过状态继承属性获取其他节点的状态属性中的数据，因此使得特征属性中存储的数据能够在各节点之间实现共享，通过数据共享机制降低页面数据管理的复杂度，从而能够适用于复杂页面的数据管理。

在一个实施例中，根据各节点对应的节点级别和属性数据，生成目标页面对应的目标树形链表结构之后，可执行如图2所示的S202～S208。其中：

S202，基于目标树形链表结构渲染目标页面，并对目标页面上的各组件进行监测。

该步骤中，对目标页面上的各组件进行监测时，可利用JS(一种编程语言)劫持目标树形链表结构中的各节点的状态属性中存储的状态数据的获取和设置，来实现监听各组件的数据变化的目的。

在渲染目标页面时，可先针对待渲染的各组件，分别从目标树形链表结构中查找并调用各组件对应的各节点的状态属性；进而根据各状态属性中存储的当前状态值，分别在目标页面上渲染各组件，以使各组件在目标页面上的渲染内容与各自对应的当前状态值相匹配。

例如，针对待渲染的弹窗组件，首先从目标树形链表结构中查找到弹窗组件对应的弹窗节点“dialog”，并调用弹窗节点“dialog”的状态属性，由于状态属性中存储了弹窗节点“dialog”的当前状态值，即弹窗组件待渲染的内容，因此通过调用弹窗节点“dialog”的状态属性，即可获取到弹窗节点“dialog”的当前状态值，从而根据弹窗节点“dialog”的当前状态值在前端的目标页面上渲染弹窗组件，弹窗组件的渲染内容即为弹窗节点“dialog”的状态属性中存储的当前状态值。

该步骤中，对组件进行监测，包括对组件是否被触发进行监测，如用户对某个组件进行了点击操作。

S204，当监测到对各组件中的第一组件的触发操作时，确定目标树形链表结构中与第一组件对应的第一节点。

S206，调用第一节点对应的属性数据，并根据属性数据确定第一组件被触发后第一节点的目标状态值。

各节点对应的属性数据包括：状态属性中存储的节点对应的当前状态值，方法属性中存储的节点对应的组件被触发后执行的方法数据，状态继承属性中存储的与节点之间共享属性数据的其他节点的标识信息。因此，在调用第一节点对应的属性数据时，可具体调用第一节点对应的方法数据，并执行与该方法数据相匹配的方法，以确定第一节点对应的目标状态值。

由于各方法数据与节点的目标状态值相对应，因此在执行与方法数据相匹配的方法之后，即可确定出与该方法数据对应的目标状态值，即第一节点对应的目标状态值。

确定出第一节点对应的目标状态值后，通过触发第一节点对应的第一组件对目标页面上的渲染内容进行更新，以使第一组件在目标页面上的渲染内容与目标状态值相匹配。具体的，首先将第一节点对应的当前状态值更新为目标状态值，进而触发第一组件，以使第一组件利用更新后的目标状态值对渲染内容进行更新。

S208，根据第一节点的目标状态值，更新第一组件在目标页面上的渲染内容，以使第一组件在目标页面上的渲染内容与目标状态值相匹配。

本实施例中，通过调用目标树形链表结构中第一节点的属性数据，执行与方法属性中存储的方法数据对应的方法，即可确定出第一节点对应的目标状态值，进而根据该目标状态值更新第一组件在前端的渲染内容，使得组件在前端的渲染内容的更新能够基于目标树形链表结构来实现，且各组件的渲染过程以及渲染内容的过程均不会影响到其他组件，即各组件的数据状态能够通过目标树形链表结构实现独立性的管理效果。

在一个实施例中，由于目标树形链表结构中的节点具有状态继承属性，因此存在部分节点的状态属性中未存储当前状态值的情况，这种情况下，可基于节点的状态继承属性从与该节点之间共享属性数据的其他节点(如父节点)对应的状态属性中获取相应数据。因此，在图2所示实施例中，从目标树形链表结构中查找各组件对应的各节的状态属性后，可包括能够查找到当前状态值以及未能查找到当前状态值两种情况。

假设当前查找的节点为第二节点，若在第二节点对应的状态属性中查找到了第二节点的当前状态值，则可直接根据查找到的当前状态值渲染第二节点对应的第二组件。

若在第二节点对应的状态属性中未查找到第二节点的当前状态值，则查找第三节点的状态属性中存储的当前状态值，其中，第三节点为第二节点的父节点。若第三节点对应的状态继承属性中包括第二节点的标识信息(如节点名称)，则调取第三节点的当前状态值，并利用第三节点的当前状态值渲染第二组件。其中，第三节点对应的状态继承属性可用于验证第二节点是否具有共享属性数据的权限，如果第三节点对应的状态继承属性中包括第二节点的标识信息，则说明第二节点具有与第三节点共享属性数据的权限；如果第三节点对应的状态继承属性中不包括第二节点的标识信息，则说明第二节点不具有与第三节点共享属性数据的权限。

其中，共享属性数据通常为共享状态数据，即，各节点之间可共享状态属性中存储的当前状态值，从而实现树形链表结构中的数据共享机制。

本实施例中，在节点的状态属性中未存储有当前状态值的情况下，通过节点的状态继承属性从其他节点中获取对应的当前状态值，该当前状态值可供多个节点之间共享。在创建节点时，如果该节点对应的属性数据需要继承自其它节(如父节点)，则可在该节点所要继承的父节点的状态继承属性中存储该节点对应的节点标识信息，从而使该节点能够继承其父节点的属性数据，即该节点可与其父节点之间共享属性数据。

在节点需要共享属性数据时，可通过状态继承属性中存储的节点的标识信息来验证节点是否具有共享属性数据的权限。从而使得各节点的状态属性中存储的数据(即当前状态值)能够在各节点之间实现共享，通过数据共享机制降低页面数据管理的复杂度，使得树形链表结构的数据管理机制能够适用于复杂页面的数据管理。

在一个实施例中，在渲染目标页面上的各组件时，如果某个组件对应的节点的状态属性中未存储有当前状态值，则可从该节点的父节点对应的状态属性中获取当前状态值，即该节点继承了其父节点的状态属性数据，也可理解为该节点为其父节点的观察者。这种情况下，可在父节点的状态继承属性中存储作为观察者的节点标识信息，以便于在父节点对应的属性数据发生变化时，该父节点的所有观察者对应的节点的属性数据也能被同步更新。

具体的，在触发第一组件使第一组件利用更新后的目标状态值对渲染内容进行更新之后，还可调用第一节点对应的状态继承属性，以确定出与第一节点之间共享属性数据的第四节点；进而触发第四节点对应的第四组件，以使第四组件利用更新后的目标状态值，对第四组件的渲染内容进行更新。其中，通过第一节点对应的状态继承属性中存储的节点标识信息，即可确定出该节点标识信息对应的第四节点。

本实施例中，第四节点即为可共享第一节点属性数据的节点。通过触发与第一节点之间共享属性数据的第四节点对应的第四组件对其渲染内容进行更新，使得第四组件在前端的渲染内容能够与第一组件同步更新，进而使得树形链表结构中的数据共享机制更加完善。

也就是说，树形链表结构中，节点的属性数据在发生改变时，能够实时“通知”(即触发)与该节点之间可共享属性数据的其他节点对应的组件，从而使得组件在前端的渲染内容和树形链表结构中各节点的属性数据能够同步更新，但同时不会触发其他节点，即树形链表结构中的各节点之间彼此独立管理各自的属性数据，同时又能基于数据共享机制实现各节点的状态数据同步更新的效果。

在一个实施例中，在节点“通知”与其之间可共享属性数据的其他节点对应的组件之后，该节点对应的状态继承属性中存储的节点标识信息可被清空。组件在重新渲染的过程中，可重新收集该组件对应的节点的属性数据的观察者，并将收集到的观察者对应的节点标识信息存储在对应的状态继承属性中，以便于节点的属性数据再次发生变化时能够即使通知其观察者。通过循环上述过程，使得各组件在前端的渲染内容和树形链表结构中各节点的属性数据能够保持同步更新。

在一个实施例中，目标树形链表结构中的节点包括表格组件对应的表格节点。基于此，还可通过在目标树形链表结构中创建表格节点的子节点的方式来实现表格数据的更新机制。具体可实施为以下步骤：

首先，创建表格节点对应的弹窗子节点以及弹窗子节点对应的表单子节点，并在弹窗子节点以及表单子节点对应的特征属性中分别存储相应的属性数据。

其中，弹窗子节点为表格节点的子节点；表单子节点为弹窗子节点的子节点。弹窗子节点对应的状态属性用于存储表格组件当前渲染的第一数据内容，如表格组件中的每个单元格所渲染的数据内容；弹窗子节点对应的方法属性用于存储打开弹窗类方法数据和关闭弹窗类方法数据。在调用并执行方法属性中的打开弹窗类方法数据时，可实现打开弹簧的效果；在调用并执行方法属性中存储的关闭弹窗类方法数据时，可实现关闭弹窗(或隐藏弹窗)的效果。

表单子节点对应的方法属性用于存储更新类方法数据，通过调用并执行更新类方法数据，可实现对表格组件对应的表单数据的更新。

其次，当接收到对第一数据内容的编辑请求时，调用并执行弹窗子节点对应的方法属性中存储的打开弹窗类方法数据，以使第一数据内容被显示于打开的弹窗内。

如果接收到的编辑请求中指示了对表格组件中的某个单元格进行编辑，则通过调用并执行弹窗子节点对应的打开弹窗类方法数据，可使得所指示的单元格中的数据内容被显示于弹窗内。

再次，当接收到针对弹窗内显示的第一数据内容的编辑操作时，调用并执行表单子节点对应的方法属性中存储的数据更新类方法数据，以使表格组件当前渲染的第一数据内容被更新至第二数据内容。

本实施例中，通过在目标树形链表结构中创建用于编辑表格组件的数据内容的节点，使得表格组件在前端的渲染内容可基于树形链表结构的数据更新机制来实现。也就是说，无论页面的结构有多复杂，均可通过在树形链表结构中创建不同级别的节点来实现数据存储、数据管理、数据更新等效果，从而实现了通过树形链表结构对页面数据进行管理的目的。

以下，通过一具体实施例来说明本申请提供的基于树形结构的页面渲染方法。

图3示出了一实施例中一H5页面的DOM树结构的示意图。由图3可看出，H5页面的DOM树结构中包括以下组件：页面导航菜单、页面内容、新增按钮、弹窗、表格等。图4示出了基于图3所示的DOM树结构所创建的目标树形链表结构图。具体的创建过程如下：

步骤A1，在目标树形链表结构的根节点“root”为页面导航菜单和页面内容这两个组件分别创建子节点“menu”和“page”。

步骤A2，在节点“menu”中定义初始状态state(即初始状态值)为空的菜单列表，在actions(即方法属性)中定义方法fetchMenuList，该方法用于拉取菜单列表。拉取菜单列表成功后可赋值给state。在页面导航菜单组件初始化时，可通过调用并执行节点“menu”中的fetchMenuList方法，以确定出执行fetchMenuList方法后组件对应的目标状态值，即拉取菜单列表后所应呈现的菜单列表。将节点“menu”的状态属性(即state)更新为菜单列表，并通过状态属性(即state)中存储的菜单列表渲染页面中与节点“menu”对应的组件。当拉取完成后，组件收到通知，自动渲染最新的菜单列表。

步骤A3，与步骤A2中创建节点“menu”的过程类似，在节点“page”中定义状态state为页面全局数据，actions中定义一个方法fetchData，该方法用于拉取全局数据，在页面初始化的时候调用节点“menu”中的fetchData方法，以使拉取完成后页面中的全局数据会自动更新。

通过上述步骤中对各节点的创建，使得各节点具有各自对应的特征属性，且各特征属性中分别存储有对应的属性数据，具体的，状态属性state用于存储节点的当前状态值，方法属性actions用于存储节点对应的组件被触发后执行的方法数据，状态继承属性用于存储与节点之间共享属性数据的其他节点的标识信息。

步骤A4，针对页面中的新增按钮，由于点击该新增按钮的结果为打开弹窗，因此在节点“page”下创建子节点“dialog”，定义子节点“dialog”的初始状态state为：弹窗的标题title、显示隐藏状态visible，定义子节点“dialog”的actions为：打开弹窗open，关闭弹窗close。这样一来，当点击新增按钮后，调用子节点“dialog”中的open方法，即可触发页面中显示弹窗，调用子节点“dialog”中的close方法，即可触发页面隐藏弹窗。

步骤A5，在子节点“dialog”中为表单创建子节点“form”，为子节点“form”定义初始状态state为表单数据，actions为提交submit、验证validate等方法。在表单渲染过程中，当渲染Select下拉列表控件时，会用到全局的下拉列表数据，由于在每个节点的属性数据是有继承性的，因此可以直接从子节点“form”获取到节点“page”中的下拉列表数据用于渲染。

步骤A6，在节点“page”中为表格增删改查组件添加子节点“crud”，定义子节点“crud”的初始状态state为表格数据rows、当前页数currentPage、页面大小pageSize、数据总条目数total等，定义方法actions为查询数据query、删除数据delete、更新数据update、上一页prevPage、下一页nextPage等业务方法。

可以看出，关于表格增删改查的所有业务逻辑都是封装在子节点“crud”中，与其他节点是完全独立的，渲染时只需调用状态属性state中的表格数据rows去渲染表格，调用当前页数currentPage、页面大小pageSize与数据总条目数total等去渲染分页组件，当点击上一页、下一页按钮时只需调用方法属性actions中的prevPage与nextPage方法。

步骤A7，表格渲染完成后，可能需要对表格中的某一条数据进行编辑，此时可以参照步骤A4中的方法，为子节点“crud”建立子节点“dialog”，以及为子节点“dialog”建立子节点“form”。进而基于创建好的子节点“dialog”和子节点“form”对应的属性数据去编辑数据，编辑保存后，通过调用子节点“crud”中的查询query方法重新拉取数据，使得子节点“crud”对应的状态属性state中的数据更新，且表格在前端的渲染内容也被实时更新。

通过上述实施例可看出，根据H5页面的DOM树结构，为H5页面创建了如图4所示的树形链表结构，该树形链表结构中，每个节点都有各自独立的状态属性和方法属性，可以独立管理自己的数据状态及业务逻辑。并且，每个节点的状态数据之间又具有继承性，使得状态数据流能够自上而下(即由父节点到子节点)共享，无论页面的结构有多复杂、规模有多大，这种基于树形链表结构的页面数据管理机制都能够轻松应付。

综上，已经对本主题的特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作可以按照不同的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序，以实现期望的结果。在某些实施方式中，多任务处理和并行处理可以是有利的。

以上为本申请实施例提供的基于属性结构的页面渲染方法，基于同样的思路，本申请实施例还提供一种基于属性结构的页面渲染装置。

图5是根据本发明一实施例的一种基于树形结构的页面渲染装置的示意性流程图，如图5所示，该装置包括：

获取模块510，用于获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

第一创建模块520，用于根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

存储模块530，用于在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

生成模块540，用于根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

在一个实施例中，所述装置还包括：

渲染模块，用于在所述根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构之后，基于所述目标树形链表结构渲染所述目标页面，并对所述目标页面上的各所述组件进行监测；

第一确定模块，用于当监测到对各所述组件中的第一组件的触发操作时，确定所述目标树形链表结构中与所述第一组件对应的第一节点；

第一调用模块，用于调用所述第一节点对应的所述属性数据，并根据所述属性数据确定所述第一组件被触发后所述第一节点的目标状态值；

第一更新模块，用于根据所述目标状态值，更新所述第一组件在所述目标页面上的渲染内容，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配。

在一个实施例中，所述渲染模块包括：

第一调用单元，用于针对待渲染的各所述组件，分别从所述目标树形链表结构中查找并调用各所述组件对应的各所述节点的所述状态属性；

第一渲染单元，用于根据各所述状态属性中存储的所述当前状态值，分别在所述目标页面上渲染各所述组件，以使各所述组件在所述目标页面上的渲染内容与各自对应的所述当前状态值相匹配。

在一个实施例中，所述渲染模块还包括：

第二调用单元，用于所述针对待渲染的各所述组件，分别从所述目标树形链表结构中查找并调用各所述组件对应的各所述节的所述状态属性之后，若在第二节点对应的所述状态属性中未查找到所述第二节点的所述当前状态值，则查找第三节点的所述状态属性中存储的所述当前状态值；所述第三节点为所述第二节点的父节点；

第二渲染单元，用于若所述第三节点对应的所述状态继承属性中包括所述第二节点的标识信息，则调取所述第三节点的所述当前状态值，以及利用所述第三节点的所述当前状态值渲染所述第二组件。

在一个实施例中，各所述方法数据分别对应有各自的目标状态值；

所述第一调用模块包括：

第三调用单元，用于调用并执行所述第一节点对应的所述方法数据，以确定所述第一节点对应的所述目标状态值；

更新单元，用于触发所述第一组件对所述目标页面上的渲染内容进行更新，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配。

在一个实施例中，所述更新单元还用于：

将所述第一节点对应的所述当前状态值更新为所述目标状态值；

触发所述第一组件，以使所述第一组件利用更新后的所述目标状态值对所述渲染内容进行更新。

在一个实施例中，所述更新单元还用于：

在所述触发所述第一组件，以使所述第一组件利用更新后的所述目标状态值对所述渲染内容进行更新之后，调用所述第一节点对应的所述状态继承属性，以确定与所述第一节点之间共享所述属性数据的第四节点；

触发所述第四节点对应的第四组件，以使所述第四组件利用更新后的所述目标状态值，对所述第四组件的渲染内容进行更新。

在一个实施例中，所述节点包括表格组件对应的表格节点；所述装置还包括：

第二创建模块，用于创建所述表格节点对应的弹窗子节点以及所述弹窗子节点对应的表单子节点；所述表单子节点对应的方法属性用于存储更新类方法数据，所述弹窗子节点对应的状态属性用于存储所述表格组件当前渲染的第一数据内容，所述弹窗子节点对应的方法属性用于存储打开弹窗类方法数据和关闭弹窗类方法数据；

第二调用模块，用于当接收到对所述第一数据内容的编辑请求时，调用并执行所述弹窗子节点对应的方法属性中存储的所述打开弹窗类方法数据，以使所述第一数据内容被显示于打开的弹窗内；

第三调用模块，用于当接收到针对所述弹窗内显示的所述第一数据内容的编辑操作时，调用并执行所述表单子节点对应的方法属性中存储的所述数据更新类方法数据，以使所述表格组件当前渲染的所述第一数据内容被更新至第二数据内容。

采用本发明实施例的装置，通过创建目标页面对应的目标树形链表结构中的各个节点，以及在各个节点分别对应的特征属性中存储相应的属性数据，其中，特征属性包括状态属性、方法属性和状态继承属性中的至少一项，状态属性用于存储节点的当前状态值，方法属性用于存储节点对应的组件被触发后执行的方法数据，状态继承属性用于存储与节点之间共享属性数据的其他节点的标识信息，从而使目标页面能够基于目标树形链表结构进行渲染，且目标页面中的各组件均能够通过目标树形链表结构中的各节点实现数据状态管理效果；并且，由于各组件分别对应各自的节点，且各节点对应的特征属性中分别存储对应节点的属性数据，因此各节点能够独立管理对应组件的数据状态，各节点之间彼此不受影响。此外，各节点还可通过状态继承属性获取其他节点的状态属性中的数据，因此使得特征属性中存储的数据能够在各节点之间实现共享，通过数据共享机制降低页面数据管理的复杂度，从而能够适用于复杂页面的数据管理。

本领域的技术人员应可理解，图5中的基于属性结构的页面渲染装置能够用来实现前文所述的基于属性结构的页面渲染方法，其中的细节描述应与前文方法部分描述类似，为避免繁琐，此处不另赘述。

基于同样的思路，本申请实施例还提供一种基于属性结构的页面渲染设备，如图6所示。基于属性结构的页面渲染设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上的处理器601和存储器602，存储器602中可以存储有一个或一个以上存储应用程序或数据。其中，存储器602可以是短暂存储或持久存储。存储在存储器602的应用程序可以包括一个或一个以上模块(图示未示出)，每个模块可以包括对基于属性结构的页面渲染设备中的一系列计算机可执行指令。更进一步地，处理器601可以设置为与存储器602通信，在基于属性结构的页面渲染设备上执行存储器602中的一系列计算机可执行指令。基于属性结构的页面渲染设备还可以包括一个或一个以上电源603，一个或一个以上有线或无线网络接口604，一个或一个以上输入输出接口605，一个或一个以上键盘606。

具体在本实施例中，基于属性结构的页面渲染设备包括有存储器，以及一个或一个以上的程序，其中一个或者一个以上程序存储于存储器中，且一个或者一个以上程序可以包括一个或一个以上模块，且每个模块可以包括对基于属性结构的页面渲染设备中的一系列计算机可执行指令，且经配置以由一个或者一个以上处理器执行该一个或者一个以上程序包含用于进行以下计算机可执行指令：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

本申请实施例还提出了一种存储介质，该存储介质存储一个或多个计算机程序，该一个或多个计算机程序包括指令，该指令当被包括多个应用程序的电子设备执行时，能够使该电子设备执行上述一种基于属性结构的页面渲染方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (13)

1.一种基于树形结构的页面渲染方法，其特征在于，包括：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

2.根据权利要求1所述的方法，其特征在于，所述根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构之后，所述方法还包括：

基于所述目标树形链表结构渲染所述目标页面，并对所述目标页面上的各所述组件进行监测；

当监测到对各所述组件中的第一组件的触发操作时，确定所述目标树形链表结构中与所述第一组件对应的第一节点；

调用所述第一节点对应的所述属性数据，并根据所述属性数据确定所述第一组件被触发后所述第一节点的目标状态值；

根据所述目标状态值，更新所述第一组件在所述目标页面上的渲染内容，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配。

3.根据权利要求2所述的方法，其特征在于，所述基于所述目标树形链表结构渲染所述目标页面，包括：

针对待渲染的各所述组件，分别从所述目标树形链表结构中查找并调用各所述组件对应的各所述节点的所述状态属性；

根据各所述状态属性中存储的所述当前状态值，分别在所述目标页面上渲染各所述组件，以使各所述组件在所述目标页面上的渲染内容与各自对应的所述当前状态值相匹配。

4.根据权利要求3所述的方法，其特征在于，所述针对待渲染的各所述组件，分别从所述目标树形链表结构中查找并调用各所述组件对应的各所述节的所述状态属性之后，所述基于所述目标树形链表结构渲染所述目标页面，还包括：

若在第二节点对应的所述状态属性中未查找到所述第二节点的所述当前状态值，则查找第三节点的所述状态属性中存储的所述当前状态值；所述第三节点为所述第二节点的父节点；

若所述第三节点对应的所述状态继承属性中包括所述第二节点的标识信息，则调取所述第三节点的所述当前状态值，以及利用所述第三节点的所述当前状态值渲染所述第二组件。

5.根据权利要求2所述的方法，其特征在于，各所述方法数据分别对应有各自的目标状态值；

所述调用所述第一节点对应的所述属性数据，并根据所述属性数据确定所述第一组件被触发后所述第一节点的目标状态值，包括：

调用并执行所述第一节点对应的所述方法数据，以确定所述第一节点对应的所述目标状态值；

触发所述第一组件对所述目标页面上的渲染内容进行更新，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配。

6.根据权利要求5所述的方法，其特征在于，所述触发所述第一组件对所述目标页面上的渲染内容进行更新，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配，包括：

将所述第一节点对应的所述当前状态值更新为所述目标状态值；

触发所述第一组件，以使所述第一组件利用更新后的所述目标状态值对所述渲染内容进行更新。

7.根据权利要求6所述的方法，其特征在于，所述触发所述第一组件，以使所述第一组件利用更新后的所述目标状态值对所述渲染内容进行更新之后，还包括：

调用所述第一节点对应的所述状态继承属性，以确定与所述第一节点之间共享所述属性数据的第四节点；

触发所述第四节点对应的第四组件，以使所述第四组件利用更新后的所述目标状态值，对所述第四组件的渲染内容进行更新。

8.根据权利要求2所述的方法，其特征在于，所述节点包括表格组件对应的表格节点；所述方法还包括：

创建所述表格节点对应的弹窗子节点以及所述弹窗子节点对应的表单子节点；所述表单子节点对应的方法属性用于存储更新类方法数据，所述弹窗子节点对应的状态属性用于存储所述表格组件当前渲染的第一数据内容，所述弹窗子节点对应的方法属性用于存储打开弹窗类方法数据和关闭弹窗类方法数据；

当接收到对所述第一数据内容的编辑请求时，调用并执行所述弹窗子节点对应的方法属性中存储的所述打开弹窗类方法数据，以使所述第一数据内容被显示于打开的弹窗内；

当接收到针对所述弹窗内显示的所述第一数据内容的编辑操作时，调用并执行所述表单子节点对应的方法属性中存储的所述数据更新类方法数据，以使所述表格组件当前渲染的所述第一数据内容被更新至第二数据内容。

9.一种基于属性结构的页面渲染装置，其特征在于，包括：

获取模块，用于获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

第一创建模块，用于根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

存储模块，用于在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

生成模块，用于根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

渲染模块，用于在所述根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构之后，基于所述目标树形链表结构渲染所述目标页面，并对所述目标页面上的各所述组件进行监测；

第一确定模块，用于当监测到对各所述组件中的第一组件的触发操作时，确定所述目标树形链表结构中与所述第一组件对应的第一节点；

第一调用模块，用于调用所述第一节点对应的所述属性数据，并根据所述属性数据确定所述第一组件被触发后所述第一节点的目标状态值；

第一更新模块，用于根据所述目标状态值，更新所述第一组件在所述目标页面上的渲染内容，以使所述第一组件在所述目标页面上的渲染内容与所述目标状态值相匹配。

11.根据权利要求10所述的装置，其特征在于，所述渲染模块包括：

第一调用单元，用于针对待渲染的各所述组件，分别从所述目标树形链表结构中查找并调用各所述组件对应的各所述节点的所述状态属性；

第一渲染单元，用于根据各所述状态属性中存储的所述当前状态值，分别在所述目标页面上渲染各所述组件，以使各所述组件在所述目标页面上的渲染内容与各自对应的所述当前状态值相匹配。

12.一种基于树形结构的页面渲染设备，其特征在于，包括处理器和与所述处理器电连接的存储器，所述存储器存储有计算机程序，所述处理器用于从所述存储器调用并执行所述计算机程序以实现：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

13.一种存储介质，其特征在于，所述存储介质用于存储计算机程序，所述计算机程序在被处理器执行时以实现以下流程：

获取目标页面对应的文档对象模型DOM树结构；所述DOM树结构用于表征所述目标页面中的各组件之间的依赖关系；

根据所述目标页面中的各所述组件之间的依赖关系，分别创建各所述组件在树形链表结构中对应的节点，并确定各所述节点在所述树形链表结构中的节点级别；所述节点级别包括父节点和/或子节点；

在各所述节点分别对应的特征属性中存储相应的属性数据，所述特征属性包括状态属性、方法属性和状态继承属性中的至少一项；所述状态属性用于存储所述节点的当前状态值，所述方法属性用于存储所述节点对应的所述组件被触发后执行的方法数据，所述状态继承属性用于存储与所述节点之间共享所述属性数据的其他节点的标识信息；

根据各所述节点对应的所述节点级别和所述属性数据，生成所述目标页面对应的目标树形链表结构，以基于所述目标树形链表结构渲染所述目标页面。

Images