CN117093218A - 一种基于界面描述的前端界面渲染方法、设备及介质 - Google Patents

Abstract

本申请公开了一种基于界面描述的前端界面渲染方法、设备及介质，属于电数字数据处理技术领域，配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述并对界面描述进行反序列化操作，得到对应的界面描述对象；根据布局容器描述对象及渲染参数中的目标框架创建初始布局容器，并将初始布局容器作为根布局容器；对根布局容器下的子节点进行遍历以确定子节点的界面描述类型；针对布局容器描述创建对应的布局容器实例，并针对外部组件类型的组件描述创建对应的组件实例；为布局容器创建对应的界面元素并添加至对应父布局容器的子节点处；确定子节点是否存在兄弟节点并在子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

Description

一种基于界面描述的前端界面渲染方法、设备及介质

技术领域

本申请涉及电数字数据处理技术领域，尤其涉及一种基于界面描述的前端界面渲染方法、设备及介质。

背景技术

目前，在软件开发过程中开发人员需要根据客户需求及运行效果对界面、业务逻辑等进行反复修改，开发者希望在修改代码逻辑、界面样式、组件属性后能够立即看到效果。然而，现在的软件开发过程中为了在开发中能够使用到诸如类型检查、数据绑定等特性，使用了如Vue、Angular、React等框架，而使用这些框架开发的程序从修改代码到看到效果需要经历编译、打包、部署过程，这就导致开发人员对界面或业务逻辑的每一次修改都需要经历上述过程，极大的限制了开发效率提升。

发明内容

本申请实施例提供了一种基于界面描述的前端界面渲染方法、设备及介质，用以解决现有的前端界面渲染方法浪费编程资源，限制开发效率的技术问题。

一方面，本申请实施例提供了一种基于界面描述的前端界面渲染方法，包括：

配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述，并对所述界面描述进行反序列化操作，得到对应的界面描述对象；所述界面描述对象包括布局容器描述对象和组件描述对象；

根据布局容器描述对象及所述渲染参数中的目标框架，创建初始布局容器，并将所述初始布局容器作为根布局容器；

对所述根布局容器下的子节点进行遍历，确定所述子节点对应的界面描述类型，并针对布局容器描述，创建对应的布局容器实例，以及针对外部组件类型的组件描述，创建对应的组件实例；所述界面描述类型包括布局容器描述和组件描述；

为所述布局容器创建对应的界面元素，并将所述界面元素添加至对应父布局容器的子节点处；

确定所述子节点是否存在兄弟节点，并在所述子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

在本申请的一种实现方式中，所述针对布局容器描述，创建对应的布局容器实例，具体包括：

针对布局容器描述，根据所述渲染参数调用对应的布局容器创建方法，以创建对应的布局容器实例；

从布局容器描述对象中获取布局容器对应的唯一标识符，并将所述布局容器对应的唯一标识符赋值给所述布局容器实例；

以及从所述布局容器对象中获取布局容器对应的样式，并对应用样式方法进行调用，以为所述布局容器实例配置对应的内联样式及样式表。

在本申请的一种实现方式中，所述针对外部组件类型的组件描述，创建对应的组件实例，具体包括：

针对组件描述，判断所述组件描述对象中的组件类型，并在所述组件类型为外部组件类型的情况下，根据所述渲染参数及组件类型，调用对应的组件创建方法，以创建对应的组件实例；

从组件描述对象中获取组件的相关信息，并基于所述相关信息，得到对应的组件。

在本申请的一种实现方式中，所述从组件描述对象中获取组件的相关信息，并基于所述相关信息，得到对应的组件，具体包括：

从组件描述对象中获取组件对应的唯一标识符，并将所述组件对应的唯一标识符赋值给所述组件实例；

从所述组件描述对象中获取组件属性配置，并调用对应的组件属性方法，以配置所述组件实例对应的属性；

以及从所述组件描述对象中获取组件事件，并调用组件事件监听方法，以对所述组件事件进行绑定。

在本申请的一种实现方式中，所述为所述布局容器创建对应的界面元素，并将所述界面元素添加至对应父布局容器的子节点处，具体包括：

