组件的生成方法和装置与流程

本发明涉及信息处理领域，尤指一种组件的生成方法和装置。

背景技术：

随着业务多样性的开展，越来越多的客户对等待开发的项目有定制化的要求。对于项目开发者，客户有自己的定制化功能，彼此之间也有很多相似的功能。在这种开发模式下，同样技术栈的可以复制代码略作改动就可以实现新的功能，不同技术栈就得重新开发功能，这就导致了很多的冗余的代码并且增加了开发的成本。

为了解决该问题，架构师安排研发人员将自己负责的项目的代码全部迁移到一套新的前端开发环境中。在迁移的过程，由于个人负责的项目不同，彼此在有相似的功能时，如果有时没有来得及改造现有的组件，采用了直接复制、粘贴代码略作修改的模式，导致现有的项目开发环境中冗余的代码更多，某个相似功能组件的一处设计优化需要多个人改多处代码，造成了时间的浪费。

在项目逐步稳定，功能需求逐步完善之后我们就需要考虑对代码库的优化与重构，尽量编写清晰可维护的代码。好的代码往往是在合理范围内尽可能地避免重复代码，遵循单一职责与singlesourceoftruth等原则。

随着业务急速增长，同类客户想要的相似功能越来越多，在合理控制开发成本的前提下，如何提取相同代码满足多个相似功能来使用，是亟待解决的问题。

技术实现要素：

为了解决上述技术问题，本发明提供了一种组件的生成方法和装置，能够降低项目中代码的重复率。

为了达到本发明目的，本发明提供了一种组件的生成方法，包括：

获取代码，其中所述代码是从预先存储的多个代码段中选取的符合预先设置的重复代码判断策略的代码；

对所述代码中内容进行识别，得到所述代码所实现的功能类型；

按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码；

利用所述目标代码生成组件信息。

在一个示例性实施例中，所述代码所实现的功能类型包括如下至少一种：

只包含超文本标记语言html标签；

只包含数据处理方法；

只包含返回html标签的方法；

只包含事件方法；

包含html和方法。

在一个示例性实施例中，在所述代码只包括html标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

获取所述代码中第一个html标签的元素的起始位置以及所述代码中html标签的元素的结束位置；

根据所述起始位置和结束位置，对所述代码执行代码抽取操作，得到代码段；

判断抽取出的代码段是否符合预先设置的html标签元素闭合判断条件，得到判断结果；

如果所述判断结果为符合，则将抽取的代码段套入预先存储的html标签调用语句，得到所述目标代码；否则，将抽取的代码段中未闭合的代码部分补上对应的闭合元素标签，再将抽取的代码段套入预先存储的html标签调用语句，得到所述目标代码。

在一个示例性实施例中，在所述代码只包括html标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，所述方法还包括：

如果该html标签中还包括事件方法和/或处理函数的方法，则获取所述方法的方法名；

根据所述方法名，从所述代码所属的源文件中读取所述方法对应的代码段。

在一个示例性实施例中，在所述代码只包括数据处理方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

计算所述代码中方法的内容与所述代码所属的源文件的占比信息；

将得到的占比信息与预先设置的阈值进行比较，得到比较结果；

如果所述比较结果为大于所述阈值，则从所述源文件取出所述方法的代码段作为目标代码。

在一个示例性实施例中，在所述代码只包括返回html标签的方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

计算所述代码中方法的内容与所述代码所属的源文件的占比信息；

将得到的占比信息与预先设置的阈值进行比较，得到比较结果；

如果所述比较结果为大于所述阈值，获取所述方法的方法名；

根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；

从所述源文件中读取所述最小标签单位的代码段作为目标代码。

在一个示例性实施例中，在所述代码只包括只包含事件方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

获取所述方法的方法名；

根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；

从所述源文件中读取所述最小标签单位的代码段作为目标代码。

在一个示例性实施例中，所述只包括只包含事件方法的代码是通过如下方式判断的，包括：

如果所述代码包括调用父组件的方法，在所述方法的函数包括this.props时，或者，在所述方法的参数来自this.props时，确定所述代码为包含事件方法；

如果所述代码包括调用子组件的方法，在所述方法使用预设代码时，确定所述代码包含事件方法，其中所述预设代码为this.setstate({})。

在一个示例性实施例中，在所述代码包含html和方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

在得到所述代码中方法对应的代码段后，将所述方法对应的代码段与html标签中的所有方法进行对比去重，得到对比结果；

如果所述对比结果为重复，则只保留html中的方法；

