Vue组件的文档生成方法及装置与流程

本发明涉及计算机领域，尤其是一种vue组件的文档生成方法及装置。

背景技术：

相关技术中，vue是一套用于构建用户界面的渐进式javascript框架，用于开发用户界面。开发人员编写完vue组件之后，需要给该组件编写相应的文档，这样别的开发人员才知道如何使用该组件。

相关技术中，给vue组件编写文档是由开发人员手动完成的，这样既浪费精力又增加了维护成本。

针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。

技术实现要素：

为解决相关技术中不能自动生成vue组件的描述文档的技术问题，本发明实施例提供了一种vue组件的文档生成方法及装置。

根据本发明的一个实施例，提供了一种vue组件的文档生成方法，包括：获取vue组件的源代码文件，其中，所述vue组件是组成页面视图的抽象单元；解析所述源代码文件，生成对应的抽象语法树ast；遍历所述ast中各个树节点；根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容，以生成所述vue组件的描述文档，其中，所述描述文档用于记录所述vue组件中各个对象的属性信息和交互关系。

可选的，解析所述源代码文件，生成对应的ast，包括：读取所述源代码文件中的字符串；识别所述字符串的字符特征；根据所述字符串和所述字符特征生成所述vue组件的ast。

可选的，根据所述字符串和所述字符特征生成所述vue组件的ast包括：基于字符特征生成token序列，其中，所述token序列包括所述源代码文件中的多个字符串；根据所述token序列自顶向下构建所述源代码文件的ast，其中，所述token序列中的每个字符串对应一个树节点。

可选的，根据所述字符串和所述字符特征生成所述vue组件的ast包括：基于字符特征对所述源代码文件中的多个字符串分别进行词法分析，生成token序列；对所述token序列进行语法分析，将每个字符串的token转化为树形表达式，以生成所述源代码文件的ast。

可选的，识别所述字符串的字符特征包括以下至少之一：识别所述字符串的props属性；识别所述字符串的字符标识；识别所述字符串的注释信息；识别所述字符串的类型。

可选的，根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容包括：根据所述树节点的节点类型匹配目标描述块，其中，所述目标描述块包括以下之一：props，events，slots，methods，所述props，所述events，所述slots是所述vue组件中函数的应用编程接口api类型，所述methods是所述vue组件中方法之间的调用类型；在所述目标描述块中填充所述树节点的节点内容。

可选的，在根据所述ast生成所述vue组件的描述文档之后，所述方法还包括：在设置所述vue组件与所述描述文档的关联关系之后，将所述vue组件上传到javascript组件库。

根据本发明的另一个实施例，提供了一种vue组件的文档生成装置，包括：获取模块，用于获取vue组件的源代码文件，其中，所述vue组件是组成页面视图的抽象单元；解析模块，用于解析所述源代码文件，生成对应的抽象语法树ast；遍历模块，用于遍历所述ast中各个树节点；填充模块，用于根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容，以生成所述vue组件的描述文档，其中，所述描述文档用于记录所述vue组件中各个对象的属性信息和交互关系。

可选的，所述解析模块，具体用于：读取所述源代码文件中的字符串；识别所述字符串的字符特征；根据所述字符串和所述字符特征生成所述vue组件的ast。

可选的，所述解析模块用于根据所述字符串和所述字符特征生成所述vue组件的ast时，具体用于：基于字符特征生成token序列，其中，所述token序列包括所述源代码文件中的多个字符串；根据所述token序列自顶向下构建所述源代码文件的ast，其中，所述token序列中的每个字符串对应一个树节点。

可选的，所述解析模块用于根据所述字符串和所述字符特征生成所述vue组件的ast时，具体用于：基于字符特征对所述源代码文件中的多个字符串分别进行词法分析，生成token序列；对所述token序列进行语法分析，将每个字符串的token转化为树形表达式，以生成所述源代码文件的ast。

可选的，所述解析模块用于识别所述字符串的字符特征时，具体用于以下至少之一：识别所述字符串的props属性；识别所述字符串的字符标识；识别所述字符串的注释信息；识别所述字符串的类型。

可选的，所述填充模块，具体用于：根据所述树节点的节点类型匹配目标描述块，其中，所述目标描述块包括以下之一：props，events，slots，methods，所述props，所述events，所述slots是所述vue组件中函数的应用编程接口api类型，所述methods是所述vue组件中方法之间的调用类型；在所述目标描述块中填充所述树节点的节点内容。

