[发明专利]基于组件化的前端页面搭建方法、装置、设备及存储介质

说明书

本发明涉及研发管理领域，公开了一种基于组件化的前端页面搭建方法、装置、设备及存储介质，用于解决目前在不同框架中组件无法迁移使用的问题。所述方法包括：接收终端发送的页面搭建请求并对页面搭建请求进行解析，得到组件描述规则；根据组件描述规则构建多个候选组件；基于各候选组件创建组件描述文件集并将组件描述文件集发送至数据库；接收终端发送的组件获取指令并根据组件获取指令从组件描述文件集中下载目标组件描述文件；根据目标组件描述文件确定多个目标组件并将各目标组件注册至组件管理器；从组件管理器中调用各目标组件进行页面搭建并根据初始页面的框架类型确定渲染函数，采用渲染函数对各目标组件进行渲染，得到目标页面。

技术领域

本发明涉及研发管理领域，尤其涉及一种基于组件化的前端页面搭建方法、装置、设备及存储介质。

背景技术

随着前端开发的日趋复杂，组件化开发便应运而生，早些年流行的jQuery库就已经有了组件化的思想，当前盛行的前端三大框架，即React、Vue和Angular，都开发实现了各自框架的组件化系统，这些方案都已经被许多厂商广泛地使用和实践，能够很好地服务于实际的业务。

但是仍然存在一些缺陷和不足。三大框架的组件化方案中最大的缺陷是对框架过分依赖，即基于某个框架开发好的组件库，无法便捷地迁移给使用其他框架的系统使用。

发明内容

本发明的主要目的在于解决在不同的前端框架中组件无法迁移使用的问题。

本发明第一方面提供了一种基于组件化的前端页面搭建方法，包括：接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则；根据所述组件描述规则构建用于页面搭建的多个候选组件；基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库；接收终端发送的组件获取指令，根据所述组件获取指令从所述预置数据库的所述组件描述文件集中下载对应的目标组件描述文件；根据所述目标组件描述文件确定对应的多个目标组件，并将所述多个目标组件注册至预置初始页面的组件管理器；从所述组件管理器中调用所述多个目标组件进行页面搭建，并根据所述初始页面的框架类型确定对应的渲染函数，采用所述渲染函数对所述多个目标组件进行渲染，得到目标页面。

可选的，在本发明第一方面的第一种实现方式中，在所述接收终端发送的页面搭建请求并对所述页面搭建请求进行解析，得到对应的组件描述规则之后，在所述根据所述组件描述规则构建用于页面搭建的多个候选组件之前，还包括：对所述页面搭建请求进行信息扫描，得到待获取的目标静态资源文件；利用所述目标静态资源文件进行运行环境搭建，并生成对应的初始页面。

可选的，在本发明第一方面的第二种实现方式中，所述根据所述组件描述规则构建用于页面搭建的多个候选组件包括：读取所述组件描述规则，得到结构描述规则、样式描述规则及数据描述规则；根据所述结构描述规则，生成对应的第一JSON格式文件，所述第一JSON格式文件用于定义组件的属性及类型；根据所述样式描述规则，生成对应的第二JSON格式文件，所述第二JSON格式文件用于定义组件的尺寸及形状；根据所述数据描述规则，生成对应的组件基类文件，所述组件基类文件用于实现组件内部逻辑；将所述第一JSON格式文件、第二JSON格式文件及所述组件基类文件拼接为整合文件，并根据所述整合文件生成所述多个候选组件。

可选的，在本发明第一方面的第三种实现方式中，所述基于所述多个候选组件创建对应的组件描述文件集，并将所述组件描述文件集发送至预置数据库包括：读取所述多个候选组件，获取所述多个候选组件的组件信息及组件操作类型信息；基于预设的自动化脚本，将所述组件信息及所述组件操作类型信息添加至预置描述文件，生成多个候选组件描述文件；将所述多个候选组件描述文件合并为组件描述文件集，并将所述组件描述文件集传输至预置数据库中。