对所述布局容器下的子节点集合进行递归处理，以针对所述子节点集合中的每个子节点，分别创建对应的界面元素；

确定界面元素对应子节点的节点类型，并确定所述节点类型的子节点对应的父布局容器节点，以将所述界面元素添加至所述父布局容器下的子节点中。

在本申请的一种实现方式中，所述确定所述子节点是否存在兄弟节点，具体包括：

由所述根布局容器依次向下进行遍历，以确定所述根布局容器下的子节点是否存在兄弟节点；

在所述根布局容器下的子节点存在兄弟节点的情况下，确定出所述兄弟节点对应的界面描述类型，并基于所述界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件；

创建所述兄弟节点的布局容器或者组件对应的界面元素，并将所述兄弟节点对应的界面元素添加至所述根布局容器下的子元素中。

在本申请的一种实现方式中，所述在所述子节点不存在兄弟节点的情况下，实现对前端界面的渲染，具体包括：

在所述根布局容器下的子节点不存在兄弟节点的情况下，根据所述渲染参数对所述目标框架中的对应接口进行调用；

将所述界面元素传递至所述目标框架，并基于所述目标框架，对所述前端界面进行渲染。

在本申请的一种实现方式中，所述针对布局容器描述，创建对应的布局容器实例之后，所述方法还包括：

由所述布局容器依次向下进行遍历，以确定所述布局容器下是否存在子节点；

在所述布局容器下存在子节点的情况下，基于所述界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件；

创建所述布局容器下子节点对应布局容器或者组件的界面元素，并将所述子节点对应的界面元素添加至所述布局容器下子节点对应的子元素中。

另一方面，本申请实施例还提供了一种基于界面描述的前端界面渲染设备，所述设备包括：

至少一个处理器；

以及，与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上述的一种基于界面描述的前端界面渲染方法。

另一方面，本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

如上述的一种基于界面描述的前端界面渲染方法。

本申请实施例提供了一种基于界面描述的前端界面渲染方法、设备及介质，至少包括以下有益效果：

通过配置渲染参数能够确定目标框架，通过界面描述地址能够加载界面描述，进而通过反序列化操作得到界面描述对象；根据布局容器描述对象及渲染参数中的目标框架创建初始布局容器，并将初始布局容器作为根布局容器，通过遍历根布局容器下的子节点，确定子节点的界面描述类型，进而针对每种类型的界面描述，创建对应实例生成布局容器或组件，且将所创建的界面元素添加至对应子节点，从而基于子节点处的界面元素，实现对前端界面的渲染，无需编程人员反复修改渲染，提高了编程的开发效率。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的一种基于界面描述的前端界面渲染方法的流程示意图；

图2为本申请实施例提供的登录界面展示示意图；

图3为本申请实施例提供的一种基于界面描述的前端界面渲染设备的内部结构示意图。

具体实施方式

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

本申请实施例提供了一种基于界面描述的前端界面渲染方法、设备及介质，通过配置渲染参数能够确定目标框架，通过界面描述地址能够加载界面描述，进而通过反序列化操作得到界面描述对象；根据布局容器描述对象及渲染参数中的目标框架创建初始布局容器，并将初始布局容器作为根布局容器，通过遍历根布局容器下的子节点，确定子节点的界面描述类型，进而针对每种类型的界面描述，创建对应实例生成布局容器或组件，且将所创建的界面元素添加至对应子节点，从而基于子节点处的界面元素，实现对前端界面的渲染，无需编程人员反复修改渲染，提高了编程的开发效率。解决了现有技术中的前端界面渲染方法浪费编程资源，限制开发效率的技术问题。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本申请实施例提供的一种基于界面描述的前端界面渲染方法的流程示意图。

本申请实施例涉及的分析方法的实现可以为终端设备，也可以为服务器，本申请对此不作特殊限制。为了方便理解和描述，以下实施例均以服务器为例进行详细描述。

需要说明的是，该服务器可以是单独的一台设备，可以是有多台设备组成的系统，即，分布式服务器，本申请对此不做具体限定。

