本申请公开了一种前端UI框架构建方法及装置，该方法包括：将基础文档对象模型抽象封装为原子组件；其中，原子组件的内部声明有功能和/或样式配置；设置原子组件的配置接口，用于指定基础文档对象模型的属性和功能；在配置文件中，根据基础文档对象模型的层级结构以及在页面中的元素节点位置配置配置接口，完成UI框架和功能的构建。本申请公开的方法解决了现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。效率低下的问题。效率低下的问题。
【技术实现步骤摘要】
前端UI框架构建方法及装置
[0001]本申请涉及前端开发
，尤其涉及一种前端UI框架构建方法及装置。
技术介绍
[0002]UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，通常包括平面设计，网页设计以及移动界面设计。
[0003]现有的前端UI框架的搭建方案是通过手动创建多个文档对象模型，并单独设置各个文档对象模型的属性和其他配置，再依据各个文档对象模型的物理层次关系将其拼接成最终的UI界面。在文档对象模型创建完成之后，数据从上到下进行绑定以及从下到上完成收集。
[0004]但是，UI操作会对页面中的数据产生影响，从而进一步导致页面发生变化，并且这些操作用户都要手动编写代码进行实现。现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下。
技术实现思路
[0005]在本申请实施例中，通过提供一种前端UI框架构建方法，解决了现有的前端UI框架的搭建方案在对组件进行扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。
[0006]第一方面，本申请实施例提供了一种前端UI框架构建方法，该方法包括：将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；在配置文件中，根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置配置所述配置接口，完成UI框架和功能的构建。
[0007]结合第一方面，在一种可能的实现方式中，所述方法还包括：将多个所述原子组件按照第一预设规则构成复合组件；设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。
[0008]结合第一方面，在一种可能的实现方式中，所述方法还包括：根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。
[0009]结合第一方面，在一种可能的实现方式中，所述方法还包括：使用渲染引擎解析所述配置文件；调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。
[0010]结合第一方面，在一种可能的实现方式中，所述方法还包括：提供自定义组件和应用程序接口；编写所述自定义组件的生命周期函数。
[0011]结合第一方面，在一种可能的实现方式中，当执行UI操作对页面中的数据产生影响使得该数据产生变化时，所述方法还包括：发送通知到对应的事件并触发所述原子组件
和/或所述复合组件和/或所述自定义组件内部的更新逻辑，完成页面的更新。
[0012]第二方面，本申请实施例提供了一种前端UI框架构建装置，该装置包括：封装模块，用于将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；设置配置接口模块，用于设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；完成构建模块，用于在配置文件中配置所述配置接口完成UI框架和功能的构建；其中，所述配置方法为：根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置进行配置。
[0013]结合第二方面，在一种可能的实现方式中，所述装置还包括：构成模块，用于将多个所述原子组件按照预设规则构成复合组件；设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。
[0014]结合第二方面，在一种可能的实现方式中，所述装置还包括：设置共有的配置接口模块，用于根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。
[0015]结合第二方面，在一种可能的实现方式中，所述装置还包括：拼接模块，用于使用渲染引擎解析所述配置文件；调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。
[0016]结合第二方面，在一种可能的实现方式中，所述装置还包括：提供自定义组件模块，用于提供自定义组件和应用程序接口；编写所述自定义组件的生命周期函数。
[0017]结合第二方面，在一种可能的实现方式中，当执行UI操作对页面中的数据产生影响使得该数据产生变化时，所述装置还包括：更新模块，用于发送通知到对应的事件并触发所述原子组件和/或所述复合组件和/或所述自定义组件内部的更新逻辑，完成页面的更新。
[0018]第三方面，本申请实施例提供了一种前端UI框架构建服务器，包括存储器和处理器；所述存储器用于存储计算机可执行指令；所述处理器用于执行所述计算机可执行指令，以实现第一方面或第一方面任一种可能的实现方式所述的方法。
[0019]第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有可执行指令，计算机执行所述可执行指令时能够实现以实现第一方面或第一方面任一种可能的实现方式所述的方法。
[0020]本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果：本申请实施例提供了一种前端UI框架构建方法，使用组件化思想，通过声明不同的组件并提供灵活的配置接口，使用可描述性语言构成配置文件，最后使用渲染引擎解析配置文件并生成最终的文档对象模型结构。摒弃了现有生成复杂UI框架时，需要手动生成每一个文档对象模型的方案。本申请实施例所有的配置文件的配置都是可以复用的，解决了现有技术不可复用，重复性高的问题。同时，由于配置文件的层次结构与最终的文档对象模型结构是一一对应的，因此可以直接从配置文件的层次结构上反映出最终的结果，并且配置文件中的每一部分意义都较为清晰，可读性高，解决了现有技术对于组件扩展时不能清晰快速地找到合适的时机，需要从头开始阅读代码，效率低下的问题。本申请实施例还有着扩展性极高的优点，通过各种原子组件相互拼接来构成功能更为强大，配置更为丰富的复合组件。
附图说明
[0021]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对本专利技术实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0022]图1为本申请实施例提供的前端UI框架构建方法的流程图；图2为本申请实施例提供的设置复合组件配置接口的具体流程图；图3为本申请实施例提供的拼接UI界面的具体流程图；图4为本申请实施例提供的提供自定义组件的具体流程图；图5为本申请实施例提供的前端UI框架构建装置的示意图；图6为本申请实施例提供的前端UI框架构建服务器的示意图；图7为本申请实施例提供的复合组件示意图；图8为本申请实施例提供的修改后复合组件示意图。
具体实施方式
[0023]下面将结合本专利技术实施例中的附图，对本专利技术本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种前端UI框架构建方法，其特征在于，包括：将基础文档对象模型抽象封装为原子组件；其中，所述原子组件的内部声明有功能和/或样式配置；设置所述原子组件的配置接口，用于指定所述基础文档对象模型的属性和功能；在配置文件中，根据所述基础文档对象模型的层级结构以及在页面中的元素节点位置配置所述配置接口，完成UI框架和功能的构建。2.根据权利要求1所述的方法，其特征在于，还包括：将多个所述原子组件按照预设规则构成复合组件；设置所述复合组件的配置接口，用于指定构成所述复合组件的所述原子组件的属性和功能。3.根据权利要求2所述的方法，其特征在于，还包括：根据所述原子组件和所述复合组件组件类型的不同设置共有的配置接口。4.根据权利要求1所述的方法，其特征在于，还包括：使用渲染引擎解析所述配置文件；调用组件生命周期函数创建组件生命周期，根据所述配置文件的层级结构创建文档对象模型，并进行功能和/或样式配置；将所述文档对象模型与数据绑定模块结合，实现数据的绑定和收集以及UI交互，拼接成UI界面。5.根据权利要求4所述的方法，其特征在于，还包括：提供自定义组件和应用程序接口；编写所述自定义组件的生命周期函数。6.根...
【专利技术属性】
技术研发人员：翟晨辉，
申请(专利权)人：西安葡萄城软件有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。