CN110427215A - 一种应用于前端开发的程序版本差异展示方法及装置 - Google Patents

Abstract

本说明书实施例提供一种应用于前端开发的程序版本差异展示方法及装置。所述方法包括：确定目标程序的多个版本，并获取每个所述版本的版本数据；对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容，以完成不同程序版本的差异展示。

Description

一种应用于前端开发的程序版本差异展示方法及装置

技术领域

本说明书涉及计算机技术领域，尤其涉及一种应用于前端开发的程序版本差异展示方法及装置。

背景技术

随着互联网技术的发展，网络应用已成为人们生活中不可缺少的一部分，为人们的工作和生活带来了很大的便利。网络应用的功能主要是通过智能终端中的应用软件来实现的，例如：通过Web客户端实现网页的浏览。为了对智能终端中的应用软件进行完善，开发人员需要在测试环境中对应用程序的版本进行变更。而在程序版本的变更过程中，需要比较不同程序版本之间的差异，以便开发者能够区分变更内容。

现有技术中，例如在Web应用程序的开发中，随着前端开发日渐复杂，Web页面包含了大量的用户交互，以及不同数据状态下的展示界面，并且在程序开发过程中，不同版本的代码之间的差异不能直观体现。基于代码的差异比较，只查看代码变更部分，无法直观体现差异效果，比如在可视化智能搭建复杂应用中，有很多代码是由平台定义并自动生成，因此开发者不容易区分变更内容。另外，基于页面截图的差异比较，这种方式无法体现复杂交互以及不同页面状态的差异，对于接口、数据模型等深层的差异用户无法感知。

基于现有技术，需要提供一种能直观地、深层次地体现程序版本差异的展示方案。

发明内容

本说明书实施例提供一种应用于前端开发的程序版本差异展示方法及装置，以解决现有技术存在的代码差异不能直观体现，用户无法感知深层次版本差异的问题。

为解决上述技术问题，本说明书实施例是这样实现的：

第一方面，本说明书实施例提供了一种应用于前端开发的程序版本差异展示方法，所述方法包括：

确定目标程序的多个版本，并获取每个所述版本的版本数据；

对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；

根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；

根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

第二方面，本说明书实施例提供了一种应用于前端开发的程序版本差异展示装置，所述装置包括：

获取模块，用于确定目标程序的多个版本，并获取每个所述版本的版本数据；

解析模块，用于对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；

差异对比模块，用于根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；

渲染模块，用于根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

第三方面，本说明书实施例提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述第一方面中所述的方法。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

通过确定目标程序的多个版本，并获取每个版本的版本数据；对不同版本的版本数据执行解析操作，得到不同版本的版本数据所对应的数据类型；根据数据类型所对应的差异对比策略对不同版本之间的版本数据进行差异对比，得到差异数据；根据差异数据以及不同版本的版本数据，对不同版本的页面进行渲染，以便根据渲染结果在不同版本的页面上对差异部分按照预定方式进行显示，并展示差异部分的差异内容，以完成不同程序版本的差异展示。基于本方案，能够实现对不同程序版本页面的渲染，通过渲染后的页面，可直观体现不同版本之间的差异，并且可以展示差异部分的具体差异内容，使用户快速、高效地获取差异细节。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本说明书实施例提供的一种应用于前端开发的程序版本差异展示方法的流程示意图；

图2为本说明书实施例提供的一种版本页面渲染的界面展示示意图；

图3为本说明书实施例提供的一种应用于前端开发的程序版本差异展示装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

当应用程序的版本发生变化后，为了便于一般用户或者软件项目的开发者识别并区分变更内容，需要比较出程序版本之间的详细差异，例如：软件项目在开发过程中，往往涉及到程序的多个版本，通过比较出多个程序版本的详细差异，以便开发者区分变更内容，并对程序的变更影响进行分析等。

然而，在软件项目开发过程中，通常采用修改代码文本的方式来更改版本内容，因此不同版本的代码之间的差异不能直观体现，只查看代码变更部分，无法直观反映到界面、交互、状态的展示效果。特别是在可视化智能搭建复杂应用领域，有很多代码是由平台定义并自动生成，开发者不容易区分变更内容。