如图1所示，本申请实施例提供的一种基于界面描述的前端界面渲染方法，包括：

101、配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述，并对界面描述进行反序列化操作，得到对应的界面描述对象。

需要说明的是，本申请实施例中的界面描述对象包括布局容器描述对象和组件描述对象。界面描述可根据元素类型不同划分为：布局容器描述和组件描述，分别描述了布局容器和组件的属性、事件等等，界面描述中有且仅有这两种类型的描述。界面描述在反序列化之后变为对应的描述对象，即布局容器描述对象和组件描述对象。

本申请公开了一种基于界面描述的前端界面渲染方法，包括布局容器和组件，布局容器是用于组织和管理页面上组件的容器。它负责定义组件在页面上的位置和排列方式。布局容器支持嵌套，即一个布局容器内部可以包含其他布局容器。如此层层嵌套即可描述各种复杂的界面布局。需要注意的是界面中有且只能有一个根布局容器。

布局容器主要包括唯一标识、类型、样式、子节点集合等属性。

其中唯一标标识（id），字符类型，用于描述布局容器在界面中的唯一标识，开发人员可以通过该属性选择和定位布局容器。需要注意的是id必须是唯一的，同一个界面中不能有两个相同唯一标识符的布局容器，且该属性必须以字母开头，可以包含字母、数字、连字符(-)、下划线(_)和点(.)。

类型（type）为字符类型，是用于描述该元素的组件类型，布局容器类型固定为布局容器（layout)。

样式（apparence）是用于描述布局容器的外观，该属性是一个对象类型，主要包括内联样式和样式表。

内联样式（style）为字符类型，是用于描述布局容器比较简单、特有的样式。它具有高优先级，可以覆盖样式表的样式。同时，内联样式支持定义多个样式，中间以分号(；)分隔。

样式表（class）为字符类型，是用于系统、一致的描述布局容器引用的外部样式表，使用样式表可以实现样式与布局容器分离，使组件描述结构更清晰。同时，样式表支持使用多个外部样式表，以空格分隔。

子节点集合（contents）为数组类型，是用于描述该布局容器下的子节点。进一步地，每一个子节点又是一个布局容器或组件，按此嵌套直至描述完整个界面。

需要说明的是，本申请实施例中的组件是具有特定功能和样式的独立、可重用的界面元素。组件可以是简单的基本元素，也可以是由多个基本元素组合而成的复杂组件。

组件主要包括唯一标识、样式、属性、类型、事件。并且，组件中的唯一标识、样式同布局容器一样。

属性（props）维对象类型，是用于描述组件的可配置项，该属性可以接收外部数据以影响组件的行为和呈现。该对象的键为组件的可配置项，键的值为该配置项对应的配置值。不同的组件有不同的配置项。

类型（type）为字符类型，是用于描述该组件所属的组件类型，该属性除支持基本的组件类型外，还支持外部组件类型（ref），当组件类型为外部组件时，组件的属性中仅包含一个字符类型的ref属性，其值为外部组件的描述地址。

事件（events）为对象类型，是用于描述用户在组件上可以执行的操作及操作对应的处理程序，该对象的键为组件的事件编号，键的值为该事件对应的处理方法。

102、根据布局容器描述对象及渲染参数中的目标框架，创建初始布局容器，并将初始布局容器作为根布局容器。

需要说明的是，本申请实施例中最外层的布局容器描述对象在逻辑上称之为根，其本质依然是布局容器描述对象，与其他的布局容器描述对象完全一致，只是所处的位置不同。

界面描述的根布局容器中包含两个布局容器：表单区域（container）和页脚区域（footer）。

表单区域包含logo、标题、提示信息、文本输入框、密码输入框及按钮，而页脚区域包含一个外部组件类型的子节点。

103、对根布局容器下的子节点进行遍历，确定子节点对应的界面描述类型，并针对布局容器描述，创建对应的布局容器实例，以及针对外部组件类型的组件描述，创建对应的组件实例。

