CN110531968B - 一种自动抽离web前端功能代码生成独立模板的方法 - Google Patents

Abstract

本发明公开了一种自动抽离web前端功能代码生成独立模板的方法，包括有以下步骤：S1.开发者基于web前端开发技术，开发完成具有多项独立的功能节点的若干个源项目代码；S2.在每个源项目代码中，开发者对各项功能节点所归属的功能类别分别进行划分，并且对各项功能节点所对应的代码部分作功能类别的注释标记；S3.开发者自主定义模板生成规则；S4.根据模板生成规则，***自动识别每个源项目代码的各个注释标记，随后将所需的功能节点对应的代码部分抽离出来；S5.将抽离出来的各项功能节点的代码部分根据模板生成规则生成各个独立的功能模板，并储存至预定的输出目录下，以供开发者在其它项目中可直接选调任一功能模板。

Description

一种自动抽离web前端功能代码生成独立模板的方法

技术领域

本发明涉及计算机技术的技术领域，尤其是指一种自动抽离web前端功能代码生成独立模板的方法。

背景技术

随着web前端工程化的兴起，前后端分离开发逐渐成为主流。Web前端传统代码级开发成本越来越高，越来越多的项目使用代码生成再修改的方式来实现快速开发，目前代码生成使用的模板都是从源项目中手工抽离形成，由于各个模板代码的依赖错综复杂，得花费大量人力成本抽离这些模板，同时后期的源项目代码更新，同样需要人力去同步更新。这个过程不但投入成本较大，效率低下，而且容易出错。随着人工维护模板的成本越来越高，模板不能与源代码及时同步或版本不对应，导致后期代码生成这一快速开发功能被弃用。

发明内容

本发明的目的在于克服现有技术的不足，提供一种自动抽离web前端功能代码生成独立模板的方法。

为了实现上述的目的，本发明所提供的一种自动抽离web前端功能代码生成独立模板的方法，包括有以下步骤：

S1.开发者基于web前端开发技术，开发完成具有多项独立的功能节点的若干个源项目代码；

S2.在每个源项目代码中，开发者对各项功能节点所归属的功能类别分别进行划分，并且对各项功能节点所对应的代码部分作功能类别的注释标记；

S3.开发者自主定义模板生成规则；

S4.根据模板生成规则，***自动识别每个源项目代码的各个注释标记，随后将所需的功能节点对应的代码部分抽离出来；

S5.将抽离出来的各项功能节点的代码部分根据模板生成规则生成各个独立的功能模板，并储存至预定的输出目录下，以供开发者在其它项目中可直接选调任一功能模板。

进一步，开发者可自主选取所需的一个或多个功能节点、可自主选取功能模板的输出目录、可自主选择开启或关闭源代码监听功能以及可自主设定任意一个功能模板的调用次数，以完成对模板生成规则的自主定义。

进一步，在步骤S4中，当开发者选择开启源代码监听功能时，若被抽离出来功能节点的代码部分在源项目代码中发生变化，则实时抽离变化后的代码部分覆盖原生成的功能模板。

进一步，当开发者设定了功能模板的调用次数时，则会限制开发者调用该功能模板的次数。

进一步，若所抽离出来的功能节点的代码部分中含有可变数值参数时，则在生成功能模板之前，通过动态参数${param}替代原数值参数，以便于开发者在调用该功能模板时可动态设定所需的数值参数。

本发明采用上述的方案，其有益效果在于：通过对源项目代码的各项功能节点进行划分并加以注释标记，基于自主定义模板生成规则，从而将所需的功能节点从原项目代码中抽离出来并生成功能模板，为其它项目按需选调功能模板进行快速应用生成；本方法具有抽屉代码快速高效，且功能模板与源项目代码之间具备有自动同步功能，从而极大地降低了人工维护的成本，适用于大中型前端项目。

附图说明

图1为实施例的方法流程示意框图。

具体实施方式

为了便于理解本发明，下面参照附图对本发明进行更全面的描述。附图中给出了本发明的较佳实施方式。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施方式。提供这些实施方式的目的是使对本发明的公开内容理解得更加透彻全面。

参见附图1所示，在本实施例中，一种自动抽离web前端功能代码生成独立模板的方法，包括有以下步骤：

S1.开发者基于web前端开发技术，开发完成具有多项独立的功能节点的若干个源项目代码，其中，每个源项目代码均经单元测试和集成测试通过。

S2.在每个源项目代码中，开发者对各项功能节点所归属的功能类别分别进行划分，并且对各项功能节点所对应的代码部分作功能类别的注释标记。

在每个源项目代码中含有多项功能节点，并且各项功能节点之间的功能用途并不相同，因此，需要开发者对各项功能节点进行注释标记以区分出各个功能节点的功能类别，为了便于理解，特列举部分功能类别进行解释说明，具体包括登录功能、通知提醒框功能、crud等类别。