例如以Web应用程序为例，现有技术中Web页面版本比较的方案主要包括以下两种，基于代码的差异比较和基于页面截图的差异比较，其中，基于代码的差异比较，因为建站的特殊性，页面布局等操作生成的信息/代码不是用户直接编写出来的，这种方式无法直观体现最终产物、结果差异；另外，基于页面截图的差异比较，这种方式无法体现复杂交互以及不同页面状态的差异，对于接口、数据模型等深层的差异用户无法感知。随着前端交互、状态日渐复杂，前端的很多代码的产物直接影响界面展示，因此上述这两种方式不能快速、高效地让用户获取不同版本间差异，也无法直观地、深层次地对程序版本之间的差异展示。

需要说明的是，本说明书以下内容是在一种实际应用场景下的实施例，即当应用程序为Web应用，在前端开发中针对不同Web应用之间的页面差异进行比较和展示。当然，在现实应用中，本说明书实施例的技术方案不限于Web应用程序的场景，如移动终端应用、小程序等其它软件的版本差异的比较场景也同样适用，并且本说明书实施例也不仅仅限于Web页面之间的差异比对，本说明书实施例不构成对本说明书技术方案使用场景的限定。

基于上述场景，下面对本说明书的方案进行详细说明。

图1为本说明书实施例提供的一种应用于前端开发的程序版本差异展示方法的流程示意图，该方法具体可以包括以下步骤：

在步骤S110中，确定目标程序的多个版本，并获取每个所述版本的版本数据。

在本说明书一个或多个实施例中，所述目标程序可以是Web应用程序，例如：单页Web应用(single page web application，SPA)，SPA就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

进一步地，在本说明书实施例中，可以采用以下方式来确定目标程序的多个版本，例如：根据针对目标程序的历史提交版本所添加的标志位或时间戳，确定目标程序的至少两个版本。

在实际应用场景中，本说明书实施例的Web应用版本比较可以是在前端开发过程中完成的，上述Web应用的版本，可以包括将调整后的Web应用提交到代码服务器视为是该Web应用的一个版本，或者，也可以将调整完成后且发布至Web服务器上的版本视为是该Web应用的一个版本。但是在前端开发过程中，并非每次修改提交到代码服务器上的Web应用都需要发布至Web服务器上，因此，本说明书实施例中的版本可以不对应Web客户端中的具体版本，在开发端的每次修改都可以视为版本发生改变。

另外，应用程序版本的提交可以通过版本管理工具来实现，例如分布式版本控制系统git，它可以记录每次版本修改的文件和文件内容。当每次基于git将调整后的应用程序版本进行提交时，都可以为待提交版本添加标志位或时间戳，并且每个提交的应用程序都有对应的版本哈希，根据标志位可以得知截止到该节点所处理的文件。标志位可以用tag来表示，时间戳即时间节点，以一个实际应用场景为例，通过对Web应用的上一版本进行调整，获得调整后的当前版本，并基于git对当前版本添加第一标志位，同样的，第二标志位可以是在对上一版本的前一个版本进行调整后，针对上一版本添加的标志位。由于每个标志位tag都对应一个版本，因此根据对Web应用所添加的第一标志位和第二标志位，就可以确定该Web应用的当前版本和上一版本。

在本说明书一个或多个实施例中，所述获取每个版本的版本数据，可以包括：从可视化编辑数据库中获取版本的可视化编辑产出数据，可视化编辑数据库包括json对象，可视化编辑产出数据包括代码文本。

具体地，在本说明书实施例中，根据前端开发技术的选择不同，版本数据的提取方式也可以不同，例如：前端开发采用的是React技术栈，那么可以根据React组件树提取组件类型、id、props等版本数据，并且根据具体的业务可能需要提取配套的mock数据(模拟数据)。另外，在实际应用中，对于普通前端技术栈来说，可以使用静态代码分析、运行时代码信息等方式提取不同版本信息。

在一个实际应用场景中，以可视化编辑的前端开发技术为例，通过提取可视化编辑等页面搭建系统所产出的元数据信息，来获取每个版本的版本数据，获取的版本数据包括但不限于：页面组件、页面元素、组件/元素样式、交互逻辑、应用级别数据模型定义、接口定义等信息。由于可视化编辑是将编辑数据都存储到一个大的json对象中，因此可以将json对象作为存放版本数据的数据库，从该数据库中可以提取程序版本的原始数据。在提取不同版本的版本数据时，既可以依次提取，也可以将多个不同版本的版本数据同时提取出来。由于交互逻辑等版本数据是以代码文本的形式体现的，因此提取的版本数据中也包括了代码文本。