需要说明的是，本申请实施例中的界面描述类型包括布局容器描述和组件描述。

具体地，在本申请的一个实施例中，服务器针对布局容器描述，根据渲染参数调用对应的布局容器创建方法，以创建对应的布局容器实例，进而从布局容器描述对象中获取布局容器对应的唯一标识符，并将布局容器对应的唯一标识符赋值给布局容器实例，以及从布局容器对象中获取布局容器对应的样式，并对应用样式方法进行调用，以为布局容器实例配置对应的内联样式及样式表，得到对应的布局容器。

在本申请的一个实施例中，服务器在针对布局容器描述，创建对应的布局容器实例，得到对应的布局容器之后，由布局容器依次向下进行遍历，以确定布局容器下是否存在子节点，在布局容器下存在子节点的情况下，基于界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件，以及创建布局容器下子节点对应布局容器或者组件的界面元素，并将子节点对应的界面元素添加至布局容器下子节点对应的子元素中。

具体地，在本申请的一个实施例中，服务器针对组件描述，判断组件描述对象中的组件类型，并在组件类型为外部组件类型的情况下，根据渲染参数及组件类型，调用对应的组件创建方法，以创建对应的组件实例，进而从组件描述对象中获取组件的相关信息，并基于相关信息，得到对应的组件。

在本申请的一个实施例中，服务器从组件描述对象中获取组件对应的唯一标识符，并将组件对应的唯一标识符赋值给组件实例，还从组件描述对象中获取组件属性配置，并调用对应的组件属性方法，以配置组件实例对应的属性，以及从组件描述对象中获取组件事件，并调用组件事件监听方法，以对组件事件进行绑定。

104、为布局容器创建对应的界面元素，并将界面元素添加至对应父布局容器的子节点处。

具体地，在本申请的一个实施例中，服务器对布局容器下的子节点集合进行递归处理，以针对子节点集合中的每个子节点，分别创建对应的界面元素，还需确定界面元素对应子节点的节点类型，并确定节点类型的子节点对应的父布局容器节点，以将界面元素添加至父布局容器下的子节点中。

105、确定子节点是否存在兄弟节点，并在子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

具体地，在本申请的一个实施例中，服务器由根布局容器依次向下进行遍历，以确定根布局容器下的子节点是否存在兄弟节点，在根布局容器下的子节点存在兄弟节点的情况下，确定出兄弟节点对应的界面描述类型，并基于界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件，然后，服务器还需创建兄弟节点的布局容器或者组件对应的界面元素，并将兄弟节点对应的界面元素添加至根布局容器下的子元素中。

在本申请的一个实施例中，服务器在根布局容器下的子节点不存在兄弟节点的情况下，根据渲染参数对目标框架中的对应接口进行调用，从而将界面元素传递至目标框架，并基于目标框架，对前端界面进行渲染。

图2为本申请实施例提供的登录界面展示示意图。如图2所示，登录界面整体分为上下两部分，上面是一个登录表单，下面是页脚。下面的页脚会在其他地方用到，因此这部分我们使用外部组件进行描述，以实现复用。

在一个实施例中，以angular作为目标框架，首先将渲染参数中的框架配置为angular，然后加载上述描述文件，此时描述仍是文本格式，进而将描述文件反序列化为描述对象便于后续使用。

紧接着根据目标框架及根布局容器对象描述创建根布局容器，并设置根布局容器唯一标识为root，为布局容器实例应用背景颜色，然后开始深度遍历根布局容器的子节点。

首先，服务器获取到唯一标识为container的布局容器，按照创建根布局容器的方法创建表单布局容器实例，并在表单布局容器创建完成后继续按照上述步骤遍历表单容器的子节点。服务器创建图像组件，设置组件唯一标识为logo，为组件应用样式表，设置组件url属性，将该组件添加到表单容器实例的子节点中。

其次，服务器遍历图像组件的兄弟节点。创建文本组件，设置组件唯一标识为login-title，为组件应用样式表，设置组件显示文本为“登录”，将该组件实例添加到表单容器实例的子节点中。

