CN115658065A - 前端ui框架构建方法及装置 - Google Patents

Abstract

本申请公开了一种前端UI框架构建方法及装置，该方法包括：将基础文档对象模型抽象封装为原子组件；其中，原子组件的内部声明有功能和/或样式配置；设置原子组件的配置接口，用于指定基础文档对象模型的属性和功能；在配置文件中，根据基础文档对象模型的层级结构以及在页面中的元素节点位置配置配置接口，完成UI框架和功能的构建。本申请公开的方法解决了现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。

Description

前端UI框架构建方法及装置

技术领域

本申请涉及前端开发技术领域，尤其涉及一种前端UI框架构建方法及装置。

背景技术

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，通常包括平面设计，网页设计以及移动界面设计。

现有的前端UI框架的搭建方案是通过手动创建多个文档对象模型，并单独设置各个文档对象模型的属性和其他配置，再依据各个文档对象模型的物理层次关系将其拼接成最终的UI界面。在文档对象模型创建完成之后，数据从上到下进行绑定以及从下到上完成收集。

但是，UI操作会对页面中的数据产生影响，从而进一步导致页面发生变化，并且这些操作用户都要手动编写代码进行实现。现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下。

发明内容

在本申请实施例中，通过提供一种前端UI框架构建方法，解决了现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。

第一方面，本申请实施例提供了一种前端UI框架构建方法，该方法包括：将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；在配置文件中，根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置配置所述配置接口，完成UI框架和功能的构建。

结合第一方面，在一种可能的实现方式中，所述方法还包括：将多个所述原子组件按照第一预设规则构成复合组件；设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。

结合第一方面，在一种可能的实现方式中，所述方法还包括：根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。

结合第一方面，在一种可能的实现方式中，所述方法还包括：使用渲染引擎解析所述配置文件；调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。

结合第一方面，在一种可能的实现方式中，所述方法还包括：提供自定义组件和应用程序接口；编写所述自定义组件的生命周期函数。

结合第一方面，在一种可能的实现方式中，当执行UI操作对页面中的数据产生影响使得该数据产生变化时，所述方法还包括：发送通知到对应的事件并触发所述原子组件和/或所述复合组件和/或所述自定义组件内部的更新逻辑，完成页面的更新。

第二方面，本申请实施例提供了一种前端UI框架构建装置，该装置包括：封装模块，用于将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；设置配置接口模块，用于设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；完成构建模块，用于在配置文件中配置所述配置接口完成UI框架和功能的构建；其中，所述配置方法为：根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置进行配置。

结合第二方面，在一种可能的实现方式中，所述装置还包括：构成模块，用于将多个所述原子组件按照预设规则构成复合组件；设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。

结合第二方面，在一种可能的实现方式中，所述装置还包括：设置共有的配置接口模块，用于根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。

结合第二方面，在一种可能的实现方式中，所述装置还包括：拼接模块，用于使用渲染引擎解析所述配置文件；调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。

结合第二方面，在一种可能的实现方式中，所述装置还包括：提供自定义组件模块，用于提供自定义组件和应用程序接口；编写所述自定义组件的生命周期函数。

结合第二方面，在一种可能的实现方式中，当执行UI操作对页面中的数据产生影响使得该数据产生变化时，所述装置还包括：更新模块，用于发送通知到对应的事件并触发所述原子组件和/或所述复合组件和/或所述自定义组件内部的更新逻辑，完成页面的更新。

第三方面，本申请实施例提供了一种前端UI框架构建服务器，包括存储器和处理器；所述存储器用于存储计算机可执行指令；所述处理器用于执行所述计算机可执行指令，以实现第一方面或第一方面任一种可能的实现方式所述的方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有可执行指令，计算机执行所述可执行指令时能够实现以实现第一方面或第一方面任一种可能的实现方式所述的方法。

本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果：

本申请实施例提供了一种前端UI框架构建方法，使用组件化思想，通过声明不同的组件并提供灵活的配置接口，使用可描述性语言构成配置文件，最后使用渲染引擎解析配置文件并生成最终的文档对象模型结构。摒弃了现有生成复杂UI框架时，需要手动生成每一个文档对象模型的方案。本申请实施例所有的配置文件的配置都是可以复用的，解决了现有技术不可复用，重复性高的问题。同时，由于配置文件的层次结构与最终的文档对象模型结构是一一对应的，因此可以直接从配置文件的层次结构上反映出最终的结果，并且配置文件中的每一部分意义都较为清晰，可读性高，解决了现有技术对于组件扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。本申请实施例还有着扩展性极高的优点，通过各种原子组件相互拼接来构成功能更为强大，配置更为丰富的复合组件。