在步骤S120中，对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型。

在本说明书一个或多个实施例中，提取了各个不同版本的版本数据之后，可以对不同版本的版本数据进行解析，以便根据版本数据在前端应用中的功能和概念，将不同版本的版本数据划分为不同的数据类型。

具体地，在本说明书实施例中，以可视化编辑的前端开发技术为例，由于提取得到的版本数据中包含了描述类型的数据结构，这里的“类型”是以版本数据在前端应用中的功能和概念来区分的，因此通过对版本数据进行解析，就可以将版本数据划分为不同的数据类型。不同版本中版本数据的数据类型可以是相同的，例如可以包括以下数据类型：组件实例、组件的属性、组件/页面的代码逻辑、组件的位置/样式、应用中用到的网络请求、插件配置、应用的资产/组件依赖。

在步骤S130中，根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据。

在本说明书一个或多个实施例中，可以采用diff(差异对比)的方式提取不同版本的差异信息，对于不同的数据类型所采用的预设差异对比策略(即差异对比方式)也可能不同，具体地，根据前述实施例划分得到的数据类型，针对组件属性、组件的位置/样式等对象使用对象差异对比，忽略对象属性顺序差异，提取对象属性差异信息；针对组件/页面的代码逻辑使用代码文本差异对比，提取行级差异信息。在实际应用中，对于一个对象数据，采用对象差异对比算法是将对象进行深度对比，采用代码文本差异对比则是将对象进行序列化后(如序列化后的多行文本)进行文本对比。

进一步地，根据不同数据类型所确定的差异对比策略，对不同版本之间的相同数据类型的版本数据进行差异对比，得到各个数据类型下的子差异数据，并将各个数据类型下的子差异数据的集合作为差异数据。

在本说明书一个或多个实施例中，对多个不同版本进行版本数据的差异对比时，可以根据数据类型对不同版本的版本数据进行区分，将不同版本中属于同一数据类型下的所有版本数据进行相互对比，例如：将A版本中组件属性类型下的所有版本数据与B版本中组件属性类型下的所有版本数据进行差异对比。由于本说明书实施例是基于多个版本的版本数据做的diff，因此可以获得版本变化后的变化文件(如差异数据)，变化文件包含版本变化后的新增、修改、删除等内容，因此差异数据提取的是不同类型数据的增删改(增加、删除、修改)。在根据数据类型，将不同版本之间的版本数据采用不同的差异对比算法进行差异信息提取后，便可以得到各个数据类型下的子差异数据，例如A版本与B版本在组件属性类型下的子差异数据，将所有数据类型下的子差异数据进行整理生成差异数据。

需要说明的是，在可视化编辑产出数据(即版本数据)中可以忽略与用户编辑行为无关的，仅编辑器生成或理解的数据之间的差异，即该部分数据可以不需要进行差异对比。

下面以一个具体实施例对不同版本进行版本数据的差异对比的方式进行说明：B版本为对A版本进行调整后的版本，将从A版本到B版本中，新增的部分在B版本中被标记为新增，删除的部分在A版本中被标记为删除，修改的部分在A、B版本中都标记为修改，或者在A版本中标记为删除，B版本中标记为新增；以数据类型为组件属性为例，将A版本与B版本采用对象差异对比算法得到组件属性子差异数据，该组件属性子差异数据中可以包含组件属性的增删改。不同数据类型之间对比得到的子差异数据不同，但都可以表示各个数据类型的增删改，对象差异对比的结果是对象属性的增删改，代码文本差异对比的结果是文本行、字符的增删改，并且这些不同数据类型的增删改会体现在diff展示交互逻辑上。

在步骤S140中，根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

在本说明书一个或多个实施例中，所述根据差异数据以及不同版本的版本数据，对不同版本的页面进行渲染，可以包括以下两种方式：

方式一：将差异数据分别与不同版本的版本数据进行合并，得到不同版本的合并数据，对合并数据进行渲染，以得到不同版本渲染后的页面。

根据前述实施例的内容，通过根据数据类型采用不同的差异对比策略提取版本差异信息，便可以得到多个不同版本之间的差异数据，差异数据中包含了对版本数据的增删改，虽然同时比较了多个不同的版本，但是比较得到的差异数据是所有版本之间共同的差异数据，即对多个不同版本来说提取的差异数据可以是相同的。因此，在差异数据一致的情形下，将差异数据分别与不同版本的元数据信息(版本数据)分别进行合并，就可以得到不同版本所对应的合并数据。最后通过对合并数据进行数据的渲染，实现对每个版本页面的渲染。

