前端原型调试方法及装置

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

进一步地，还包括：

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

第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的前端原型调试方法的步骤。

第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的前端原型调试方法的步骤。

由上述技术方案可知，本申请提供一种前端原型调试方法及装置，通过实时监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息，并在一预览区域渲染和展示所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接而成的渐进式UI组件，使得开发人员可以实时预览代码修改后的效果，不需要再通过启动一个完整的前端工程项目进行原型验证，节约了开发成本，能够有效提高前端原型的调试验证效率。

附图说明

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

图1为本申请实施例中的前端原型调试方法的流程示意图之一；

图2为本申请实施例中的前端原型调试方法的流程示意图之二；

图3为本申请实施例中的前端原型调试装置的结构图之一；

图4为本申请实施例中的前端原型调试装置的结构图之二；

图5为本申请实施例中的前端原型调试装置的结构图之三；

图6为本申请一具体实施例中的前端原型调试装置的界面示意图；

图7为本申请实施例中的电子设备的结构示意图。

具体实施方式

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

考虑到现有技术中使用完整工程项目进行原型验证的方式需要通过启动完整Vue工程的方式进行原型验证，验证效率低下的问题，本申请提供一种前端原型调试方法及装置，通过实时监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息，并在一预览区域渲染和展示所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接而成的渐进式UI组件，使得开发人员可以实时预览代码修改后的效果，不需要再通过启动一个完整的前端工程项目进行原型验证，节约了开发成本，能够有效提高前端原型的调试验证效率。

为了能够有效提高前端原型的调试验证效率，本申请提供一种前端原型调试方法的实施例，参见图1和图6，所述前端原型调试方法具体包含有如下内容：

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

可选的，所述标签信息例如可以为html文本信息，所述动态脚本信息例如可以为javascript脚本信息，所述层叠样式表信息例如可以为css代码信息。

可选的，本申请可以在一客户端软件界面中预先设置一编辑区域，以供用户在此编辑区域内进行信息输入/代码编辑。

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

可选的，所述渐进式UI组件例如可以为一种Vue组件，其由template部分、script部分和style部分构成。

可选的，本申请可以根据一设定代码重构规则将所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接为完整的Vue组件代码，并将拼接好的Vue组件代码挂载至预览区域进行页面渲染和显示。

从上述描述可知，本申请实施例提供的前端原型调试方法，能够通过实时监听并获取用户在一编辑区域内输入的标签信息、动态脚本信息以及层叠样式表信息，并在一预览区域渲染和展示所述标签信息、所述动态脚本信息以及所述层叠样式表信息拼接而成的渐进式UI组件，使得开发人员可以实时预览代码修改后的效果，不需要再通过启动一个完整的前端工程项目进行原型验证，节约了开发成本，能够有效提高前端原型的调试验证效率。

为了能够将用户输入的标签信息、动态脚本信息以及层叠样式表信息准确拼接为渐进式UI组件的代码，在本申请的前端原型调试方法的一实施例中，参见图2，上述步骤S102还可以具体包含如下内容：

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

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

可以理解的是，当初次打开本申请的系统或编辑区域代码有修改时，本申请需要将编辑区域代码传递至预览区域并触发重绘更新展示效果。重绘的执行流程可以为：首先，清空预览区域中的现有代码，由于Vue的执行原理是将组件内容挂载至页面某个元素节点(DOM元素)内，因此通过清空该DOM元素达到清空预览区域的目的。

可选的，首先，在清空预览区域后，本申请可以进一步的挂载css代码，同时，在不用到webpack进行Vue组件的编译的情况下，本申请可以对css代码进行单独处理，例如，通过