附图说明

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

图1为本申请实施例提供的前端UI框架构建方法的流程图；

图2为本申请实施例提供的设置复合组件配置接口的具体流程图；

图3为本申请实施例提供的拼接UI界面的具体流程图；

图4为本申请实施例提供的提供自定义组件的具体流程图；

图5为本申请实施例提供的前端UI框架构建装置的示意图；

图6为本申请实施例提供的前端UI框架构建服务器的示意图；

图7为本申请实施例提供的复合组件示意图；

图8为本申请实施例提供的修改后复合组件示意图。

具体实施方式

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

首先对本申请实施例中涉及的相关技术或概念作简单介绍。

文档对象模型（英文：Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它提供了对整个文档的访问模型，并且将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了节点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的节点和内容。

渲染引擎也称排版引擎，它负责取得网页的内容、整理信息以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑和显示网络内容的应用程序都需要排版引擎。

本申请实施例提供了一种前端UI框架构建方法，如图1所示，该方法包括步骤S101至步骤S103。

S101：将基础文档对象模型抽象封装为原子组件；其中，原子组件的内部声明有功能和/或样式配置。

具体地，组件是一段代码的片段，它可以实现某些指定的功能或渲染特定的展示效果。而原子组件是构成页面的最基本组成部分，原子组件可以为基础的UI组件，例如文字大小、按钮、颜色、标签、输入和分割线等，也可以为抽象的概念，例如色调等。它们往往具有不可再拆分的特性，是其他组件的基础。将基础文档对象模型抽象封装为原子组件的过程就是将通用性代码“提取”或是“抽取”出去的过程。

S102：设置原子组件的配置接口，用于指定基础文档对象模型的属性和功能。其中，文档对象模型常用属性为innerHTML属性、innerText属性、className属性和style属性。文档对象模型的功能为：可以在页面某个地方添加元素或者删除元素。

S103：在配置文件中，根据基础文档对象模型的层级结构以及在页面中的元素节点位置配置配置接口，完成UI框架和功能的构建。

其中，配置文件指的是能够存放程序配置参数和对程序进行初始化设置的文件，通常以“ini，conf，cfg，yaml”作为后缀结尾。配置文件的作用为：通过配置文件能够使得代码中的参数根据配置文件动态调整，而不用直接修改代码。

具体地，节点为构成网页页面的最基本的组成部分，网页中的每一个部分都可以称为是一个节点，比如：标签、属性、文本、注释和整个文档等都是一个节点。虽然都是节点，但是它们的具体类型是不同的，比如：标签称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。节点的类型不同，属性和方法也都不尽相同。其中，元素节点为HTML中的各种标签，也是最常用的一个节点，浏览器会将页面中所有的标签都转换为一个元素节点，可以通过document的方法来获取元素节点。

下面列举一个实施例对上述方法进行详细说明，当然，还有其他实施例，本申请不以此实施例为限制。

例如设置了原子组件TextEditor的接口即原子组件文本框的配置接口，用于在文本框中输入字。

如果用户想在文本框输入的字体颜色为红色，那么只需要在原子组件配置接口中对foreColor进行定义，然后在原子组件TextEditor中增加支持foreColor的设置为if(this._options.foreColor){this.input.style.color = this._option.foreColor;}，然后在原子组件中输入type:“TextEditor”声明原子组件为TextEditor，在配置接口中设置foreColor:“red”，此时在原子组件TextEditor所设定的文本框中输入的字体颜色就为红色了。

图2为本申请实施例提供的设置复合组件配置接口的具体流程图，如图2所示，包括步骤S201至步骤S202。

S201：将多个原子组件按照预设规则构成复合组件。

S202：设置复合组件的配置接口，用于指定构成复合组件的原子组件的属性和功能。

其中，复合组件与原子组件类似，都可以在组件内部声明并根据用户需求实现一些功能和/或样式的配置，同时设置复合组件的配置接口，用于指定构成复合组件的原子组件的属性和功能，从而搭配完成不同所需要的功能。