如果所述对比结果为不重复，则判断该方法是否为数据处理方法或者事件方法或者返回html标签的方法；

根据判断确定的方法，分别按照各自的抽离策略进行抽离。

为了达到本发明目的，本发明提供了一种组件的生成装置，包括处理器和存储器，其中所述存储器存储有计算机程序，所述处理器用以调用所述存储器中的计算机程序以实现上文任一所述的方法。

本发明实施例提供的技术方案，在获取代码后，对所述代码中内容进行识别，得到所述代码所实现的功能类型，再按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，利用所述目标代码生成组件信息，减少项目中代码的重复率，减少代码量，减少代码加载的时间，从而达到提高用户体验的效果。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明技术方案的进一步理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本发明的技术方案，并不构成对本发明技术方案的限制。

图1为本发明提供的组件的生成方法的流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1为本发明提供的组件的生成方法的流程图。图1所示方法包括：

步骤101、获取代码，其中所述代码是从预先存储的多个代码段中选取的符合预先设置的重复代码判断策略的代码；

在一个示例性实施例中，利用查重插件jscpd或jsinspect遍历查询src/components里面所有组件，获取所有具有相似度的原始代码。

步骤102、对所述代码中内容进行识别，得到所述代码所实现的功能类型；

在一个示例性实施例中，所述代码所实现的功能类型包括如下至少一种：

只包含超文本标记语言(hypertextmarkuplanguage，html)标签；

只包含数据处理方法；

只包含返回html标签的方法；

只包含事件方法；

包含html和方法。

在本示例性实施例中，可以根据代码的编写格式，识别代码要实现的功能类型。

步骤103、按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码；

在一个示例性实施例中，根据代码所要实现的功能类型，预先存储不同功能类型对应的代码抽取策略，在对代码进行抽取操作时，确定该代码要使用的代码抽取策略，从所述代码中得到抽取目标代码。

步骤104、利用所述目标代码生成组件信息。

在一个示例性实施例中，在得到目标代码后，利用组件的预设的组件生成模板，利用该模板以及目标代码生成组件。

本发明实施例提供的方法，在获取代码后，对所述代码中内容进行识别，得到所述代码所实现的功能类型，再按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，利用所述目标代码生成组件信息，减少项目中代码的重复率，减少代码量，减少代码加载的时间，从而达到提高用户体验的效果。

下面对本发明提供的方法作进一步说明：

在一个示例性实施例中，在所述代码只包括html标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

获取所述代码中第一个html标签的元素的起始位置以及所述代码中html标签的元素的结束位置；

根据所述起始位置和结束位置，对所述代码执行代码抽取操作，得到代码段；

判断抽取出的代码段是否符合预先设置的html标签元素闭合判断条件，得到判断结果；

如果所述判断结果为符合，则将抽取的代码段套入预先存储的html标签调用语句，得到所述目标代码；否则，将抽取的代码段中未闭合的代码部分补上对应的闭合元素标签，再将抽取的代码段套入预先存储的html标签调用语句，得到所述目标代码。

在一个示例性实施例中，在所述代码只包括html标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，所述方法还包括：

如果该html标签中还包括事件方法和/或处理函数的方法，则获取所述方法的方法名；

根据所述方法名，从所述代码所属的源文件中读取所述方法对应的代码段。

在本示例性实施例中，所述抽取方法包括如下步骤：

1)从其中找到第一个类html标签的元素；

例如，<divclassname＝"specific-info">…

2)从html开始处遍历到html结束处，提取这段代码出来

3)对这段代码进行html标签元素闭合判断，未闭合部分补上对应的闭合元素标签

4)将闭合的完整html代码段套入render(){return(…)}中，html部分抽取成功

5)如果该html标签中带事件方法和处理函数的方法，则需要根据方法名去源文件取出方法

在一个示例性实施例中，在所述代码只包括数据处理方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

计算所述代码中方法的内容与所述代码所属的源文件的占比信息；

将得到的占比信息与预先设置的阈值进行比较，得到比较结果；

如果所述比较结果为大于所述阈值，则从所述源文件取出所述方法的代码段作为目标代码。

在本示例性实施例中，在从相似代码中找到类似方法的代码后，去源文件对比，判断相似代码段如果占原文方法的比重大于50％，判断为处理数据的方法；小于50％则结束对比，判断为不具备抽离意义，结束该次抽离。

在一个示例性实施例中，在所述代码只包括返回html标签的方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

计算所述代码中方法的内容与所述代码所属的源文件的占比信息；

