[发明专利]前端原型调试方法及装置

说明书

本申请实施例提供一种前端原型调试方法及装置，也可用于金融领域，方法包括：监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件；本申请能够有效提高前端原型的调试验证效率。

技术领域

本申请涉及前端开发领域，也可用于金融领域，具体涉及一种前端原型调试方法及装置。

背景技术

在开发基于Vue的前端项目时，通常以完整工程项目的形式进行。由于工程化的需要，完整的工程项目不仅要求本地有相应的开发环境，而且需要安装依赖和较长的启动编译时间，同时热更新的时间会随着项目规模而增加。

在原型验证阶段，通常只需要有一个能够执行Vue单文件组件的环境，而使用完整工程项目进行原型验证的方式需要通过启动完整Vue工程的方式进行原型验证，验证效率低下。

发明内容

针对现有技术中的问题，本申请提供一种前端原型调试方法及装置，能够有效提高前端原型的调试验证效率。

为了解决上述问题中的至少一个，本申请提供以下技术方案：

第一方面，本申请提供一种前端原型调试方法，包括：

监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；

根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件。

进一步地，所述根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，包括：

通过设定标签将所述层叠样式表信息进行包装，并将经过所述包装后的层叠样式表信息挂载至一初始页面元素节点；

根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，并将完成所述拼装操作后的渐进式UI组件挂载至一目标页面元素节点。

进一步地，所述根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，包括：

在所述初始页面元素节点上通过将所述动态脚本信息转换为对象，并将所述标签信息设定为所述对象的模板属性进行渐进式UI组件拼装操作。

进一步地，在所述监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息之前，包括：

在编辑区域内加载预设样例代码并在预览区域渲染和展示与所述样例代码对应的渐进式UI组件。

第二方面，本申请提供一种前端原型调试装置，包括：

调试编辑模块，用于监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；

调试预览模块，用于根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件。

进一步地，所述调试预览模块包括：

元素节点挂载单元，用于通过设定标签将所述层叠样式表信息进行包装，并将经过所述包装后的层叠样式表信息挂载至一初始页面元素节点；

组件代码拼接单元，用于根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，并将完成所述拼装操作后的渐进式UI组件挂载至一目标页面元素节点。

进一步地，所述组件代码拼接单元包括：