在本申请实施例中，预设规则为本申请所定义的规则，用户编写配置文件时，要根据本申请所认可的规则进行编写，从而将多个原子组件构成复合组件。例如：假设页面的顶部为菜单栏区域，此菜单栏区域可以被划分成多个子页面，每个子页面上划分有各个功能区域能够用来放置组件，而用户可以使用组件所提供的配置信息对组件的功能和/或样式进行配置。

具体地，根据原子组件和复合组件组件类型的不同设置共有的配置接口。其中，共有的配置接口能够更加方便灵活的对组件的功能和/或样式进行修改。

下面列举一个实施例对上述方法进行详细说明，当然，还有其他实施例，本申请不以此实施例为限制。

例如设置了如图7所示的8*6ChartPatternFill复合组件示意图，即图表模式填充示意图，由上方一个PatternSelect即模式选择、下方左边的textBlock即文本块，其用于呈现只读的文本和下方右边的colorEditor即颜色编辑构成。假设用户想将默认排版8*6修改为3*2，并且指定所想要的6个图形，需要增加option请求和items方法在复合组件中，首先在复合组件配置接口中对items进行定义，然后需要在复合组件中增加支持ChartPatternFill的设置{if(this._options&&this._options.items&&this.ChartPatternFillselectEditor)this.ChartPatternFillSelectEditor.setItems(this._options.items);}，可以将基础公用的option继承到ChartPatternFill复合组件中，其中，由于基础公用的option中会有绑定值的信息和样式信息而大部分的组件都有这些功能，因此能够将基础公用的option继承到ChartPatternFill复合组件中。由于不同的复合组件之间还会有自己特殊的功能，因此，还可以将复合组件中的代码let svg2dArray =DefaultSVG2dArray();修改为let svg2dArray = DefaultSVG2dArray(this.options.items)，然后在配置文件中增加一段代码为items:[['1','2'],['3','4'],['5','6'],]，此时会出现修改后如图8所示的3*2ChartPatternFill复合组件示意图。还可以在复合组件中增加简单的option请求，例如不让用户设置Foreground即前景颜色，就可以把Foreground隐藏掉，此时用户就不能设置前景颜色了。复合组件的配置接口能够更加方便用户根据实际需求对页面进行修改。

图3为本申请实施例提供的拼接UI界面的具体流程图，如图3所示，包括步骤S301至步骤S302。

S301：使用渲染引擎解析配置文件。

其中，配置文件里面同时包含节点的层级结构和样式，渲染引擎拿到配置文件后递归生成节点树然后进行渲染。

S302：调用组件生命周期函数创建组件生命周期，根据配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置。

其中，生命周期是指一个组件从创建、运行再到销毁的整个过程，生命周期函数是指框架的内置函数，会伴随着组件的生命周期自动按次序执行。

S303：将文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。

其中，数据绑定是在应用程序UI与业务逻辑之间建立连接的过程，也可将数据绑定比喻成UI元素和数据源的桥梁，即能够通过数据绑定的方式实现后台数据和前台UI元素的关联。数据绑定提供了一种数据呈现与交互的简捷方式，使得数据与UI分离，并能使得数据源和UI元素之间自动进行更新和同步。

图4为本申请实施例提供的提供自定义组件具体流程图，如图4所示，包括步骤S401至步骤S402。

S401：提供自定义组件和应用程序接口。

S402：编写自定义组件的生命周期函数。

在本申请实施例中，还向用户提供了进行自定义组件的能力和应用程序接口，用户能够按照规范编写自定义组件的生命周期函数，渲染引擎在渲染用户自定义组件过程中调用用户提供的生命周期函数完成自定义组件的渲染以及数据的绑定与收集。

当执行UI操作对页面中的数据产生影响使得该数据产生变化时还包括：发送通知到对应的事件并触发原子组件和/或复合组件和/或自定义组件内部的更新逻辑，完成页面的更新。

具体地，数据的绑定与收集是通过在模板上配置文档对象模型绑定值的路径来完成的。

本申请实施例通过提供一种前端UI框架构建方法，摒弃构建一个个基础文档对象模型的传统方式，利用组件化的思想，将配置文件与渲染引擎以及数据绑定相结合，在配置文件中配置组件以及组件属性，通过渲染引擎解析配置文件并渲染，达到使用可描述性语言构建前端UI框架目的，提高了用户构建前端UI框架的效率，同时提供了很多实用的生命周期函数接口以及事件，增加了灵活性，大大降低了用户编写代码的难度。还通过各种原子组件相互拼接来构成功能更为强大和配置更为丰富的复合组件。用户还可以通过提供的应用程序接口声明自定义组件，同时可在自定义组件内部定义多种不同的配置接口，来满足不同的场景下的需要。