方式二：将差异数据和不同版本的版本数据分别进行渲染，以得到不同版本渲染后的页面。

与方式一不同的是，方式二是将不同版本之间的差异数据与各个不同版本的元数据信息(版本数据)分别进行渲染，而无需合并后再渲染，通过这种渲染方式也可以实现对每个版本页面的渲染。

进一步地，在本说明书一个实施例中，虽然方式一与方式二渲染的数据对象不同(方式一为合并后的数据，方式二为合并前的数据)，但是两者所采用的渲染技术基本相同，例如：对于不同的前端开发技术来说，在可视化编辑的场景下，可以通过渲染引擎层面进行处理，使用数据进行编辑态渲染，根据数据渲染出页面；在其它技术栈的情形下，通过提供一套辅助库来进行渲染，可以把程序跑起来显示页面，通过辅助类库显示版本的差异数据。另外，如果使用其它前端技术栈时有可能需要基于mock数据的运行时渲染，mock数据不限于外部接口数据、前端页面状态数据等。

在本说明书一个或多个实施例中，所述差异数据中包含差异类型数据，差异类型数据可以表明版本数据的差异类型，比如：数据的增加、删除、修改等类型。根据渲染结果在不同版本的页面上对差异部分进行高亮显示，可以包括：根据差异类型数据，采用不同的颜色在不同版本的页面上对差异部分进行高亮显示。具体地，在对差异化部分进行高亮显示时，针对不同类型的差异，所采用的高亮颜色也可以不同，例如：增加可以用绿色高亮显示，删除可以用红色高亮显示，修改可以用蓝色高亮显示。

对于代码文本的差异化显示来说，可以在不同版本的页面上对不同版本之间存在差异的代码文本进行展示，并对代码文本的差异部分进行高亮显示。在实际应用中，对于代码文本的差异来说，可以在不同版本的页面上直接展示与差异相关的代码文本，并且针对不同的代码文本差异类型，所采用的高亮颜色也可以不同。

进一步地，在本说明书一个或多个实施例中，除了在版本页面上以高亮的形式渲染出不同版本差异部分和代码文本差异外，还可以在版本页面上添加一些差异展示交互相关的界面功能。在实际应用中，以交互方式展示差异部分的差异内容，可以包括至少两方面，一方面，通过交互方式可以深入地展示出具体的差异细节，例如：通过鼠标悬浮、点击等交互方式，页面弹出浮层展示出差异细节(如参数值、代码形式等差异内容)；另一方面，在不同版本的页面上展示可交互的差异列表，通过差异列表可以快速定位不同版本之间的差异点，例如：可使用差异列表快速定位搜索框、点击跳转、打开等方式快速定位这些差异点。

下面结合一具体实施例，对本说明书实施例中不同版本的页面渲染展示效果进行说明，参见图2，该图示出了本说明书实施例提供的一种版本页面渲染的界面展示示意图，依据附图可以看出：

包括两个不同的Web应用版本，即版本A和版本B，版本B是对版本A进行调整后产生的新的版本，版本A中包含页面组件A₁、A₂和A₃，其中，A₁为按钮组件，A₂为开关组件，A₃为矩形组件，前端开发人员对版本A的调整可以包括以下内容：将A₁组件向左移动一段距离，将A₂组件中的开关状态由关(或开)调整为开(或关)，将A₃组件中的矩形修改为一串五角星图形。通过提取版本A和版本B的版本数据，并将版本B和版本A进行差异对比得到差异数据，将差异数据分别与版本A和版本B的版本数据进行合并，对合并后的合并数据进行渲染即得到如图所示的渲染界面。由于对版本A中的页面组件A₁、A₂和A₃都进行了更改，因此对应版本B中的页面组件B₁、B₂和B₃也都进行了高亮显示，对于A₁和A₂组件来说仅仅对位置或状态进行了修改，所以可以用蓝色高亮显示差异，在版本B中A₃组件被删除，而增加了B₃组件，因此A₃组件可以用红色高亮显示差异，B₃组件可以用绿色高亮显示差异。除高亮显示差异外，还以交互方式对A₁、A₂、B₁、B₂的差异内容进行了展示，如图所示，A₁、A₂、B₁、B₂组件的一侧均弹出浮层展示变更内容。