可选的，所述装置还包括：上传模块，用于在所述填充模块根据所述ast生成所述vue组件的描述文档之后，在设置所述vue组件与所述描述文档的关联关系之后，将所述vue组件上传到javascript组件库。

根据本发明的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本发明的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

通过本实施例的方案，获取vue组件的源代码文件，然后解析源代码文件，生成对应的抽象语法树ast，最后根据ast生成vue组件的描述文档，基于ast生成vue组件的描述文档，通过静态分析代码内容，可以自动生成描述文档，解决了相关技术中不能自动生成vue组件的描述文档的技术问题，提高了描述文档的产出效率。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

构成说明书的一部分的附图描述了本发明的实施例，并且连同描述一起用于解释本发明的原理。

参照附图，根据下面的详细描述，可以更加清楚地理解本发明，其中：

图1是本发明实施例的一种vue组件的文档生成计算机的硬件结构框图；

图2是根据本发明实施例的一种vue组件的文档生成方法的流程图；

图3是本发明实施例中一个ast的示意图；

图4是根据本发明实施例的vue组件的文档生成装置的结构框图；

图5是本发明一个实施方式中的vue组件的文档生成装置的结构框图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本发明实施例可以应用于计算机系统/服务器，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与计算机系统/服务器一起使用的众所周知的计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

计算机系统/服务器可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