之后，服务器继续遍历文本组件的兄弟节点。创建文本组件实例，设置组件唯一标识为tip，为组件应用样式表，设置文本组件实例文本属性（text）为“请使用您的通行证账号”，将该实例添加到表单容器实例子节点中。

然后，继续遍历文本组件的兄弟节点。创建文本输入框组件实例，设置组件唯一标识为userName，为组件应用样式表，设置该组件占位符属性（placeholder）为“请输入用户名”，将该组件实例添加到表单容器实例字节点中。

再之后，服务器继续遍历文本输入框组件的兄弟节点。创建文本输入框组件实例，设置组件唯一标识为password，为组件应用样式表，设置该组件占位符属性（placeholder）为“请输入密码”，设置该组件password属性为true，将该组件实例添加到表单容器实例字节点中。

服务器还继续遍历文本输入框组件的兄弟节点。创建按钮组件实例，设置唯一标识为submit，为组件应用样式表，设置按钮text属性值为“登录”，将该组件实例添加到表单容器实例中。再返回到创建表单布局容器过程中，将表单布局容器实例添加到根布局容器的字节点中。

服务器遍历表单布局容器的兄弟节点，按照创建根布局容器的方法创建页脚布局容器实例，以及采用深度优先遍历页脚布局容器的子节点。

在子节点类型为外部组件的情况下，服务器首先使用加载描述方法及外部组件的描述地址加载该组件的描述，并反序列化该描述。创建文本组件实例，设置文本组件实例唯一标识为copy-right，为组件实例应用样式表，设置组件实例text属性为描述属性中的text属性文本，将该组件实例添加到页脚布局容器的子节点中。之后，返回到页脚布局容器创建过程，将页脚布局容器实例添加到根布局容器实例的子节点中。最后将根布局容器实例传递给对应框架的渲染方法，完成界面的渲染。至此，界面渲染完成。

以上为本申请提出的方法实施例。基于同样的发明构思，本申请实施例还提供了一种基于界面描述的前端界面渲染设备，其结构如图3所示。

图3为本申请实施例提供的一种基于界面描述的前端界面渲染设备的内部结构示意图。如图3所示，设备包括：

至少一个处理器；

以及，与至少一个处理器通信连接的存储器；

其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述，并对界面描述进行反序列化操作，得到对应的界面描述对象；界面描述对象包括布局容器描述对象和组件描述对象；

根据布局容器描述对象及渲染参数中的目标框架，创建初始布局容器，并将初始布局容器作为根布局容器；

对根布局容器下的子节点进行遍历，确定子节点对应的界面描述类型，并针对布局容器描述，创建对应的布局容器实例，以及针对外部组件类型的组件描述，创建对应的组件实例；界面描述类型包括布局容器描述和组件描述；

为布局容器创建对应的界面元素，并将界面元素添加至对应父布局容器的子节点处；

确定子节点是否存在兄弟节点，并在子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：

配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述，并对界面描述进行反序列化操作，得到对应的界面描述对象；界面描述对象包括布局容器描述对象和组件描述对象；

根据布局容器描述对象及渲染参数中的目标框架，创建初始布局容器，并将初始布局容器作为根布局容器；

对根布局容器下的子节点进行遍历，确定子节点对应的界面描述类型，并针对布局容器描述，创建对应的布局容器实例，以及针对外部组件类型的组件描述，创建对应的组件实例；界面描述类型包括布局容器描述和组件描述；

为布局容器创建对应的界面元素，并将界面元素添加至对应父布局容器的子节点处；

确定子节点是否存在兄弟节点，并在子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

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

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

本申请实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

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

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

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

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

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

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

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

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

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

Claims (10)

1.一种基于界面描述的前端界面渲染方法，其特征在于，所述方法包括：

配置前端界面的渲染参数，基于预先确定的界面描述地址加载界面描述，并对所述界面描述进行反序列化操作，得到对应的界面描述对象；所述界面描述对象包括布局容器描述对象和组件描述对象；

根据布局容器描述对象及所述渲染参数中的目标框架，创建初始布局容器，并将所述初始布局容器作为根布局容器；