将得到的占比信息与预先设置的阈值进行比较，得到比较结果；

如果所述比较结果为大于所述阈值，获取所述方法的方法名；

根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；

从所述源文件中读取所述最小标签单位的代码段作为目标代码。

在本示例性实施例中，判断代码中包括的方法是否具备抽离的条件，如果代码中包括的方法具有抽离的条件，则根据方法名找到源文件应用的最小标签单位，抽离出来。

在一个示例性实施例中，在所述代码只包括只包含事件方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

获取所述方法的方法名；

根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；

从所述源文件中读取所述最小标签单位的代码段作为目标代码。

在本示例性实施例中，根据方法名找到源文件应用的最小标签单位，抽离出来。

在一个示例性实施例中，所述只包括只包含事件方法的代码是通过如下方式判断的，包括：

如果所述代码包括调用父组件的方法，在所述方法的函数包括this.props时，或者，在所述方法的参数来自this.props时，确定所述代码为包含事件方法；

如果所述代码包括调用子组件的方法，在所述方法使用预设代码时，确定所述代码包含事件方法，其中所述预设代码为this.setstate({})。

在本示例性实施例中，判断依据包括：

调用父组件的方法，方法函数里面带有this.props,或者参数来自this.props

子组件本身方法，都会使用this.setstate({})。

在一个示例性实施例中，在所述代码包含html和方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：

在得到所述代码中方法对应的代码段后，将所述方法对应的代码段与html标签中的所有方法进行对比去重，得到对比结果；

如果所述对比结果为重复，则只保留html中的方法；

如果所述对比结果为不重复，则判断该方法是否为数据处理方法或者事件方法或者返回html标签的方法；

根据判断确定的方法，分别按照各自的抽离策略进行抽离。

在本示例性实施例中，根据闭合后的标签找到相应的数据处理方法和事件，再根据上文中只包含数据处理方法和/或只包含返回html标签的方法对应的代码抽取策略确定对应的方法，取出完整的方法，再将该方法与html标签中的所有方法对比去重，如果有重复，那么只保留html中的方法。若不重复，则判断该方法是属于数据处理方法、事件方法、返回html标签的方法，分别按照各自的抽离规则进行抽离即可。

下面对本申请实施例提供的方法进行说明：

本申请实施例将现有的相似组件抽离出来生成新的组件，以满足多个用户拥有多个相似功能的需求。从项目的角度讲，提高了组件的复用率，减少冗余的代码。从前端开发人员的角度讲，减少了重复的工作量，有助于提高代码的质量，提升开发效率。

前端开发的重要组成部分是html/css/javascript，在react中使用jsx来描述用户界面,jsx是一种javascript的语法扩展，在编译之后呢，jsx会被转化为普通的javascript对象。为了自动生成react的通用组件，需要利用查重插件jscpd或jsinspect遍历查询src/components里面所有组件，获取所有具有相似度的原始代码。然后通过一系列技术手段将该相似代码抽离出来生成新的组件。

除了根据.xml文件自动生成通用组件外，也可以根据.json/.html文件自动生成通用组件。他们不同的地方只是在于展示相似文件路径，相似文件个数，相似代码段、代码起止行列这些信息的标签或变量不同而已。但不论哪种方式，通过node.js遍历都是可以拿到这些信息的。

除了根据以上信息直接在源文件直接抽离代码生成组件外，还可以对每一组相似文件进行编译，编译后获取完整的js对象，然后根据完整的js对象生成tsx文件。

本申请实施例提供的组件生成的方法，包括：

步骤201、查找重复的代码片段并导出原始代码；

利用jscpd插件对项目中除去路由组件外的所有.tsx文件进行查重，可以导出为html、pmdcpdxml、json三种格式文件。

其中，html的文件的内容如下：

其中，json文件格式的内容如下：

其中，xml文件格式的内容如下：

步骤202、根据导出的相似代码自动封装组件；

在一个示例性实施例中，通过xml/json/html导出文件内容格式示例可以看出，可以获取相似文件路径、相似文件个数、相似代码段和代码起止行列。通过node.js对这些文件遍历可以获取上述信息，然后根据这些信息去相应的源文件读取完整的代码，并套用一个模板，对比生成1个完整的组件。下面将以.xml文件为例阐述自动封装通用组件的方法。

从上面的示例中发现相似代码段是不完整的，不符合html、js的语法闭合规则。项目中用到的组件类型有类定义组件(数据处理方法类、功能组件类)，纯函数定义组件。

(1)功能组件类

tsx功能组件示例代码如下：

