CN110221824A - 组件的生成方法和装置 - Google Patents
组件的生成方法和装置 Download PDFInfo
- Publication number
- CN110221824A CN110221824A CN201910476020.9A CN201910476020A CN110221824A CN 110221824 A CN110221824 A CN 110221824A CN 201910476020 A CN201910476020 A CN 201910476020A CN 110221824 A CN110221824 A CN 110221824A
- Authority
- CN
- China
- Prior art keywords
- code
- html tag
- strategy
- html
- function type
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 208
- 239000000284 extract Substances 0.000 claims abstract description 45
- 230000006870 function Effects 0.000 claims description 66
- 238000003672 processing method Methods 0.000 claims description 19
- 238000000605 extraction Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 6
- 235000013399 edible fruits Nutrition 0.000 claims 1
- 238000011161 development Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 230000008676 import Effects 0.000 description 6
- 238000003860 storage Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 5
- 230000003252 repetitive effect Effects 0.000 description 5
- 230000009467 reduction Effects 0.000 description 4
- 230000000712 assembly Effects 0.000 description 3
- 238000000429 assembly Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000005484 gravity Effects 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000015572 biosynthetic process Effects 0.000 description 1
- 238000012790 confirmation Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000013508 migration Methods 0.000 description 1
- 230000005012 migration Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000003362 replicative effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Document Processing Apparatus (AREA)
Abstract
本申请实施例公开了一种组件的生成方法和装置。所述方法包括：获取代码，其中所述代码是从预先存储的多个代码段中选取的符合预先设置的重复代码判断策略的代码；对所述代码中内容进行识别，得到所述代码所实现的功能类型；按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码；利用所述目标代码生成组件信息。
Description
技术领域
本发明涉及信息处理领域，尤指一种组件的生成方法和装置。
背景技术
随着业务多样性的开展，越来越多的客户对等待开发的项目有定制化的 要求。对于项目开发者，客户有自己的定制化功能，彼此之间也有很多相似 的功能。在这种开发模式下，同样技术栈的可以复制代码略作改动就可以实 现新的功能，不同技术栈就得重新开发功能，这就导致了很多的冗余的代码 并且增加了开发的成本。
为了解决该问题，架构师安排研发人员将自己负责的项目的代码全部迁 移到一套新的前端开发环境中。在迁移的过程，由于个人负责的项目不同， 彼此在有相似的功能时，如果有时没有来得及改造现有的组件，采用了直接 复制、粘贴代码略作修改的模式，导致现有的项目开发环境中冗余的代码更 多，某个相似功能组件的一处设计优化需要多个人改多处代码，造成了时间 的浪费。
在项目逐步稳定，功能需求逐步完善之后我们就需要考虑对代码库的优 化与重构，尽量编写清晰可维护的代码。好的代码往往是在合理范围内尽可 能地避免重复代码，遵循单一职责与Single Source of Truth等原则。
随着业务急速增长，同类客户想要的相似功能越来越多，在合理控制开 发成本的前提下，如何提取相同代码满足多个相似功能来使用，是亟待解决 的问题。
发明内容
为了解决上述技术问题，本发明提供了一种组件的生成方法和装置，能 够降低项目中代码的重复率。
为了达到本发明目的，本发明提供了一种组件的生成方法，包括：
获取代码，其中所述代码是从预先存储的多个代码段中选取的符合预先 设置的重复代码判断策略的代码；
对所述代码中内容进行识别，得到所述代码所实现的功能类型；
按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目 标代码；
利用所述目标代码生成组件信息。
在一个示例性实施例中，所述代码所实现的功能类型包括如下至少一种：
只包含超文本标记语言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、对所述代码中内容进行识别，得到所述代码所实现的功能类型；
在一个示例性实施例中，所述代码所实现的功能类型包括如下至少一种：
只包含超文本标记语言(HyperText Markup Language，HTML)标签；
只包含数据处理方法；
只包含返回HTML标签的方法；
只包含事件方法；
包含HTML和方法。
在本示例性实施例中，可以根据代码的编写格式，识别代码要实现的功 能类型。
步骤103、按照预先设置的各功能类型对应的代码抽取策略，从所述代码 中抽取目标代码；
在一个示例性实施例中，根据代码所要实现的功能类型，预先存储不同 功能类型对应的代码抽取策略，在对代码进行抽取操作时，确定该代码要使 用的代码抽取策略，从所述代码中得到抽取目标代码。
步骤104、利用所述目标代码生成组件信息。
在一个示例性实施例中，在得到目标代码后，利用组件的预设的组件生 成模板，利用该模板以及目标代码生成组件。
本发明实施例提供的方法，在获取代码后，对所述代码中内容进行识别， 得到所述代码所实现的功能类型，再按照预先设置的各功能类型对应的代码 抽取策略，从所述代码中抽取目标代码，利用所述目标代码生成组件信息， 减少项目中代码的重复率，减少代码量，减少代码加载的时间，从而达到提 高用户体验的效果。
下面对本发明提供的方法作进一步说明：
在一个示例性实施例中，在所述代码只包括HTML标签时，所述按照预 先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包 括：
获取所述代码中第一个HTML标签的元素的起始位置以及所述代码中 HTML标签的元素的结束位置；
根据所述起始位置和结束位置，对所述代码执行代码抽取操作，得到代 码段；
判断抽取出的代码段是否符合预先设置的HTML标签元素闭合判断条件， 得到判断结果；
如果所述判断结果为符合，则将抽取的代码段套入预先存储的HTML标 签调用语句，得到所述目标代码；否则，将抽取的代码段中未闭合的代码部 分补上对应的闭合元素标签，再将抽取的代码段套入预先存储的HTML标签 调用语句，得到所述目标代码。
在一个示例性实施例中，在所述代码只包括HTML标签时，所述按照预 先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，所 述方法还包括：
如果该HTML标签中还包括事件方法和/或处理函数的方法，则获取所述 方法的方法名；
根据所述方法名，从所述代码所属的源文件中读取所述方法对应的代码 段。
在本示例性实施例中，所述抽取方法包括如下步骤：
1)从其中找到第一个类HTML标签的元素；
例如，<div className＝"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、PMD CPD XML、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)或其他光盘存储、磁盒、 磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以 被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通 信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他 传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。
Claims (10)
1.一种组件的生成方法，其特征在于，包括：
获取代码，其中所述代码是从预先存储的多个代码段中选取的符合预先设置的重复代码判断策略的代码；
对所述代码中内容进行识别，得到所述代码所实现的功能类型；
按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码；
利用所述目标代码生成组件信息。
2.根据权利要求1所述的方法，其特征在于，所述代码所实现的功能类型包括如下至少一种：
只包含超文本标记语言HTML标签；
只包含数据处理方法；
只包含返回HTML标签的方法；
只包含事件方法；
包含HTML和方法。
3.根据权利要求2所述的方法，其特征在于，在所述代码只包括HTML标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：
获取所述代码中第一个HTML标签的元素的起始位置以及所述代码中HTML标签的元素的结束位置；
根据所述起始位置和结束位置，对所述代码执行代码抽取操作，得到代码段；
判断抽取出的代码段是否符合预先设置的HTML标签元素闭合判断条件，得到判断结果；
如果所述判断结果为符合，则将抽取的代码段套入预先存储的HTML标签调用语句，得到所述目标代码；否则，将抽取的代码段中未闭合的代码部分补上对应的闭合元素标签，再将抽取的代码段套入预先存储的HTML标签调用语句，得到所述目标代码。
4.根据权利要求3所述的方法，其特征在于，在所述代码只包括HTML标签时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，所述方法还包括：
如果该HTML标签中还包括事件方法和/或处理函数的方法，则获取所述方法的方法名；
根据所述方法名，从所述代码所属的源文件中读取所述方法对应的代码段。
5.根据权利要求2所述的方法，其特征在于，在所述代码只包括数据处理方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：
计算所述代码中方法的内容与所述代码所属的源文件的占比信息；
将得到的占比信息与预先设置的阈值进行比较，得到比较结果；
如果所述比较结果为大于所述阈值，则从所述源文件取出所述方法的代码段作为目标代码。
6.根据权利要求2所述的方法，其特征在于，在所述代码只包括返回HTML标签的方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：
计算所述代码中方法的内容与所述代码所属的源文件的占比信息；
将得到的占比信息与预先设置的阈值进行比较，得到比较结果；
如果所述比较结果为大于所述阈值，获取所述方法的方法名；
根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；
从所述源文件中读取所述最小标签单位的代码段作为目标代码。
7.根据权利要求2所述的方法，其特征在于，在所述代码只包括只包含事件方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：
获取所述方法的方法名；
根据所述方法名，确定所述方法在所述代码所属的源文件中应用的最小标签单位；
从所述源文件中读取所述最小标签单位的代码段作为目标代码。
8.根据权利要求2或7所述的方法，其特征在于，所述只包括只包含事件方法的代码是通过如下方式判断的，包括：
如果所述代码包括调用父组件的方法，在所述方法的函数包括this.props时，或者，在所述方法的参数来自this.props时，确定所述代码为包含事件方法；
如果所述代码包括调用子组件的方法，在所述方法使用预设代码时，确定所述代码包含事件方法，其中所述预设代码为this.setState({})。
9.根据权利要求2所述的方法，其特征在于，在所述代码包含HTML和方法时，所述按照预先设置的各功能类型对应的代码抽取策略，从所述代码中抽取目标代码，包括：
在得到所述代码中方法对应的代码段后，将所述方法对应的代码段与HTML标签中的所有方法进行对比去重，得到对比结果；
如果所述对比结果为重复，则只保留HTML中的方法；
如果所述对比结果为不重复，则判断该方法是否为数据处理方法或者事件方法或者返回HTML标签的方法；
根据判断确定的方法，分别按照各自的抽离策略进行抽离。
10.一种组件的生成装置，其特征在于，包括处理器和存储器，其中所述存储器存储有计算机程序，所述处理器用以调用所述存储器中的计算机程序以实现如权利要求1至9任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910476020.9A CN110221824B (zh) | 2019-06-03 | 2019-06-03 | 组件的生成方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910476020.9A CN110221824B (zh) | 2019-06-03 | 2019-06-03 | 组件的生成方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110221824A true CN110221824A (zh) | 2019-09-10 |
| CN110221824B CN110221824B (zh) | 2024-03-22 |
Family
ID=67819008
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910476020.9A Active CN110221824B (zh) | 2019-06-03 | 2019-06-03 | 组件的生成方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110221824B (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113238796A (zh) * | 2021-05-17 | 2021-08-10 | 北京京东振世信息技术有限公司 | 一种代码重构方法、装置、设备及存储介质 |
| CN113268230A (zh) * | 2021-05-18 | 2021-08-17 | 深圳希施玛数据科技有限公司 | 一种反馈信息的生成方法、装置、终端和存储介质 |
| CN113312025A (zh) * | 2020-02-26 | 2021-08-27 | 北京同邦卓益科技有限公司 | 组件库生成方法及装置、存储介质、电子设备 |
| CN114048405A (zh) * | 2021-10-26 | 2022-02-15 | 盐城金堤科技有限公司 | 入口模板文件生成方法、装置、设备及存储介质 |
| CN114237763A (zh) * | 2021-12-23 | 2022-03-25 | 建信金融科技有限责任公司 | 提高组件首次加载速度的方法、装置、设备、介质及产品 |
Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101739254A (zh) * | 2009-12-31 | 2010-06-16 | 山东中创软件商用中间件股份有限公司 | 一种实现多平台通信组件复用的方法及装置 |
| KR20120095513A (ko) * | 2011-02-21 | 2012-08-29 | 성균관대학교산학협력단 | Ｐｌｃ 기반 제어 코드를 ｘｍｌ 인터페이스를 이용하여 범용 프로그램 코드로 변환하는 방법 및 프레임워크 시스템 |
| CN103631765A (zh) * | 2012-08-21 | 2014-03-12 | 镇江雅迅软件有限责任公司 | 一种面向组件的业务系统自定义模型 |
| US20140258840A1 (en) * | 2013-03-05 | 2014-09-11 | Beijing Founder Electronics Co., Ltd. | Xml based custom code generating method and generator, computer program product and computer readable medium |
| US20160283347A1 (en) * | 2015-03-23 | 2016-09-29 | International Business Machines Corporation | Searching Code Based on Learned Programming Construct Patterns and NLP Similarity |
| CN106371829A (zh) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | 基于模块化思想的模板框架设计方法及系统 |
| CN108733353A (zh) * | 2017-04-21 | 2018-11-02 | 中兴通讯股份有限公司 | 一种界面构造方法和装置 |
| CN108762764A (zh) * | 2018-06-05 | 2018-11-06 | 中国平安人寿保险股份有限公司 | 代码自动生成方法、装置、计算机设备及存储介质 |
| CN108829839A (zh) * | 2018-06-19 | 2018-11-16 | 精硕科技（北京）股份有限公司 | 样本可信度的验证方法、装置、存储介质及处理器 |
| CN108958796A (zh) * | 2017-05-23 | 2018-12-07 | 阿里巴巴集团控股有限公司 | 业务请求处理方法及装置、业务请求处理系统 |
| CN109240670A (zh) * | 2018-11-21 | 2019-01-18 | 北京锐安科技有限公司 | 模块化的软件开发方法、系统、设备及介质 |
| CN109344230A (zh) * | 2018-10-31 | 2019-02-15 | 任志颖 | 代码库文件生成、代码搜索、联结、优化以及移植方法 |
| CN109508191A (zh) * | 2018-11-22 | 2019-03-22 | 北京腾云天下科技有限公司 | 一种代码生成方法及系统 |
| CN109582303A (zh) * | 2018-10-31 | 2019-04-05 | 平安科技（深圳）有限公司 | 通用组件调用方法、装置、计算机设备及存储介质 |
| CN109783084A (zh) * | 2019-01-18 | 2019-05-21 | 广州思坦德计算机信息科技有限公司 | 一种计算机代码自动生成方法、系统、装置和存储介质 |
-
2019
- 2019-06-03 CN CN201910476020.9A patent/CN110221824B/zh active Active
Patent Citations (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101739254A (zh) * | 2009-12-31 | 2010-06-16 | 山东中创软件商用中间件股份有限公司 | 一种实现多平台通信组件复用的方法及装置 |
| KR20120095513A (ko) * | 2011-02-21 | 2012-08-29 | 성균관대학교산학협력단 | Ｐｌｃ 기반 제어 코드를 ｘｍｌ 인터페이스를 이용하여 범용 프로그램 코드로 변환하는 방법 및 프레임워크 시스템 |
| CN103631765A (zh) * | 2012-08-21 | 2014-03-12 | 镇江雅迅软件有限责任公司 | 一种面向组件的业务系统自定义模型 |
| US20140258840A1 (en) * | 2013-03-05 | 2014-09-11 | Beijing Founder Electronics Co., Ltd. | Xml based custom code generating method and generator, computer program product and computer readable medium |
| US20160283347A1 (en) * | 2015-03-23 | 2016-09-29 | International Business Machines Corporation | Searching Code Based on Learned Programming Construct Patterns and NLP Similarity |
| CN106371829A (zh) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | 基于模块化思想的模板框架设计方法及系统 |
| CN108733353A (zh) * | 2017-04-21 | 2018-11-02 | 中兴通讯股份有限公司 | 一种界面构造方法和装置 |
| CN108958796A (zh) * | 2017-05-23 | 2018-12-07 | 阿里巴巴集团控股有限公司 | 业务请求处理方法及装置、业务请求处理系统 |
| CN108762764A (zh) * | 2018-06-05 | 2018-11-06 | 中国平安人寿保险股份有限公司 | 代码自动生成方法、装置、计算机设备及存储介质 |
| CN108829839A (zh) * | 2018-06-19 | 2018-11-16 | 精硕科技（北京）股份有限公司 | 样本可信度的验证方法、装置、存储介质及处理器 |
| CN109344230A (zh) * | 2018-10-31 | 2019-02-15 | 任志颖 | 代码库文件生成、代码搜索、联结、优化以及移植方法 |
| CN109582303A (zh) * | 2018-10-31 | 2019-04-05 | 平安科技（深圳）有限公司 | 通用组件调用方法、装置、计算机设备及存储介质 |
| CN109240670A (zh) * | 2018-11-21 | 2019-01-18 | 北京锐安科技有限公司 | 模块化的软件开发方法、系统、设备及介质 |
| CN109508191A (zh) * | 2018-11-22 | 2019-03-22 | 北京腾云天下科技有限公司 | 一种代码生成方法及系统 |
| CN109783084A (zh) * | 2019-01-18 | 2019-05-21 | 广州思坦德计算机信息科技有限公司 | 一种计算机代码自动生成方法、系统、装置和存储介质 |
Non-Patent Citations (3)
| Title |
|---|
| FANG-HSIANG SU 等: "Identifying functionally similar code in complex codebases", 《2016 IEEE 24TH INTERNATIONAL CONFERENCE ON PROGRAM COMPREHENSION (ICPC)》 * |
| 张晶 等: "基于业务模型和界面模型的代码生成工具", 《电脑与信息技术》, no. 02 * |
| 朱亚迪 等: "基于代码片段复用的安卓应用组装技术研究", 《计算机应用与软件》, no. 11 * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113312025A (zh) * | 2020-02-26 | 2021-08-27 | 北京同邦卓益科技有限公司 | 组件库生成方法及装置、存储介质、电子设备 |
| CN113312025B (zh) * | 2020-02-26 | 2024-04-05 | 北京同邦卓益科技有限公司 | 组件库生成方法及装置、存储介质、电子设备 |
| CN113238796A (zh) * | 2021-05-17 | 2021-08-10 | 北京京东振世信息技术有限公司 | 一种代码重构方法、装置、设备及存储介质 |
| CN113268230A (zh) * | 2021-05-18 | 2021-08-17 | 深圳希施玛数据科技有限公司 | 一种反馈信息的生成方法、装置、终端和存储介质 |
| CN113268230B (zh) * | 2021-05-18 | 2023-09-08 | 深圳希施玛数据科技有限公司 | 一种反馈信息的生成方法、装置、终端和存储介质 |
| CN114048405A (zh) * | 2021-10-26 | 2022-02-15 | 盐城金堤科技有限公司 | 入口模板文件生成方法、装置、设备及存储介质 |
| CN114048405B (zh) * | 2021-10-26 | 2024-04-09 | 盐城天眼察微科技有限公司 | 入口模板文件生成方法、装置、设备及存储介质 |
| CN114237763A (zh) * | 2021-12-23 | 2022-03-25 | 建信金融科技有限责任公司 | 提高组件首次加载速度的方法、装置、设备、介质及产品 |
| CN114237763B (zh) * | 2021-12-23 | 2023-06-02 | 建信金融科技有限责任公司 | 提高组件首次加载速度的方法、装置、设备、介质及产品 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110221824B (zh) | 2024-03-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110221824A (zh) | 组件的生成方法和装置 | |
| AU2017238633B2 (en) | Efficient state machines for real-time dataflow programming | |
| US20080010629A1 (en) | Shareable, bidirectional mechanism for conversion between object model and XML | |
| US7694272B2 (en) | Method, a language and a system for the definition and implementation of software solutions by using a visualizable computer executable modeling language | |
| US7032210B2 (en) | Method and system for generating program source code of a computer application from an information model | |
| US7672957B2 (en) | User interface configured to display mechanical fabric and semantic model of a legacy computer application generated, graphical view navigating links between mechanical nodes and semantic nodes based on relevant business rules | |
| Vermeulen | The elements of Java (tm) style | |
| CN109918055B (zh) | 一种应用程序的生成方法及设备 | |
| US8209341B2 (en) | Configurable transformation macro | |
| EP1739551A1 (fr) | Procédé de traitement de données compatible avec un formalisme de modélisation d'objets | |
| CN112162729A (zh) | 一种基于vue的组件开发及展示方法 | |
| CN102289774A (zh) | 金融交易处理系统中的图形化报文处理与测试系统及方法 | |
| US20080162530A1 (en) | Method and Apparatus for Utilizing an Extensible Markup Language Data Structure For Defining a Data-Analysis Parts Container For Use in a Word Processor Application | |
| WO2023087721A1 (zh) | 一种业务处理模型生成方法、装置、电子设备和存储介质 | |
| Nichols et al. | Structural and nominal cross-language clone detection | |
| US20060090155A1 (en) | Methods and apparatus for message oriented invocation | |
| Kamburjan et al. | Behavioral contracts for cooperative scheduling | |
| US20230060787A1 (en) | System and Method for Real-Time, Dynamic Creation, Delivery, and Use of Customizable Web Applications | |
| US10169316B2 (en) | Method and system to convert document source data to XML via annotation | |
| Mathaikutty et al. | Ewd: A metamodeling driven customizable multi-moc system modeling framework | |
| Bertolotti et al. | : Software product lines extraction driven by language server protocol | |
| US11853732B1 (en) | Source code structural inference based on indentation | |
| US20090327322A1 (en) | Information worker creating component application without writing code to create the applications | |
| CN113220277B (zh) | 一种嵌入式服务化的开发方法及装置 | |
| Rodriguez-Cruz et al. | Automatic generation of printed representations of ecuadorian electronic invoices through XML data binding |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20201231 Address after: A108, 1 / F, curling hall, winter training center, 68 Shijingshan Road, Shijingshan District, Beijing 100041 Applicant after: Beijing second hand Artificial Intelligence Technology Co.,Ltd. Address before: 100080 area C, 3rd floor, building 2, zone B, Dongsheng Science Park, Zhongguancun, Haidian District, Beijing Applicant before: ADMASTER TECHNOLOGY (BEIJING) Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |