本发明涉及软件工程软件开发技术领域，具体涉及一种基于测试的网页应用构件抽取与复用的方法。
背景技术：
近十年以来，由于移动设备与桌面设备的快速发展，人们的数字设备越来越多样化，针对不同设备各自开发应用的成本日趋推高；而与此同时，网页应用的发展也异常迅猛，开发工具层出不清，优秀的网页应用数不胜数。
大多数网页应用基于模块化开发，网页由视觉上或功能上的构件构成。这些构件往往是一个网页的主要组成部分。然而网页应用庞大的数量，加上网页功能与目的一定程度上的同质化，意味着这些构件中有不少具有相似的功能。
与此同时，虽然网页应用的开发工具层出不穷，开发社群活跃，网页应用的开发门槛与成本并没有降低，开发网页应用对于初学者来说依然是一件难事。加上新网页应用很可能在功能上只是重复已有网页的某些构件，导致这些工作变得繁复而无聊。
特别地，在网页应用的开发中，基于网页的游戏是十分重要的一块。然而，游戏开发中各种场景、对象以及游戏引擎的开发过程更为复杂。尤其是游戏引擎与场景，对于不同的游戏，可能会有一套相近但不尽相同的物理引擎，或是有相近的场景设置。然而使用现成的物理引擎库对于轻量级的需求来说是一种性能和资源上的浪费，并且灵活性不尽如人意，从头开始写又过于繁杂。若能将现有的游戏引擎或场景的一部分以构件形式抽出，甚至据此建立构件库，将能大大简化网页游戏开发者的工作。
基于以上情况，利用已有网页应用作为模版，从中选择开发者需要的部分作为构件，对其进行抽取并复用可以大大减轻重复性劳动，简化网页应用开发。然而不同开发者开发的网页应用之间，变量命名，项目结构乃至接口可能大相径庭，而手工进行匹配与复用则过于繁杂。如果能对复用环境以及被复用构件的期待功能进行描述，进而进行自动适配，那么网页应用的开发成本与门槛将可以大大降低，开发效率也能提高，开发者的精力可以从重复的繁琐的工作中被解放出来。
现有技术方案通常先设计出一套固定的构件库，再根据各个应用的需求来组合构件。其主要步骤包括：预先开发一套页面构件，统一接口，并针对各个平台进行兼容优化，之后使用同一套构件进行开发，以达到跨平台复用、降低成本的目的。该技术虽然某种程度上降低了开发成本，实现了构件的复用，但是它把可选构件范围限制在了一个预先定义的构件库里，极大地限制了开发者设计的自由，一定程度上加剧了网页应用的同质化。而若要开发大量构件库以满足开发者的自由创作需求，前期设计成本又必将大幅推高。
技术实现要素：
本发明的目的是克服现有方法的不足，提出了一种基于测试的网页构件抽取与复用方法。通过对网页使用代码静态分析技术，生成系统依赖图，再以用户预先在网页源代码中定义的入口为起点从依赖图中抽取出需要复用的构件。之后使用基于测试驱动的开发方法对构件进行重构，使得抽取出的构件可以移植到目标软件系统中，使其成为可复用与实例网页的构件。该方法使用已有网页作为模板，复用其中构件以简化与优化网页应用开发的成本。
为了解决上述问题，本发明提出了一种基于测试的网页构件抽取与复用方法，所述方法包括：
依据网页的源码及JavaScript/CSS以及其他相关资源生成依赖图，并依据用户提供的入口抽取构件。
对抽取出的构件按照测试用例描述的需求以及复用实例环境进行重构，移植到复用实例网页的预设入口处。
优选地，所述生成依赖图并抽取构件，具体为：
对网页的HTML代码与JavaScript和CSS代码进行定位与匹配；
生成网页的抽象语法树AST；依据抽象语法树AST等生成系统依赖图；
用户或开发者定位用于抽取构件的预定义入口；
获取预定义入口处的HTML元素属性的初始信息；
从预定义入口抽取构件，并对构件进行变形。
优选地，所述对抽取出的构件进行重构并移植到复用实例网页的预设入口处，具体为：
根据所描述的复用构件需求生成测试用例；
生成复用实例环境的测试用例；
创建复用测试环境；
使用遗传算法依据测试用例对构件进行自动化重构，并移植到复用实例网页的预定义入口处。
在本发明实施例中，提出了一种基于测试的网页构件抽取与复用方法，该方法可以利用已有网页应用作为模版，从中选择开发者需要的构件(如网页的某个功能，网页游戏的某个场景素材或游戏引擎的某个部分)，对其进行抽取并复用。网页应用、网页游戏引擎和场景的开发成本与门槛大大降低，开发效率也能有所提高，开发者的精力可以从重复的繁琐的工作中被解放出来。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1是本发明实施例的一种基于测试的网页构件抽取与复用方法的流程示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1是本发明实施例的一种基于测试的网页构件抽取与复用方法的流程示意图，如图1所示，该方法包括：
S1，依据网页的源码及JavaScript/CSS以及其他相关资源生成依赖图，并依据用户提供的入口抽取构件；
S2，对抽取出的构件按照测试用例描述的需求以及复用实例环境进行重构，移植到复用实例网页的预设入口处。
步骤S1，具体如下：
S11，对网页的HTML代码与JavaScript和CSS代码进行定位与匹配。该步骤中使用HTML中元素的属性(class，id等)对相应JavaScript代码与CSS代码进行定位与匹配。
S12，生成网页的抽象语法树AST。具体为依据网页相关的JavaScript代码，生成相应抽象语法树。
S13，依据抽象语法树AST等生成系统依赖图。该步骤中系统依赖图是指网页相关JavaScript代码中变量的依赖关系与函数的调用关系图，可以通过对AST以及网页DOM的遍历得到。DOM即文档对象模型，是网页HTML源代码的树形结构表示。
S14，用户或开发者定位用于抽取构件的预定义入口。该步骤中预定义入口通过代码注释进行标记定义，抽取工作将以此处作为起点。
S15，获取预定义入口处的HTML元素属性的初始信息。具体为对S14中用户标注的入口处的HTML元素的属性(如class，id等)进行获取。
S16，从预定义入口抽取构件。具体为从S14中定义的入口开始，以S15中获取的初始信息为起点，遍历S13中的系统依赖图，将所有相关的代码片段抽出，形成一个整体，即一个网页构件。
S17，对构件进行变形。具体为对S16抽取出的网页构件进行进一步处理，包括但不限于代码块的行内化变形。
步骤S2，具体如下：
S21，根据所描述的复用构件需求生成测试用例。如果构件可通过所有这些测试用例，即为满足需求。
S22，复用实例环境的测试用例。具体为构件复用目标实例网页的测试用例，包含两部分：原网页的测试用例，包含复用构件后的实例网页的增强测试用例。所述原网页的测试用例是指原本网页应用所包含的对原有网页应用本身进行表述的测试用例，如本身不包含测试用例则需要开发者手动撰写测试用例对其进行描述。包含复用构件后的实例网页的增强测试用例是指对原网页与满足需求的复用构件组合之后的网页应用进行描述的测试用例。该部分测试用例可以由开发者根据S21中对复用构件需求的描述测试用例以及所述原网页的测试用例进行撰写。
S23，创建复用测试环境。具体为依据S11中HTML代码、JavaScript代码与CSS代码的匹配关系，将整个模板网页中与构件相关的HTML代码与CSS代码置于复用实例网页环境中，为S24中JavaScript的测试创建环境。
S24，使用遗传算法依据测试用例对构件进行自动化重构，并移植到复用实例网页的预定义入口处。具体为：
用遗传算法以S17中形成的经过行内化变换的代码为基因库，生成子代，进行繁衍、自然选择、突变等操作。其中：
基因库中每一行代码为一个基因片段。
繁衍是指子代间交换基因片段。
自然选择是指对生成子代进行筛选，淘汰不符合要求的子代；自然选择的淘汰机制具体是指使用测试用例对其进行测试。首先子代构件与实例网页进行拼合后必须无错地通过解释器(包含但不限于V8JavaScript引擎)的解释。接着子代构件与实例网页拼合后的网页应用必须通过S22复用实例环境的测试用例中的原网页测试用例，即“回归测试”，以保证原本功能完好。之后子代构件与实例网页拼合后的网页应用需进行S22复用实例环境的测试用例中的包含复用构件后的实例网页的增强测试用例，以测试是否包含子代构件需求中所述的新功能。
突变是指按照一定概率对产生的子代进行变化，包含交换语句或语句块顺序，添加或删除语句或语句块。
自动化映射是指对模板网页与复用实例网页的变量进行映射。变量映射基于双方代码片段中对相应变量的操作行为判断得出。其判断方法包含但不限于tokenization。tokenization是指标签化，此处指一种将复杂代码信息转换为标签序列的技术。转换完成后有利于对复杂代码信息进行比对与匹配。
在本发明公开了一种基于测试的网页构件抽取与复用方法，该方法可以利用已有网页应用作为模版，从中选择开发者需要的构件(如网页的某个功能，网页游戏的某个场景素材或游戏引擎的某个部分)，对其进行抽取并复用。网页应用、网页游戏引擎和场景的开发成本与门槛大大降低，开发效率也能有所提高，开发者的精力可以从重复的繁琐的工作中被解放出来。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁盘或光盘等。
另外，以上对本发明实施例所提供的一种基于测试的网页构件抽取与复用方法进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。