其中，功能组件类的特征如下：

1)头部import依赖包

2)interface定义

3)组件类

其中，组件类的子特征包括：

state、render函数返回html代码块、事件方法等。

(2)数据处理类示例

tsx方法类组件示例代码如下：

其中数据处理类的特征如下：

1)头部import依赖包

2)组件类，包含多个函数

(2)纯函数定义组件

其中，tsx纯函数组件示例代码如下：

其中，纯函数定义组件的特征如下：

1)头部import依赖包

2)组件类，返回html标签元素

从上面3组代码段可以看出组件具有的共性，其中纯函数组件完全可以套用功能组件模板。经过分析后，封装的组件只有两类：功能类组件和数据处理方法类组件。

根据相似代码情况，可以分为5类：

(1)相似代码只包含html标签

(2)相似代码只包含数据处理方法

(3)相似代码只包含方法，但方法中返回html标签

(4)相似代码包含事件方法

(5)相似代码包含html和方法。

上述5种情况分别采用不同的抽离方式完成组件的生成，具体包括：

一、相似代码只包含html标签

1)先找到代码相似地方，从其中找到第一个类html标签的元素，如示例中<divclassname＝"specific-info">…

2)从html开始处遍历到html结束处，提取这段代码出来

3)对这段代码进行html标签元素闭合判断，未闭合部分补上对应的闭合元素标签

4)将闭合的完整html代码段套入render(){return(…)}中，html部分抽取成功

5)如果该html标签中带事件方法和处理函数的方法，则需要根据方法名去源文件取出方法

6)生成组件：获取源文件的头部import及.less，interface,类名，state等信息按照模板生成组件

二、相似代码只包含数据处理方法

下文为数据处理方法代码段的示例：

在上述方法示例中，es6格式包含在{}中，带有(),具有返回值；

1)从相似代码中找到类似方法的代码，然后去源文件对比

2)相似代码段如果占原文方法的比重大于50％，判断为处理数据的方法；小于50％则结束对比，判断为不具备抽离意义，结束该次抽离

3)从源文件取出整个方法按照模板存入公共方法库中。

三、相似代码只包含方法，但方法中返回html标签

下文为返回html标签的方法的代码段的示例：

1)先确认该方法是否具备抽离的意义

2)根据方法名找到源文件应用的最小标签单位，抽离出来，分别获取源文件的头部import及.less，interface,类名，state等信息按照模板生成组件

四、相似代码包含事件方法

判断依据如下：

调用父组件的方法，方法函数里面带有this.props,或者参数来自this.props

子组件本身方法，都会使用this.setstate({})

抽离规则如下：

1)根据方法名找到源文件应用的最小标签单位，抽离出来，分别获取源文件的头部import及.less，interface,类名，state等信息按照模板生成组件

2)相似代码包含html和方法先按照案例1找到类html标签，取出来进行闭合处理

3)根据闭合后的标签找到相应的数据处理方法和事件

4)按照示例2和示例3的原则找到相应的方法，取出完整的方法

5)将该方法与html标签中的所有方法对比去重，如果有重复，那么只保留html中的方法。若不重复，则判断该方法是属于数据处理方法、事件方法、返回html标签的方法，分别按照各自的抽离规则进行抽离即可。

本申请实施例提供的方法，充分利用项目中的重复代码，封装成适合团队业务的通用组件，以开发多个具有相似业务的客户需要相似功能的需求，是基础组件的升级版。减少项目中代码的重复率，减少代码量，可以在一定程度上提高前端渲染性能，减少代码加载的时间，从而达到提高用户体验的效果；将现有项目中所有相似的组件抽离封装为1个通用组件，减少了代码维护时间，在开发一个新项目时，可以直接引入这些组件，传递需要的数据即可，节省了界面开发时间，从而节约人力成本；根据已有项目抽离的通用组件，可以应用于多个新项目。利用jscpd插件进行查重是为了防止过度直接复制粘贴，达到共享通用的效果。

本申请实施例提供一种组件的生成装置，包括处理器和存储器，其中所述存储器存储有计算机程序，所述处理器用以调用所述存储器中的计算机程序以实现上文任一所述的方法。

本发明实施例提供的装置，在获取代码后，对所述代码中内容进行识别，得到所述代码所实现的功能类型，再按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，利用所述目标代码生成组件信息，减少项目中代码的重复率，减少代码量，减少代码加载的时间，从而达到提高用户体验的效果。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于ram、rom、eeprom、闪存或其他存储器技术、cd-rom、数字多功能盘(dvd)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。