对所述根布局容器下的子节点进行遍历，确定所述子节点对应的界面描述类型，并针对布局容器描述，创建对应的布局容器实例，以及针对外部组件类型的组件描述，创建对应的组件实例；所述界面描述类型包括布局容器描述和组件描述；

为所述布局容器创建对应的界面元素，并将所述界面元素添加至对应父布局容器的子节点处；

确定所述子节点是否存在兄弟节点，并在所述子节点不存在兄弟节点的情况下，实现对前端界面的渲染。

2.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述针对布局容器描述，创建对应的布局容器实例，具体包括：

针对布局容器描述，根据所述渲染参数调用对应的布局容器创建方法，以创建对应的布局容器实例；

从布局容器描述对象中获取布局容器对应的唯一标识符，并将所述布局容器对应的唯一标识符赋值给所述布局容器实例；

以及从所述布局容器对象中获取布局容器对应的样式，并对应用样式方法进行调用，以为所述布局容器实例配置对应的内联样式及样式表。

3.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述针对外部组件类型的组件描述，创建对应的组件实例，具体包括：

针对组件描述，判断所述组件描述对象中的组件类型，并在所述组件类型为外部组件类型的情况下，根据所述渲染参数及组件类型，调用对应的组件创建方法，以创建对应的组件实例；

从组件描述对象中获取组件的相关信息，并基于所述相关信息，得到对应的组件。

4.根据权利要求3所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述从组件描述对象中获取组件的相关信息，并基于所述相关信息，得到对应的组件，具体包括：

从组件描述对象中获取组件对应的唯一标识符，并将所述组件对应的唯一标识符赋值给所述组件实例；

从所述组件描述对象中获取组件属性配置，并调用对应的组件属性方法，以配置所述组件实例对应的属性；

以及从所述组件描述对象中获取组件事件，并调用组件事件监听方法，以对所述组件事件进行绑定。

5.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述为所述布局容器创建对应的界面元素，并将所述界面元素添加至对应父布局容器的子节点处，具体包括：

对所述布局容器下的子节点集合进行递归处理，以针对所述子节点集合中的每个子节点，分别创建对应的界面元素；

确定界面元素对应子节点的节点类型，并确定所述节点类型的子节点对应的父布局容器节点，以将所述界面元素添加至所述父布局容器下的子节点中。

6.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述确定所述子节点是否存在兄弟节点，具体包括：

由所述根布局容器依次向下进行遍历，以确定所述根布局容器下的子节点是否存在兄弟节点；

在所述根布局容器下的子节点存在兄弟节点的情况下，确定出所述兄弟节点对应的界面描述类型，并基于所述界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件；

创建所述兄弟节点的布局容器或者组件对应的界面元素，并将所述兄弟节点对应的界面元素添加至所述根布局容器下的子元素中。

7.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述在所述子节点不存在兄弟节点的情况下，实现对前端界面的渲染，具体包括：

在所述根布局容器下的子节点不存在兄弟节点的情况下，根据所述渲染参数对所述目标框架中的对应接口进行调用；

将所述界面元素传递至所述目标框架，并基于所述目标框架，对所述前端界面进行渲染。

8.根据权利要求1所述的一种基于界面描述的前端界面渲染方法，其特征在于，所述针对布局容器描述，创建对应的布局容器实例之后，所述方法还包括：

由所述布局容器依次向下进行遍历，以确定所述布局容器下是否存在子节点；

在所述布局容器下存在子节点的情况下，基于所述界面描述类型的界面描述，创建对应的实例，以得到对应的布局容器或者组件；

创建所述布局容器下子节点对应布局容器或者组件的界面元素，并将所述子节点对应的界面元素添加至所述布局容器下子节点对应的子元素中。

9.一种基于界面描述的前端界面渲染设备，其特征在于，所述设备包括：

至少一个处理器；

以及，与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：

如权利要求1-8任一项所述的一种基于界面描述的前端界面渲染方法。

10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

如权利要求1-8任一项所述的一种基于界面描述的前端界面渲染方法。