S3.开发者在配置文件中config.js自主定义模板生成规则，即，

开发者可在自主定义模板生成规则时，选取所需的一个或多个功能节点，为了便于理解，本实施例的模板生成规则中，开发者选取了关于登录功能和通知提醒框功能的功能节点；另外，开发者还可自主选取功能模板的输出目录

开发者可在自主定义模板生成规则时，对所选择的功能节点加上“--watch”参数，则开启源代码监听功能，从而持续监听源项目代码的变化；

开发者可在自主定义模板生成规则时，对所抽离的功能节点加上调用次数的限制，可为只允许安装一次或可多次安装，如，关于登录功能的功能节点在一个项目中只允许有一个，因此可限制调用次数为一次；关于crud的功能节点可在同一项目中多次使用实现不同的业务功能，因此可不加限制或限制调用次数为多次。

因此，通过自主选取所需的一个或多个功能节点、自主选取功能模板的输出目录、自主选择开启或关闭源代码监听功能、以及自主设定任意一个功能模板的调用次数，开发者便完成对模板生成规则的自主定义。

S4.根据模板生成规则，***自动识别源项目代码的各个注释标记，随后将所需的功能节点对应的代码部分抽离出来。***通过自动识别web前端代码各种文件格式js\css\json\less\svg\图片等，支持无限层级关联代码自动抽离，因此，被抽离出来的功能节点保持原来的目录结构。

S5.将抽离出来的各项功能节点的代码部分根据模板生成规则生成各个独立的功能模板，并储存至预定的输出目录下，以供开发者在其它项目中可直接选调任一功能模板。

进一步，若所抽离出来的功能节点的代码部分中含有可变数值参数时，则在生成功能模板时，通过动态参数${param}替代原数值参数，以便于开发者在调用该功能模板时可动态设定所需的数值参数。例如，关于通知提醒框功能的功能节点，其源代码部分中含有对“通知提醒框在4.5s后关闭显示”，其中，“4.5s”则为可变数值参数，因此，在生成功能模板时，将“4.5s”替换为动态参数${param}，开发者在后续调用该功能模板时，交互式地输入变量值，便实现了开发者对该数值参数的设定。

综上所述，开发者可在输出目录下选调任一所需的功能模板生成到后续项目对应的目录中，实现了代码生成再修改的引用方式，从而提升web前端开发的效率，同时，所调用的功能模板能够与源项目代码保持自动同步，降低人工维护模板的成本。

以上所述之实施例仅为本发明的较佳实施例，并非对本发明做任何形式上的限制。任何熟悉本领域的技术人员，在不脱离本发明技术方案范围情况下，利用上述揭示的技术内容对本发明技术方案作出更多可能的变动和润饰，或修改均为本发明的等效实施例。故凡未脱离本发明技术方案的内容，依据本发明之思路所做的等同等效变化，均应涵盖于本发明的保护范围内。

Claims (4)

1.一种自动抽离web前端功能代码生成独立模板的方法，其特征在于：包括有以下步骤：

S1.开发者基于web前端开发技术，开发完成具有多项独立的功能节点的若干个源项目代码；

S2.在每个源项目代码中，开发者对各项功能节点所归属的功能类别分别进行划分，并且对各项功能节点所对应的代码部分作功能类别的注释标记；

S3.开发者自主定义模板生成规则；

S4.根据模板生成规则，***自动识别每个源项目代码的各个注释标记，随后将所需的功能节点对应的代码部分抽离出来；

S5.将抽离出来的各项功能节点的代码部分根据模板生成规则生成各个独立的功能模板，并储存至预定的输出目录下，以供开发者在其它项目中可直接选调任一功能模板；

开发者可自主选取所需的一个或多个功能节点、可自主选取功能模板的输出目录、可自主选择开启或关闭源代码监听功能以及可自主设定任意一个功能模板的调用次数，以完成对模板生成规则的自主定义。

2.根据权利要求1所述的一种自动抽离web前端功能代码生成独立模板的方法，其特征在于：在步骤S4中，当开发者选择开启源代码监听功能时，若被抽离出来功能节点的代码部分在源项目代码中发生变化，则实时抽离变化后的代码部分覆盖原生成的功能模板。

3.根据权利要求1所述的一种自动抽离web前端功能代码生成独立模板的方法，其特征在于：当开发者设定了功能模板的调用次数时，则会限制开发者调用该功能模板的次数。

4.根据权利要求1所述的一种自动抽离web前端功能代码生成独立模板的方法，其特征在于：若所抽离出来的功能节点的代码部分中含有可变数值参数时，则在生成功能模板之前，通过动态参数${param}替代原数值参数，以便于开发者在调用该功能模板时可动态设定所需的数值参数。

Images