本申请实施例一所提供的方法实施例可以在移动终端、计算机、服务器或者类似的运算装置中执行。以运行在计算机上为例，图1是本发明实施例的一种vue组件的文档生成计算机的硬件结构框图。如图1所示，计算机10可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器mcu或可编程逻辑器件fpga等的处理装置)和用于存储数据的存储器104，可选地，上述计算机还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机的结构造成限定。例如，计算机10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的vue组件的文档生成方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(networkinterfacecontroller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(radiofrequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种vue组件的文档生成方法，图2是根据本发明实施例的一种vue组件的文档生成方法的流程图，如图2所示，该流程包括如下步骤：

步骤s202，获取vue组件的源代码文件，其中，vue组件是组成页面视图的抽象单元；

本实施例的vue是一套用于构建用户界面的渐进式javascript框架，vue被设计为可以自底向上逐层应用，vue组件是vue定义的抽象单元，软件的视图层页面由至少一个vue组件组装而成。

步骤s204，解析源代码文件，生成对应的抽象语法树(abstractsyntaxtree，ast)；

在本实施例中的抽象语法树可以适用所有类型的编程语言，用于抽象表达源代码语法结构的逻辑关系。

步骤s206，遍历ast中各个树节点；

步骤s208，根据树节点的节点类型在预设模板文档的描述块中填充树节点的节点内容，以生成vue组件的描述文档，其中，描述文档用于记录vue组件中各个对象的属性信息和交互关系。

本实施例中的描述文档是源代码文件的描述性文档，用于具体解释和说明源代码中各个对象的类型，范围，以及对象(类的实例化)之间的交互关系等。

通过上述步骤，获取vue组件的源代码文件，然后解析源代码文件，生成对应的抽象语法树ast，最后遍历ast中各个树节点并填充节点内容，基于ast生成vue组件的描述文档，通过静态分析代码内容，可以自动生成描述文档，解决了相关技术中不能自动生成vue组件的描述文档的技术问题，提高了描述文档的产出效率。

本实施例的ast是源代码的抽象语法结构的树状表示，用于描述源代码各语句间的逻辑关系，树上的每个节点都表示源代码中的一种结构，每个ast节点(树节点)都对应一个源代码项。图3是本发明实施例中一个ast的示意图，其对应的源代码为：

在本实施例中，解析源代码文件，生成对应的ast，包括：

s11，读取源代码文件中的字符串；

本实施例可以通过递归的方式读取源代码文件中的字符串。

s12，识别字符串的字符特征；

本实施例的字符特征用于描述字符串的属性信息和关联信息，识别字符串的字符特征可以但不限于为：识别字符串的props属性，props属性用于描述父组件与子组件之间的数据传递方向；识别字符串的字符标识；识别字符串的注释信息；识别字符串的类型。

s13，根据字符串和字符特征生成vue组件的ast。

本实施例可以通过多种方式来生成ast，在本实施例的一个实施方式中，根据字符串和字符特征生成vue组件的ast包括：基于字符特征生成token序列，其中，token序列包括源代码文件中的多个字符串；根据token序列自顶向下构建源代码文件的ast，其中，token序列中的每个字符串对应一个树节点。

本实施例的token是把vue组件的源代码的语句进行类似分词得到的单词，token序列即由多个单词组成的单词序列，单词是一个字符串，是构成源代码的最小单位。

在本实施方式中，自顶向下构建ast过程包括两种，一种为递归子程序法，而另外一种即是ll分析法(一种自顶向下分析的编译方法)。在采用ll分析法进行构建时，按照从左到右的顺序执行token序列并在这个过程中产生一个最左推导，从左到右分析和匹配输入的token序列。

在本实施例的另一个实施方式中，根据字符串和字符特征生成vue组件的ast包括：基于字符特征对源代码文件中的多个字符串分别进行词法分析，生成token序列；对token序列进行语法分析，将每个字符串的token转化为树形表达式，以生成源代码文件的ast。

在词法分析过程中，首选读入组成源代码的字符流，并且基于字符特征将它们组织成有意义的词素(lexeme)的序列，并对每个词素产生词法单元(token)，词法分析就是将源程序(可以认为是一个很长的字符串)读进来，并且“切”成小段(每一段就是一个词法单元token)，每个单元都是有具体的意义的，例如表示某个特定的关键词，或者代表一个数字。

在词法分析过程中，读取字符串代码，然后把它们按照预定的规则合并成一个个的tokens，同时，还可以选择移除空白符，注释等内容，最后，整个代码将被分割进一个tokens序列(一维数组)。在语法分析过程中，将词法分析出来的tokens转化成树形的表达形式，可选的，还可以对tokens进行验证语法，语法如果有错的话，抛出语法错误，当生成树的时候，会对应删除一些没必要的标识tokens(比如不完整的括号)，因此，本实施例的ast有可能不是完全与源代码匹配。

本实施例的vue组件与javascript其他框架的不同在于，vue组件的api(applicationprogramminginterface，应用编程接口)由props，events和slots组成，包括特定的methods属性(方法之间以函数形式可以互相调用)，其中，props允许外部环境传递数据给组件，events允许组件触发外部环境的副作用(额外事件)，slots允许外部环境将额外的内容组合在组件中。因此可以针对vue组件中的props，events，slots，methods在描述文档中形成对应的描述块，通过抽取vue组件的数据传输方式和数据传输对象，函数调用关系等，即可清楚描述vue组件的功能和实现原理。

在本实施例中，根据树节点的节点类型在预设模板文档的描述块中填充树节点的节点内容包括：根据树节点的节点类型匹配目标描述块，其中，目标描述块包括以下之一：props，events，slots，methods，所述props，所述events，所述slots是所述vue组件中函数的应用编程接口api类型，所述methods是所述vue组件中方法之间的调用类型；在目标描述块中填充树节点的节点内容。此外，还可以包括attributes等描述块，下面对各个描述块进行说明：props，从父组件向子组件传递数据的方式；slots为代码脚本中的插槽，分为匿名插槽，具名插槽，作用域插槽；events为代码脚本中的自定义事件；methods为代码脚本中的用户事件。methods对应于vue组件中的函数(function)，函数是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义，函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。methods是通过对象调用的javascript函数。

在一个示例中，源代码如下：

解析得到的ast的数据结构如下：

根据ast映射得到的描述文档包括四个描述块(props，events，slots，methods)，代码如下：

#mycomponent

thisisadescriptionofthecomponent

##props

<！--@vuese:mycomponent:props:start-->

|name|description|type|required|default|

|---|---|---|---|---|

|name|thenameoftheform,upto8characters|`string`/`number`|`true`|-|

<！--@vuese:mycomponent:props:end-->

##events

<！--@vuese:mycomponent:events:start-->

|eventname|description|parameters|

|---|---|---|

|onclear|firewhentheformiscleared|theargumentisabooleanvaluerepresentingxxx|

<！--@vuese:mycomponent:events:end-->

##slots

<！--@vuese:mycomponent:slots:start-->

|name|description|defaultslotcontent|

|---|---|---|

|header|formheader|`<th>title</th>`|

<！--@vuese:mycomponent:slots:end-->

##methods

<！--@vuese:mycomponent:methods:start-->

|method|description|parameters|

|---|---|---|

|clear|usedtomanuallycleartheform|-|

<！--@vuese:mycomponent:methods:end-->。

本实施例的方案可以应用在javascript的vue组件中，在不矛盾的情况下，还可以适用per.js文件，safe.js文件等。

在本实施例的一个实施方式中，在根据ast生成vue组件的描述文档之后，还包括：在设置vue组件与描述文档的关联关系之后，将vue组件上传到javascript组件库。

用户在调用javascript组件库中的vue组件时，可以通过关联关系检索查找关联的描述文档。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

在本实施例中还提供了一种vue组件的文档生成装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图4是根据本发明实施例的vue组件的文档生成装置的结构框图，如图4所示，该装置包括：获取模块40，解析模块42，遍历模块44，填充模块46，其中，

获取模块40，用于获取vue组件的源代码文件，其中，所述vue组件是组成页面视图的抽象单元；

解析模块42，用于解析所述源代码文件，生成对应的抽象语法树ast；

遍历模块44，用于遍历所述ast中各个树节点；

填充模块46，用于根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容，以生成所述vue组件的描述文档，其中，所述描述文档用于记录所述vue组件中各个对象的属性信息和交互关系。

可选的，所述解析模块，具体用于：读取所述源代码文件中的字符串；识别所述字符串的字符特征；根据所述字符串和所述字符特征生成所述vue组件的ast。

可选的，所述解析模块用于根据所述字符串和所述字符特征生成所述vue组件的ast时，具体用于：基于字符特征生成token序列，其中，所述token序列包括所述源代码文件中的多个字符串；根据所述token序列自顶向下构建所述源代码文件的ast，其中，所述token序列中的每个字符串对应一个树节点。

可选的，所述解析模块用于根据所述字符串和所述字符特征生成所述vue组件的ast时，具体用于：基于字符特征对所述源代码文件中的多个字符串分别进行词法分析，生成token序列；对所述token序列进行语法分析，将每个字符串的token转化为树形表达式，以生成所述源代码文件的ast。

可选的，所述解析模块用于识别所述字符串的字符特征时，具体用于以下至少之一：识别所述字符串的props属性；识别所述字符串的字符标识；识别所述字符串的注释信息；识别所述字符串的类型。

可选的，所述填充模块，具体用于：根据所述树节点的节点类型匹配目标描述块，其中，所述目标描述块包括以下之一：props，events，slots，methods，所述props，所述events，所述slots是所述vue组件中函数的应用编程接口api类型，所述methods是所述vue组件中方法之间的调用类型；在所述目标描述块中填充所述树节点的节点内容。

图5是本发明一个实施方式中的vue组件的文档生成装置的结构框图，如图5所示，该装置包括：获取模块40，解析模块42，遍历模块44，填充模块46，上传模块50，其中，上传模块50，用于在所述填充模块根据所述ast生成所述vue组件的描述文档之后，在设置所述vue组件与所述描述文档的关联关系之后，将所述vue组件上传到javascript组件库。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

s1，获取vue组件的源代码文件，其中，所述vue组件是组成页面视图的抽象单元；

s2，解析所述源代码文件，生成对应的抽象语法树ast；

s3，遍历所述ast中各个树节点；

s4，根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容，以生成所述vue组件的描述文档，其中，所述描述文档用于记录所述vue组件中各个对象的属性信息和交互关系。

可选地，在本实施例中，上述存储介质可以包括但不限于：u盘、只读存储器(read-onlymemory，简称为rom)、随机存取存储器(randomaccessmemory，简称为ram)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

s1，获取vue组件的源代码文件，其中，所述vue组件是组成页面视图的抽象单元；

s2，解析所述源代码文件，生成对应的抽象语法树ast；

s3，遍历所述ast中各个树节点；

s4，根据树节点的节点类型在预设模板文档的描述块中填充所述树节点的节点内容，以生成所述vue组件的描述文档，其中，所述描述文档用于记录所述vue组件中各个对象的属性信息和交互关系。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于所述方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。