在本说明书实施例中，通过提取多个不同版本的版本数据(如可视化编辑等页面搭建系统产出的元数据信息)，并对版本数据进行一定程度的解析，建立不同维度(即不同数据类型)的版本差异信息，根据版本信息和差异信息对不同版本进行渲染，最大程度模拟页面最终展示效果。采用渲染的方式进行版本差异信息的展示，既可以以高亮的渲染方式直观展示版本间的差异部分，又可以以友好的交互方式辅助开发者发现版本间的差异细节，通过本说明书技术方案可从更高维度理解版本差异，将深层次差异便捷地展示出来，还可以快速定位差异点。

基于同样的思路，本说明书实施例还提供了一种应用于前端开发的程序版本差异展示装置，如图3为本说明书实施例提供的一种应用于前端开发的程序版本差异展示装置，该装置300主要包括：

获取模块301，用于确定目标程序的多个版本，并获取每个所述版本的版本数据；

解析模块302，用于对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；

差异对比模块303，用于根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；

渲染模块304，用于根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

根据本申请的实施例，在所述装置中，所述获取模块301还用于：

根据针对所述目标程序的历史提交版本所添加的标志位或时间戳，确定所述目标程序的至少两个版本。

根据本申请的实施例，在所述装置中，所述获取模块301还用于：

从可视化编辑数据库中获取所述版本的可视化编辑产出数据，所述可视化编辑数据库包括json对象，所述可视化编辑产出数据包括代码文本。

根据本申请的实施例，在所述装置中，所述解析模块302具体用于：

对所述不同版本的版本数据进行解析，以便根据所述版本数据在前端应用中的功能和概念，将所述不同版本的版本数据划分为不同的数据类型。

根据本申请的实施例，在所述装置中，所述差异对比模块303具体用于：

根据所述数据类型确定采用的预设差异对比策略，所述差异对比策略包括对象差异对比和代码文本差异对比；

根据所述差异对比策略，对所述不同版本之间的相同数据类型的版本数据进行差异对比，得到各个数据类型下的子差异数据，并将所述各个数据类型下的子差异数据的集合作为所述差异数据。

根据本申请的实施例，在所述装置中，所述渲染模块304还用于：

将所述差异数据分别与所述不同版本的版本数据进行合并，得到所述不同版本的合并数据，对所述合并数据进行渲染，以得到所述不同版本渲染后的页面；

或者，

将所述差异数据和所述不同版本的版本数据分别进行渲染，以得到所述不同版本渲染后的页面。

根据本申请的实施例，在所述装置中，所述差异数据中包含差异类型数据，所述渲染模块304还用于：

根据所述差异类型数据，采用不同的颜色在所述不同版本的页面上对所述差异部分进行高亮显示。

根据本申请的实施例，在所述装置中，所述渲染模块304进一步用于：

在所述不同版本的页面上对所述不同版本之间存在差异的代码文本进行展示，并对所述代码文本的差异部分进行高亮显示。

根据本申请的实施例，在所述装置中，所述渲染模块304进一步用于：

以交互方式展示所述差异部分的差异内容，并在所述不同版本的页面上展示可交互的差异列表，通过所述差异列表快速定位不同版本之间的差异点。

本说明书实施例还提供一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述一种应用于前端开发的程序版本差异展示方法。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书实施例提供的装置、电子设备、非易失性计算机存储介质与方法是对应的，因此，装置、电子设备、非易失性计算机存储介质也具有与对应方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述对应装置、电子设备、非易失性计算机存储介质的有益技术效果。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device，PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Comell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书一个或多个实施例时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本说明书实施例可提供为方法、系统、或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

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

以上所述仅为本说明书实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (19)

1.一种应用于前端开发的程序版本差异展示方法，所述方法包括：

确定目标程序的多个版本，并获取每个所述版本的版本数据；

对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；

根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；

根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

2.如权利要求1所述的方法，所述确定目标程序的多个版本，包括：

根据针对所述目标程序的历史提交版本所添加的标志位或时间戳，确定所述目标程序的至少两个版本。

3.如权利要求1所述的方法，所述获取每个所述版本的版本数据，包括：

从可视化编辑数据库中获取所述版本的可视化编辑产出数据，所述可视化编辑数据库包括json对象，所述可视化编辑产出数据包括代码文本。

4.如权利要求1所述的方法，所述对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型，包括：

