一种前端控件库展示代码生成方法技术

本发明专利技术公开了一种前端控件库展示代码生成方法，采用代码分析的方式检测出控件库中控件存在的可能存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码，对控件的内部属性设置及其对应的视觉效果进行展示，以供测试人员进行测试。利用本发明专利技术，不需要文档与人工信息，而是通过代码分析的方法自动检测代码中出现的可能无效代码以供进一步优化，并抽取待展示控件其他的属性与事件等信息，结合预定义的模板代码，生成控件展示代码，从而加速对控件功能的测试。从而加速对控件功能的测试。从而加速对控件功能的测试。

【技术实现步骤摘要】
一种前端控件库展示代码生成方法


[0001]本专利技术涉及前端控件代码检测领域，尤其是涉及一种前端控件库展示代码生成方法。

技术介绍

[0002]控件库是一个非常简单直接的可视化控件仓库，可以将这里列出的控件拖拽到场景编辑器或层级管理器中，快速完成预设控件的创建。
[0003]如公开号为CN113590585A的中国专利文献公开了一种控件库，包括多个控件，每个所述控件均具有唯一的标识码，每个控件具有相应的样式、属性、事件和数据结构。
[0004]公开号为CN113326044A的中国专利文献公开了一种基于控件库的开发方法，在设计界面，新建实时看板或通过文件形式导入导出实时看板；通过设计界面的可视化控件库搭建看板内容，且随时都可以依据需求调整看板内容；选中控件，可对该控件进行相关属性的配置；在运行界面，通过拖动建立资源和控件的映射关系，实现控件显示实时数据或赋予控件功能；双击控件标题弹出抽屉可以查看或修改与该控件绑定的资源信息。
[0005]编写前端控件库的过程中与结束后，为了对控件库中控件的视觉效果进行充分的测试，常常需要针对该控件库中的控件编写使用案例，人工编写的测试案例不仅过程繁琐，并且容易发生集中于单个功能，而对整个控件的其他功能产生遗漏的情况。并且在实际案例中，常常可以发现，代码由于经过多轮迭代与增加功能，出现许多已经废弃的实际无效的属性与事件声明。

技术实现思路