本申请实施例还提供了一种前端UI框架构建装置500，如图5所示，该装置包括：封装模块501、设置配置接口模块502和完成构建模块503。

封装模块501，用于将基础文档对象模型抽象封装为原子组件；其中，原子组件的内部声明有功能和/或样式配置。

设置配置接口模块502，用于设置原子组件的配置接口，用于指定基础文档对象模型的属性和功能。

完成构建模块503，用于在配置文件中配置配置接口完成UI框架和功能的构建；其中，配置方法为：根据基础文档对象模型的层级结构以及在页面中的元素节点位置进行配置。

本申请实施例提供的前端UI框架构建装置500还包括：构成模块，用于将多个原子组件按照预设规则构成复合组件；设置复合组件的配置接口，用于指定构成复合组件的原子组件的属性和功能。

本申请实施例提供的前端UI框架构建装置500还包括：设置共有的配置接口模块，用于根据原子组件和复合组件组件类型的不同设置共有的配置接口。

本申请实施例提供的前端UI框架构建装置500还包括：拼接模块，用于使用渲染引擎解析配置文件；调用组件生命周期函数创建组件生命周期，根据配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。

本申请实施例提供的前端UI框架构建装置500还包括：提供自定义组件模块，用于提供自定义组件和应用程序接口；编写自定义组件的生命周期函数。

本申请实施例提供的前端UI框架构建装置500还包括：当执行UI操作对页面中的数据产生影响使得该数据产生变化时，所述装置还包括：更新模块，用于发送通知到对应的事件并触发原子组件和/或复合组件和/或自定义组件内部的更新逻辑，完成页面的更新。

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

如图6所示，本申请实施例还提供了一种前端UI框架构建服务器，该服务器包括存储器601和处理器602；存储器601用于存储计算机可执行指令；处理器602用于执行计算机可执行指令，以实现本申请实施例以上所述的前端UI框架构建方法。

本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质存储有可执行指令，计算机执行可执行指令时能够实现以实现本申请实施例以上所述的前端UI框架构建方法。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的硬件的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，也可以通过数据迁移的实施过程中体现出来。该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，移动终端，服务器，或者网络设备等）执行本申请实施例所述的方法。

本说明书中的各个实施方式采用递进的方式描述，各个实施方式之间相同或相似的部分互相参见即可，每个实施方式重点说明的都是与其他实施方式的不同之处。本申请的全部或者部分可用于众多通用或专用的计算机系统环境或配置中。

以上实施例仅用以说明本申请的技术方案，而非对本申请限制；尽管参照前述实施例对本申请进行了详细的说明，本领域普通技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请技术方案的范围。

Claims (9)

1.一种前端UI框架构建方法，其特征在于，包括：

将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；

设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；

在配置文件中，根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置配置所述配置接口，完成UI框架和功能的构建。

2.根据权利要求1所述的方法，其特征在于，还包括：

将多个所述原子组件按照预设规则构成复合组件；

设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。

3.根据权利要求2所述的方法，其特征在于，还包括：

根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。

4.根据权利要求1所述的方法，其特征在于，还包括：

使用渲染引擎解析所述配置文件；

调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；

将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。

5.根据权利要求4所述的方法，其特征在于，还包括：

提供自定义组件和应用程序接口；

编写所述自定义组件的生命周期函数。

6.根据权利要求5所述的方法，其特征在于，当执行UI操作对页面中的数据产生影响使得该数据产生变化时还包括：

发送通知到对应的事件并触发所述原子组件和/或所述复合组件和/或所述自定义组件内部的更新逻辑，完成页面的更新。

7.一种前端UI框架构建装置，其特征在于，包括：

封装模块，用于将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；

设置配置接口模块，用于设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；

完成构建模块，用于在配置文件中配置所述配置接口完成UI框架和功能的构建；其中，所述配置方法为：根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置进行配置。

8.一种前端UI框架构建服务器，其特征在于，包括存储器和处理器；

所述存储器用于存储计算机可执行指令；

所述处理器用于执行所述计算机可执行指令，以实现权利要求1-6任一项所述的方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有可执行指令，计算机执行所述可执行指令时能够实现如权利要求1-6任一项所述的方法。

Images