CN106802799B

CN106802799B - 基于wafⅱ框架的js代码自动提示方法和装置

Info

Publication number: CN106802799B
Application number: CN201611249095.6A
Authority: CN
Inventors: 王泽恺; 王辉
Original assignee: Kingdee Software China Co Ltd
Current assignee: Kingdee Software China Co Ltd
Priority date: 2016-12-29
Filing date: 2016-12-29
Publication date: 2020-06-12
Anticipated expiration: 2036-12-29
Also published as: CN106802799A

Abstract

本发明涉及一种基于WAFⅡ框架的JS代码提示方法，包括打开待编辑JS文件，获取输入的字符串；检测所述输入的字符串是否有预设操作；若检测到所述输入的字符串有预设操作，则根据WAFⅡ框架的API显示与所述预设操作对应的提示代码。采用本方法，能够在WAFⅡ框架下编写JS代码时根据输入的字符串自动显示提示代码，减少手写代码可能出现的错误。此外还提供了一种基于WAFⅡ框架的JS代码提示装置。

Description

基于WAFⅡ框架的JS代码自动提示方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种基于WAFⅡ框架的JS代码提示方法和装置。

背景技术

随着软件行业的高速发展，越来越多软件应运而生。在编写程序时，一般的框架中会提供许多基础的函数，所以许多源代码中会有大量的重复调用的情况。一般的编辑器都能根据输入的字符串，自动将接下来可能会输入的代码显示出来以供用户选择的功能，即代码自动提示功能。由于手写代码很容易出错，代码自动提示功能能够帮助开发者在编辑程序的时候减少不必要的错误。

但是目前对于WAFⅡ框架的开发者来说，并没有哪一种编辑器可以实现WAFⅡ框架下JS(Javascript,一种动态类型、弱类型、基于原型的脚本语言)代码的自动提示功能，使得WAFⅡ框架下手写代码很容易出错。

发明内容

基于此，有必要针对WAFⅡ框架下手写代码容易出错问题，提供一种基于WAFⅡ框架的JS代码自动提示方法和装置。

一种基于WAFⅡ框架的JS代码自动提示方法，包括：

打开待编辑JS文件，获取输入的字符串；

检测所述输入的字符串是否有预设操作；

若检测到所述输入的字符串有预设操作，则根据WAFⅡ框架的API显示与所述预设操作对应的提示代码。

在其中一个实施例中，在所述打开待编辑JS文件，获取输入的字符串之前，包括：

解析页面元数据文件，建立JS文件与所述页面元数据文件解析对象之间的映射关系；

解析JS文件获得所述WAFⅡ框架的API，建立组件类型与组件对象的映射关系和静态方法列表。

在其中一个实施例中，在所述打开待编辑JS文件，获取输入的字符串，包括：

打开所述待编辑JS文件，检测所述待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

在其中一个实施例中，所述若所述输入的字符串有预设操作，则根据所述预设操作显示对应的提示代码，包括：

若检测到所述输入的字符串有选取元素的操作，则显示与所述待编辑JS文件对应的解析对象的元素id或class列表作为提示；

若检测到所述输入的字符串有调用实例方法的操作，则自动补全与输入的字符串中元素的组件类型对应的组件对象的类型属性并显示与所述组件对象对应的实例方法列表作为提示，若所述实例方法为设置属性值或获取属性值的方法，则显示与所述组件对象对应的属性列表作为提示；

若检测到所述输入的字符串有调用静态方法的操作，则显示解析JS文件建立的静态方法列表作为提示。

在其中一个实施例中，在所述若检测到所述输入的字符串有预设操作，则根据所述预设操作显示对应的代码提示之后，包括：

接收输入的字符串，根据所述输入的字符串对显示的所述提示代码进行过滤。

一种基于WAFⅡ框架的JS代码自动提示装置，包括：

字符串获取模块，用于打开待编辑JS文件，获取输入的字符串；

预设操作检测模块，用于检测所述输入的字符串是否有预设操作；