[0006]本专利技术提供了一种前端控件库展示代码生成方法，不需要文档与人工信息，而是通过代码分析的方法自动检测代码中出现的可能无效代码以供进一步优化，并抽取待展示控件其他的属性与事件等信息，结合预定义的模板代码，生成控件展示代码，从而加速对控件功能的测试。
[0007]一种前端控件库展示代码生成方法，包括如下步骤：
[0008](1)通过代码分析，获取待展示控件库所在的命名空间中所有类的元数据，对这些类的元数据进行筛选与处理，获得需要检测的自定义控件类的名称与其他信息，输出至表格一；
[0009](2)读取表格一中的控件信息，抽取其属性与事件信息，对抽取的信息进行筛选和处理，检测其自定义属性与事件是否在除定义外的地方被使用；
[0010]将未被使用的属性与事件被视为可能的无效代码，输出至表格二供测试人员进一步检查；
[0011](3)对步骤(2)中检测有效的属性与事件，根据模板代码的具体设置进一步抽取其具体信息进行处理，获取的待展示的属性与事件信息，输出至表格三；
[0012](4)读取表格一和表格三中的信息作为环境信息，结合预定义的模板代码，使用模
板引擎自动生成主界面与控件展示界面的逻辑与展示代码，形成完整的前端控件库展示项目。
[0013]本专利技术采用代码分析的方式检测出控件库中控件存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码。
[0014]步骤(1)中，其他信息指的是其他对生成代码有影响的信息，包括：控件的类型信息、控件之间的相互关系；
[0015]其中，控件的类型信息通过控件继承的基类与接口信息进行分类，控件之间的相互关系通过控件的名称与继承关系判断。
[0016]利用控件继承的基类与接口信息将控件进行分类，便于根据不同的类型采取不同形式的模板展示，相对于单独使用的控件，列表展示类控件可以增加其中包含的数据源以及一些对数据的操作。
[0017]通过控件的名称与继承关系判断控件的关系，主控件与其他将多个控件在模板中一起展示。如窗口控件与对应的窗口按钮控件，选项卡容器控件与选项卡控件一起展示。
[0018]步骤(1)中，对这些类的元数据进行筛选与处理包括以该类本身的信息进行筛选和以该类的祖先信息进行筛选；
[0019]其中，以该类本身的信息进行筛选包含：去除虚拟类；以该类的祖先信息进行筛选包含：以该类是否继承自通用控件基类判断其是否为待展示控件，以该类是否继承自呈现一组项的控件将其区分为容器类控件和普通控件。
[0020]经过筛选与处理后，将以表格的形式输出提取的待展示控件信息，让用户可以根据需要更改表格，自定义需要展示的控件及其他信息。
[0021]步骤(2)中，对对抽取的信息进行筛选和处理包括：
[0022]对属性和事件的声明类进行限制，默认只检测声明于本类的属性与事件；对于继承于其他待检测类的属性与事件进行标注，用于后续无效代码的检测。
[0023]检测其自定义属性与事件是否在除定义外的地方被使用时，具体检测其是否在本控件的逻辑控制代码与样式设置代码、本控件子类的逻辑控制代码与样式设置代码中被使用。好的前端控件设计不应保存与展示完全无关的信息，因此未被使用的属性与事件声明会被做可能无效代码，需要测试人员进行进一步检测。
[0024]步骤(3)中，进一步抽取其具体信息进行处理包括：
[0025]加入继承自定义基类的有效属性与事件；加入通用展示属性，包含长、宽、背景色；根据具体展示需要对属性与事件的类型进行筛选获得待展示属性。
[0026]获取的待展示的属性与事件信息包括属性的类型、属性的默认值、事件的事件处理器类型、事件处理函数参数等。用户可以根据需要更改表格，自定义需要展示控件的属性与事件。
[0027]步骤(4)中，预定义的模板代码包括主界面与控件展示界面，其中，主界面负责总体介绍与导航到具体的控件展示界面，控件展示界面负责展示具体控件的样式与功能；
[0028]控件展示界面包括控件、属性控制和事件控制三部分，属性控制部分通过调节属性来控制控件的样式与功能逻辑，事件控制部分通过加入和去除事件显示按钮与事件触发显示部分来展示事件的触发时机。
[0029]与现有技术相比，本专利技术具有以下有益效果：
[0030]1、本专利技术基于前端控件库代码中常见的问题与测试的需求，自动检测自定义控件中可能无效的属性与事件声明供测试人员进行优化，并将代码分析中抽取的元数据与模板方式结合自动生成代码展示控件的视觉效果，供测试人员使用。
[0031]2、本专利技术充分满足用户的自定义的需求。步骤(1)，(3)中将信息以表格的形式进行存取，可以方便用户修改所需要展示的内容，步骤(4)中定义的模板代码可依据充分展示样式和功能的设计原则由用户自定义具体的展示方法。
附图说明
[0032]图1为本专利技术一种前端控件库展示代码生成方法的流程图。
具体实施方式
[0033]下面结合附图和实施例对本专利技术做进一步详细描述，需要指出的是，以下所述实施例旨在便于对本专利技术的理解，而对其不起任何限定作用。
[0034]一种前端控件库展示代码生成方法，采用代码分析的方式检测出控件库中控件存在的可能存在的无用的属性与事件声明以供优化，并将其余的属性与事件信息结合模板生成的方式，自动化完成控件库的展示代码，对控件的内部属性设置及其对应的视觉效果进行展示，以供测试人员进行测试。具体的，如图1所示，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端控件库展示代码生成方法，其特征在于，包括如下步骤：(1)通过代码分析，获取待展示控件库所在的命名空间中所有类的元数据，对这些类的元数据进行筛选与处理，获得需要检测的自定义控件类的名称与其他信息，输出至表格一；(2)读取表格一中的控件信息，抽取其属性与事件信息，对抽取的信息进行筛选和处理，检测其自定义属性与事件是否在除定义外的地方被使用；将未被使用的属性与事件被视为可能的无效代码，输出至表格二供测试人员进一步检查；(3)对步骤(2)中检测有效的属性与事件，根据模板代码的具体设置进一步抽取其具体信息进行处理，获取的待展示的属性与事件信息，输出至表格三；(4)读取表格一和表格三中的信息作为环境信息，结合预定义的模板代码，使用模板引擎自动生成主界面与控件展示界面的逻辑与展示代码，形成完整的前端控件库展示项目。2.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(1)中，其他信息指的是其他对生成代码有影响的信息，包括：控件的类型信息、控件之间的相互关系；其中，控件的类型信息通过控件继承的基类与接口信息进行分类，控件之间的相互关系通过控件的名称与继承关系判断。3.根据权利要求1所述的前端控件库展示代码生成方法，其特征在于，步骤(1)中，对这些类的元数据进行筛选与处理包括以该类本身的信息进行筛选和以该类的祖先信息进行筛选；其中，以该类本身的信息进行筛选包含：去除虚拟类；以该类的祖先信息进行筛选包含：以该类是否继承自通用控件基类判断其是否为待展示控件，以该类是否继承自呈现一组项的控件将其区分为容器...

【专利技术属性】
技术研发人员：李莹，张心怡，邓水光，尹建伟，
申请(专利权)人：浙江大学，
类型：发明
国别省市：