对所述不同版本的版本数据进行解析，以便根据所述版本数据在前端应用中的功能和概念，将所述不同版本的版本数据划分为不同的数据类型。

5.如权利要求1所述的方法，所述根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据，包括：

根据所述数据类型确定采用的预设差异对比策略，所述差异对比策略包括对象差异对比和代码文本差异对比；

根据所述差异对比策略，对所述不同版本之间的相同数据类型的版本数据进行差异对比，得到各个数据类型下的子差异数据，并将所述各个数据类型下的子差异数据的集合作为所述差异数据。

6.如权利要求1所述的方法，所述根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，包括：

将所述差异数据分别与所述不同版本的版本数据进行合并，得到所述不同版本的合并数据，对所述合并数据进行渲染，以得到所述不同版本渲染后的页面；

或者，

将所述差异数据和所述不同版本的版本数据分别进行渲染，以得到所述不同版本渲染后的页面。

7.如权利要求1所述的方法，所述差异数据中包含差异类型数据，所述根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，包括：

根据所述差异类型数据，采用不同的颜色在所述不同版本的页面上对所述差异部分进行高亮显示。

8.如权利要求1所述的方法，还包括：

在所述不同版本的页面上对所述不同版本之间存在差异的代码文本进行展示，并对所述代码文本的差异部分进行高亮显示。

9.如权利要求1所述的方法，所述展示所述差异部分的差异内容，包括：

以交互方式展示所述差异部分的差异内容，并在所述不同版本的页面上展示可交互的差异列表，通过所述差异列表快速定位不同版本之间的差异点。

10.一种应用于前端开发的程序版本差异展示装置，所述装置包括：

获取模块，用于确定目标程序的多个版本，并获取每个所述版本的版本数据；

解析模块，用于对不同版本的版本数据执行解析操作，得到所述不同版本的版本数据所对应的数据类型；

差异对比模块，用于根据所述数据类型所对应的差异对比策略对所述不同版本之间的版本数据进行差异对比，得到差异数据；

渲染模块，用于根据所述差异数据以及所述不同版本的版本数据，对所述不同版本的页面进行渲染，以便根据渲染结果在所述不同版本的页面上对所述差异部分按照预定方式进行显示，并展示所述差异部分的差异内容。

11.如权利要求1O所述的装置，所述获取模块还用于：

根据针对所述目标程序的历史提交版本所添加的标志位或时间戳，确定所述目标程序的至少两个版本。

12.如权利要求10所述的装置，所述获取模块还用于：

从可视化编辑数据库中获取所述版本的可视化编辑产出数据，所述可视化编辑数据库包括json对象，所述可视化编辑产出数据包括代码文本。

13.如权利要求10所述的装置，所述解析模块具体用于：

对所述不同版本的版本数据进行解析，以便根据所述版本数据在前端应用中的功能和概念，将所述不同版本的版本数据划分为不同的数据类型。

14.如权利要求10所述的装置，所述差异对比模块具体用于：

根据所述数据类型确定采用的预设差异对比策略，所述差异对比策略包括对象差异对比和代码文本差异对比；

根据所述差异对比策略，对所述不同版本之间的相同数据类型的版本数据进行差异对比，得到各个数据类型下的子差异数据，并将所述各个数据类型下的子差异数据的集合作为所述差异数据。

15.如权利要求10所述的装置，所述渲染模块还用于：

将所述差异数据分别与所述不同版本的版本数据进行合并，得到所述不同版本的合并数据，对所述合并数据进行渲染，以得到所述不同版本渲染后的页面；

或者，

将所述差异数据和所述不同版本的版本数据分别进行渲染，以得到所述不同版本渲染后的页面。

16.如权利要求10所述的装置，所述差异数据中包含差异类型数据，所述渲染模块还用于：

根据所述差异类型数据，采用不同的颜色在所述不同版本的页面上对所述差异部分进行高亮显示。

17.如权利要求10所述的装置，所述渲染模块进一步用于：

在所述不同版本的页面上对所述不同版本之间存在差异的代码文本进行展示，并对所述代码文本的差异部分进行高亮显示。

18.如权利要求10所述的装置，所述渲染模块进一步用于：

以交互方式展示所述差异部分的差异内容，并在所述不同版本的页面上展示可交互的差异列表，通过所述差异列表快速定位不同版本之间的差异点。

19.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至9中任一项所述的方法。