前端原型调试方法及装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113110828A(43)申请公布日2021.07.13(21)申请号202110417154.0(22)申请日2021.04.19(71)申请人中国工商银行股份有限公司地址100140北京市西城区复兴门内大街55号(72)发明人刘泱杨再同詹娇淑康玉玲(74)专利代理机构北京三友知识产权代理有限公司11127代理人任默闻王涛(51)Int.Cl.G06F8/20(2018.01)G06F8/34(2018.01)G06F8/38(2018.01)G06F8/41(2018.01)权利要求书2页说明书8页附图3页(54)发明名称前端原型调试方法及装置(57)摘要本申请实施例提供一种前端原型调试方法及装置，也可用于金融领域，方法包括：监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件；本申请能够有效提高前端原型的调试验证效率。CN113110828ACN113110828A权利要求书1/2页1.一种前端原型调试方法，其特征在于，所述方法包括：监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件。2.根据权利要求1所述的前端原型调试方法，其特征在于，所述根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，包括：通过设定标签将所述层叠样式表信息进行包装，并将经过所述包装后的层叠样式表信息挂载至一初始页面元素节点；根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，并将完成所述拼装操作后的渐进式UI组件挂载至一目标页面元素节点。3.根据权利要求2所述的前端原型调试方法，其特征在于，所述根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，包括：在所述初始页面元素节点上通过将所述动态脚本信息转换为对象，并将所述标签信息设定为所述对象的模板属性进行渐进式UI组件拼装操作。4.根据权利要求1所述的前端原型调试方法，其特征在于，在所述监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息之前，包括：在编辑区域内加载预设样例代码并在预览区域渲染和展示与所述样例代码对应的渐进式UI组件。5.一种前端原型调试装置，其特征在于，包括：调试编辑模块，用于监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息；调试预览模块，用于根据设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为一渐进式UI组件，并在一预览区域渲染和展示所述渐进式UI组件。6.根据权利要求5所述的前端原型调试装置，其特征在于，所述调试预览模块包括：元素节点挂载单元，用于通过设定标签将所述层叠样式表信息进行包装，并将经过所述包装后的层叠样式表信息挂载至一初始页面元素节点；组件代码拼接单元，用于根据所述标签信息和所述动态脚本信息在所述初始页面元素节点上进行渐进式UI组件拼装操作，并将完成所述拼装操作后的渐进式UI组件挂载至一目标页面元素节点。7.根据权利要求6所述的前端原型调试装置，其特征在于，所述组件代码拼接单元包括：渐进式UI组件拼装子单元，用于在所述初始页面元素节点上通过将所述动态脚本信息转换为对象，并将所述标签信息设定为所述对象的模板属性进行渐进式UI组件拼装操作。8.根据权利要求5所述的前端原型调试装置，其特征在于，还包括：默认加载单元，用于在编辑区域内加载预设样例代码并在预览区域渲染和展示与所述样例代码对应的渐进式UI组件。2CN113110828A权利要求书2/2页9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至4任一项所述的前端原型调试方法的步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至4任一项所述的前端原型调试方法的步骤。3CN113110828A说明书1/8页前端原型调试方法及装置技术领域[0001]本申请涉及前端开发领域，也可用于金融领域，具体涉及一种前端原型调试方法及装置。背景技术[0002]在开发基于Vue的前端项目时，通常以完整工程项目的形式进行。由于工程化的需要，完整的工程项目不仅要求本地有相应的开发环境，而且需要安装依赖和较长的启动