代码提示模块，用于若检测到所述输入的字符串有预设操作，则根据所述WAFⅡ框架的API显示与所述预设操作对应的提示代码。

在其中一个实施例中，所述装置还包括：

页面元数据解析模块，用于解析页面元数据，建立JS文件与所述页面元数据文件解析对象之间的对应关系；

JS文件解析模块，用于解析JS文件获得所述WAFⅡ框架的API，建立组件类型与组件对象的映射关系和静态方法列表。

在其中一个实施例中，所述字符串输入模块，还用于打开所述待编辑JS文件，检测所述待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

在其中一个实施例中，所述代码提示模块，包括：

选取元素提示模块，用于若检测到所述输入的字符串有选取元素的操作，则显示与所述待编辑JS文件对应的解析对象的元素id或class列表作为提示；

调用实例方法提示模块，用于若检测到所述输入的字符串有调用实例方法的操作，则自动补全与输入的字符串中元素的组件类型对应的组件对象的类型属性并显示与所述组件对象对应的实例方法列表作为提示，若所述实例方法为设置属性值或获取属性值的方法，则显示与所述组件对象对应的属性列表作为提示；

调用静态方法提示模块，用于若检测到所述输入的字符串有调用静态方法的操作，则显示解析JS文件建立的静态方法列表作为提示。

在其中一个实施例中，所述装置还包括：

提示代码过滤模块，用于接受继续输入的字符串，根据所述继续输入的字符串对显示的所述提示代码进行过滤。

上述基于WAFⅡ框架的JS代码自动提示方法和装置，通过检测用户在打开的JS文件中输入的字符串是否有预设操作，若有预设操作，则根据WAFⅡ框架的API显示与预设操作对应的提示代码，能够使得在WAFⅡ框架下编写JS代码时，减少手写代码可能出现的错误。

附图说明

图1为一个实施例中基于WAFⅡ框架的JS代码自动提示方法的流程图；

图2为又一个实施例中基于WAFⅡ框架的JS代码自动提示方法的流程图；

图3为再一个实施例中基于WAFⅡ框架的JS代码自动提示方法的流程图；

图4为一个实施例中基于WAFⅡ框架的JS代码自动提示装置的结构框图；

图5为又一个实施例中基于WAFⅡ框架的JS代码自动提示装置的结构框图；

图6为一个实施例中代码提示模块的结构框图；

图7为再一个实施例中基于WAFⅡ框架的JS代码自动提示装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供了一种基于WAFⅡ框架的JS代码自动提示方法，该方法具体包括如下步骤：

步骤102，打开待编辑JS文件，获取输入的字符串。

步骤104，检测输入的字符串是否有预设操作。

本实施例中，在接收到输入的字符串后，会检测字符串是否与预设操作的格式是否相同，若输入的字符串与某类预设操作的格式中前端确定的部分相同，则可认为用户想要输入某类预设操作，如WAFⅡ框架中选取元素的操作格式为waf(“#元素类型”)或waf(“.元素名”)，当检测到输入了“waf(“”时，即可认为输入的字符串有选取元素的操作，并不需要所有确定的字符全部相同才认为是有对应的预设操作。

步骤106，若检测到输入的字符串有预设操作，则根据WAFⅡ框架的API显示与预设操作对应的提示代码。

本实施例中，在检测到输入的字符串有预设操作，需要显示提示代码时，会根据WAFⅡ框架的API中包含的组件类型与组件对象的相关信息，针对不同的操作显示对应的提示代码。某种操作可能会有多种提示代码，在显示提示代码时可以以列表的形式显示。

在本实施例中，通过检测输入的字符串是否有预设操作，若是，则根据WAFⅡ框架的API显示与预设操作对应的提示代码，WAFⅡ框架的API中包含有组件类型与组件对象的相关信息，根据API提供的相关信息可以实现WAFⅡ框架下的JS代码自动提示功能，使得在WAFⅡ框架下编写JS代码时，能够减少手写代码，减少不必要的错误。

在一个实施例中，在打开待编辑JS文件，获取输入的字符串之前，包括：解析页面元数据文件，建立JS文件与页面元数据文件解析对象之间的映射关系；解析JS文件获得WAFⅡ框架的API，建立组件类型与组件对象的映射关系和静态方法列表。

在本实施例中，开发者需要用编辑器打开WAFⅡ框架的webRoot目录或eas_web.war目录，此时编辑器会解析dynamicXML下的所有页面元数据xml文件。页面元数据xml文件中保存有数据属性信息，可以用来支持如指示存储位置、历史数据、资源查找、文件记录等功能。用户需要操作一个文件必须首先得到它的元数据，才能定位到文件的位置并且得到文件的内容和相关属性。解析页面元数据文件，建立JS文件与页面元数据文件解析对象之间的映射关系后，即可得到该JS文件中的元数据对象属性。通过解析webviews/webframework下的JS文件获得WAFⅡ框架的前端API，WAFⅡ框架的前端API中包含有组件类型与组件对象的相关信息，解析JS文件后可以建立组件类型与组件对象的映射关系，组件对象包含组件的相关信息，如组件的方法、属性等，建立框架提供的静态方法列表。

在一个实施例中，打开待编辑JS文件获取输入的字符串，包括：打开待编辑JS文件，检测该待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

在本实施例中，页面元数据文件中保存有通过工具保存或在工具中配置进去的JS文件的相关信息，如JS文件的文件名和路径等信息。如果待编辑JS文件建立了与页面元数据文件之间的映射关系，则页面元数据文件中保存有该JS文件的相关信息。如果在页面元数据文件中有检测到该待编辑JS文件的相关信息，则表明建立了待编辑JS文件与页面元数据文件之间的映射关系，在获取待编辑JS文件中输入的字符串后，才能利用WAFⅡ框架的API获取对应的提示代码。

如图2所示，在一个实施例中，提供了一种基于WAFⅡ框架的JS代码自动提示方法，该方法具体包括如下步骤：

步骤202，打开待编辑JS文件，获取输入的字符串。

步骤204，检测输入的字符串是否有预设操作。

步骤206，若检测到输入的字符串有选取元素的操作，则显示与待编辑JS文件对应的解析对象的元素id或class列表作为提示。

本实施例中，WAFⅡ框架中选取元素的操作的格式有两种，一种是根据元素名称来选取的，格式为waf(“#元素名”)，例如waf(“#queryGrid”)，另一种是根据元素类型来选取的，格式为waf(“.元素类型”)，例如：waf(“.input”)。因此当检测到输入了“waf(“”时，便可以认为输入的字符串有选取元素的操作，若输入的是“waf(“#”，则显示与待编辑JS文件对应的解析对象的元素id列表作为提示，若输入的是“waf(“.”，则显示与待编辑JS文件对应的解析对象的元素class列表作为提示。

步骤208，若检测到输入的字符串有调用实例方法的操作，则自动补全与输入的字符串中元素的组件类型对应的组件对象的类型属性并显示与组件对象对应的实例方法列表作为提示，如果调用的实例方法是设置属性值或获取属性值的方法，则显示与组件对象对应的属性列表作为提示。

本实施例中，WAFⅡ框架中调用实例方法的语法为：waf(“#元素名”).对象类型(“方法名”)，当检测到输入了“waf(“#元素名”).”时，即可初步判断是调用实例方法的操作，根据输入的元素的组件类型，在解析得到的框架API的映射中去找对应的对象的类型属性自动补全到“waf(“#元素名”).对象类型(“”，并将对应对象的实例方法列表作为提示代码，当检测到输入了“waf(“#元素名”).对象类型(“option”,”时，将对应对象的属性列表作为提示代码。具体的，表格的方法调用为：waf(“#queryGrid”).wafGrid(“reloadGrid”)；下拉框的方法调用为：waf(“#nation”).wafSelect(“enable”)；表格的属性值设置为：waf(“#queryGrid”).wafGrid(“option”,“page”,10)；表格的属性值获取为：waf(“#queryGrid”).wafGrid(“option”,“page”)。

步骤210，若检测到输入的字符串有调用静态方法的操作，则显示解析JS文件建立的静态方法列表作为提示。

本实施例中，WAFⅡ框架中调用静态方法的语法为“waf.xxx()”，当检测到输入了“waf.”时，则将解析得到的静态方法列表作为提示。具体的，例如：waf.crossDomainUtil.getParent()；waf.getContextPath()；waf.initComponent(“select”,options,dom)；waf.type.isBoolean(false)；waf.wafText.createTextDom(options)，都是属于静态方法调用的操作。

在本实施例中，预设操作包括选取元素的操作、调用实例方法的操作和调用静态方法的操作，根据输入的字符串来判断用户可能想要输入的操作。当输入的字符串为选取元素的操作时，将与待编辑JS文件对应的解析对象的元素id或class列表作为提示；当输入的字符串为调用实例方法的操作时，根据输入的对象类型，将对应对象的实例方法列表作为提示；当输入的字符串为调用静态方法的操作时，显示解析JS文件建立的静态方法列表作为提示。用户可以从显示的代码提示中直接选取需要的操作，能够减少手写代码，避免不必要的错误。

在一个实施例中，若检测到输入的字符串有预设操作，则根据预设操作显示对应的代码提示之后，包括：接收输入的字符串，根据输入的字符串对显示的提示代码进行过滤。

本实施例中，在检测到输入的字符串有预设操作后，会显示与预设操作对应的代码提示，若显示的可供用户选择的提示代码过多，用户将无法快速找到自己需要的代码，此时，用户可以继续输入字符串，显示的提示代码将会根据用户输入的字符串进行筛选，只显示与输入的字符串相匹配的提示代码，从而使用户可以快速找到需要的代码。

如图3所示，在一个实施例中，提供了一种基于WAFⅡ框架的JS代码自动提示方法，该方法具体包括：

步骤302，解析页面元数据文件，建立JS文件与页面元数据文件解析对象之间的映射关系。

在本实施例中，开发者需要用编辑器打开WAFⅡ框架的webRoot目录或eas_web.war目录，此时编辑器会解析dynamicXML下的所有页面元数据xml文件。页面元数据xml文件中保存有数据属性信息，可以用来支持如指示存储位置、历史数据、资源查找、文件记录等功能。用户需要操作一个文件必须首先得到它的元数据，才能定位到文件的位置并且得到文件的内容和相关属性。解析页面元数据文件，建立JS文件与页面元数据文件解析对象之间的映射关系后，即可得到该JS文件对应页面的元数据对象信息。

步骤304，解析JS文件获得WAFⅡ框架的API，建立组件类型与组件对象的映射关系和静态方法列表。

通过解析webviews/webframework下的JS文件获得WAFⅡ框架的前端API，WAFⅡ框架的前端API中包含有组件类型与组件对象的相关信息，解析JS文件后可以建立组件类型与组件对象的映射关系，组件对象包含组件的相关信息，如组件的方法、属性等，建立框架提供的静态方法列表。

步骤306，打开待编辑JS文件，检测待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

步骤308，检测输入的字符串是否有预设操作。

本实施例中，在接收到输入的字符串后，会检测字符串是否与预设操作的格式是否相同，若输入的字符串与某类预设操作的格式中前端确定的部分相同，则可认为用户想要输入某类预设操作，如WAFⅡ框架中选取元素的操作格式为waf(“#元素名”)或waf(“.元素类型”)，当检测到输入了“waf(“”时，即可认为输入的字符串有选取元素的操作，并不需要所有确定的字符全部相同才认为是有对应的预设操作。

步骤310，若检测到输入的字符串有选取元素的操作，则显示与待编辑JS文件对应的解析对象的元素id或class列表作为提示。

本实施例中，WAFⅡ框架中选取元素的操作的格式有两种，一种是根据元素名来选取的，格式为waf(“#元素名”)，例如waf(“#queryGrid”)，另一种是根据元素类型来选取的，格式为waf(“.元素类型”)，例如：waf(“.input”)。因此当检测到输入了“waf(“”时，便可以认为输入的字符串有选取元素的操作，若输入的是“waf(“#”，则显示与待编辑JS文件对应的解析对象的元素id列表作为提示，若输入的是“waf(“.”，则显示与待编辑JS文件对应的解析对象的的元素class列表作为提示。

步骤312，若检测到输入的字符串有调用实例方法的操作，则自动补全与输入的字符串中元素的组件类型对应的组件对象的类型属性并显示与组件对象的实例方法列表作为提示，如果调用的实例方法是设置属性值或获取属性值的方法，则显示与组件对象对应的属性列表作为提示。

步骤314，若检测到输入的字符串有调用静态方法的操作，则显示解析JS文件建立的静态方法列表作为提示。

本实施例中，WAFⅡ框架中调用静态方法的语法为“waf.xxx()”，当检测到输入了“waf.”时，则将解析JS文件得到的静态方法列表作为提示。具体的，例如：waf.crossDomainUtil.getParent()；waf.getContextPath()；waf.initComponent(“select”,options,dom)；waf.type.isBoolean(false)；waf.wafText.createTextDom(options)，都是属于静态方法调用的操作。

步骤316，接收输入的字符串，根据输入的字符串对显示的代码提示进行过滤。

在本实施例中，会预先对页面元数据文件和JS文件进行解析，根据WAFⅡ框架的前端API建立JS文件与页面元数据文件解析对象之间的映射关系，建立组件类型与组件对象的映射关系和静态方法列表，当检测到输入的字符串有选取元素的操作或调用实例方法的操作或调用静态方法的操作时，会显示与输入的操作对应的提示代码，显示的提示代码可能很多，可以以列表的形式显示。当显示的提示代码很多时，用户可以继续输入字符串，根据继续输入的字符串，对显示的提示代码进行筛选，保留与输入的字符串想匹配的提示代码，使得用户在WAFⅡ框架下编写JS代码时，可以根据输入的字符串预测可能的操作，显示对应的提示代码，减少手写代码，避免不必要的错误。

如图4所示，在一个实施例中，提供了一种基于WAFⅡ框架的JS代码自动提示装置，该装置包括：

字符串获取模块402，用于打开待编辑JS文件，获取输入的字符串。

预设操作检测模块404，用于检测输入的字符串是否有预设操作。

代码提示模块406，用于若检测到输入的字符串有预设操作，则根据WAFⅡ框架的API显示与预设操作对应的提示代码。

如图5所示，在一个实施例中，基于WAFⅡ框架的JS代码自动提示装置还包括：

页面元数据解析模块408，用于解析页面元数据，建立JS文件与页面元数据文件解析对象之间的对应关系。

JS文件解析模块410，用于解析JS文件获得WAFⅡ框架的API，建立组件类型与组件对象的映射关系和静态方法列表。

在一个实施例中，字符串输入模块402，还用于打开待编辑JS文件，检测待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

如图6所示，在一个实施例中，代码提示模块406包括：

选取元素提示模块4061，用于若检测到输入的字符串有选取元素的操作，则显示与待编辑JS文件对应的解析对象的元素id或class列表作为提示。

调用实例方法提示模块4063，用于若检测到输入的字符串有调用实例方法的操作，则自动补全与输入的字符串中元素的组件类型对应的组件对象的类型属性并显示与组件对象的实例方法列表作为提示，如果调用的实例方法是设置属性值或获取属性值的方法，则显示与组件对象对应的属性列表作为提示。

调用静态方法提示模块4065，用于若检测到输入的字符串有调用静态方法的操作，则显示解析JS文件建立的静态方法列表作为提示。

如图7所示，在一个实施例中，基于WAFⅡ框架的JS代码自动提示装置还包括：

提示代码过滤模块412，用于接收输入的字符串，根据输入的字符串对显示的提示代码进行过滤。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims

1.一种基于WAFⅡ框架的JS代码自动提示方法，包括：

建立WAFⅡ框架API中包含的组件类型与组件对象的映射关系及静态方法列表；

打开待编辑JS文件，获取输入的字符串；

检测所述输入的字符串是否有预设操作；

若检测到所述输入的字符串有预设操作，则根据所述映射关系及静态方法列表，以列表的形式显示与所述预设操作对应的提示代码；

所述检测所述输入的字符串是否有预设操作，包括：

检测所述输入的字符串是否与预设操作的格式中前端部分相同；

所述若检测到所述输入的字符串有预设操作，则根据所述映射关系及静态方法列表，以列表的形式显示与所述预设操作对应的提示代码，包括：

若检测到所述输入的字符串有调用实例方法的操作，则自动补全与所述输入的字符串中元素的组件类型对应的组件对象的类型属性，并显示与所述组件对象对应的实例方法列表作为提示；

2.根据权利要求1所述的方法，其特征在于，在所述打开待编辑JS文件，获取输入的字符串之前，包括：

3.根据权利要求2所述的方法，其特征在于，在所述打开待编辑JS文件，获取输入的字符串，包括：

4.根据权利要求3所述的方法，其特征在于，若所述实例方法为设置属性值或获取属性值的方法，则显示与所述预设操作对应的提示代码，包括：

显示与所述组件对象对应的属性列表作为提示。

5.根据权利要求3所述的方法，其特征在于，所述若检测到所述输入的字符串有预设操作，则根据所述映射关系及静态方法列表，以列表的形式显示与所述预设操作对应的提示代码，还包括：

若检测到所述输入的字符串有选取元素的操作，则显示与所述待编辑JS文件对应的解析对象的元素id或class列表作为提示。

6.根据权利要求1所述的方法，其特征在于，在所述若检测到所述输入的字符串有预设操作，则根据所述预设操作显示对应的代码提示之后，包括：

7.一种基于WAFⅡ框架的JS代码自动提示装置，其特征在于，所述装置包括：

建立模块，用于建立WAFⅡ框架API中包含的组件类型与组件对象的映射关系及静态方法列表；

代码提示模块，用于若检测到所述输入的字符串有预设操作，则根据所述映射关系及静态方法列表，以列表的形式显示与所述预设操作对应的提示代码；

预设操作检测模块，具体用于检测所述输入的字符串是否与预设操作的格式中前端部分相同；

所述代码提示模块，包括：

调用实例方法提示模块，用于若检测到所述输入的字符串有调用实例方法的操作，则自动补全与所述输入的字符串中元素的组件类型对应的组件对象的类型属性，并显示与所述组件对象对应的实例方法列表作为提示；

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

页面元数据文件解析模块，用于解析页面元数据文件，建立JS文件与所述页面元数据文件解析对象之间的对应关系；

9.根据权利要求8所述的装置，其特征在于，所述字符串获取模块，还用于打开所述待编辑JS文件，检测所述待编辑JS文件是否建立了与页面元数据文件之间的映射关系，若是，则获取输入的字符串。

10.根据权利要求9所述的装置，其特征在于，所述调用实例方法提示模块，还用于若所述实例方法为设置属性值或获取属性值的方法，则显示与所述组件对象对应的属性列表作为提示。

11.根据权利要求9所述的装置，其特征在于，所述代码提示模块还包括选取元素提示模块，用于若检测到所述输入的字符串有选取元素的操作，则显示与所述待编辑JS文件对应的解析对象的元素id或class作为提示。

12.根据权利要求7所述的装置，其特征在于，所述装置还包括：

提示代码过滤模块，用于接受输入的字符串，根据所述输入的字符串对显示的所述提示代码进行过滤。