一种基于JSON的前端撤销方法及相关装置与流程

一种基于json的前端撤销方法及相关装置
技术领域
1.本技术涉及计算机技术领域，特别涉及一种基于json的前端撤销方法、前端撤销装置、服务器以及计算机可读存储介质。


背景技术：

2.随着互联网技术的不断发展，通过网页可以使用越来越多的应用。例如，通过网页应用进行网络聊天，通过网页应用进行文档编辑，通过网页应用进行复杂的操作。可见，通过网页应用可以实现越来越多的软件功能，并且网页应用的功能也越来越多的贴合实际的软件功能。例如，在网页的编辑器中进行撤销或者重做功能。
3.相关技术中，对于有撤销重做功能的前端应用，可以采用前端和后端通信方式实现，但是依赖网络传输，且效率低下。还可以仅通过前端实现，但是会浪费存储空间，或者在操作步骤存储、数据修改时遇到困难。也就是说，相关技术中采用前端的方式进行撤销数据存储，会占用大量的前端存储的空间，导致空间浪费降低硬件资源的利用率。
4.因此，如何降低撤销操作占用的存储空间是本领域技术人员关注的重点问题。


技术实现要素：

5.本技术的目的是提供一种基于json的前端撤销方法、前端撤销装置、服务器以及计算机可读存储介质，以降低页面编辑功能占用的内存空间。
6.为解决上述技术问题，本技术提供一种基于json的前端撤销方法，包括：
7.根据json格式对页面内容进行抽象，得到json页面数据；
8.根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据；
9.当接收到所述页面修改操作对应的撤销命令时，根据所述json差异数据对页面内容进行恢复。
10.可选的，根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据，包括：
11.根据接收到的所述页面修改操作对所述页面内容进行修改，得到当前页面内容；
12.根据所述当前页面内容对所述json页面数据进行修改，得到当前json页面数据；
13.将所述json页面数据和所述当前json页面数据进行差异对比，得到所述json差异数据。
14.可选的，所述json差异数据包括操作类型和操作数据。
15.可选的，当接收到所述页面修改操作对应的撤销命令时，根据所述json差异数据对页面内容进行恢复，包括：
16.当接收到所述页面修改操作对应的撤销命令时，根据所述json差异数据对所述页面内容对应的json页面数据进行修改，得到已恢复json页面数据；
17.根据所述已恢复json页面数据对页面内容进行恢复。
18.可选的，还包括：
19.当接收到所述撤销命令对应的重做命令时，根据对应的所述json差异数据对所述页面内容执行重新修改操作，得到新的页面内容。
20.可选的，根据json格式对页面内容进行抽象，得到json页面数据，包括：
21.根据json格式对页面内容进行抽象，得到json页面数据，并初始化得到操作位置标记和操作步骤集合；
22.相应的，根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据，包括：
23.根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据；
24.将所述json差异数据保存至所述操作步骤集合，并对所述操作位置标记进行修改。
25.可选的，根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据，包括：
26.根据接收到的页面修改操作对所述json页面数据进行修改，得到当前json页面数据；
27.通过jsondiffpatch插件将所述json页面数据和所述当前json页面数据进行差异对比，得到所述json差异数据。
28.本技术还提供一种基于json的前端撤销装置，包括：
29.页面抽象模块，用于根据json格式对页面内容进行抽象，得到json页面数据；
30.差异数据获取模块，用于根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据；
31.页面撤销模块，用于当接收到所述页面修改操作对应的撤销命令时，根据所述json差异数据对页面内容进行恢复。
32.本技术还提供一种服务器，包括：
33.存储器，用于存储计算机程序；
34.处理器，用于执行所述计算机程序时实现如上所述的基于json的前端撤销方法的步骤。
35.本技术还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的基于json的前端撤销方法的步骤。
36.本技术所提供的一种基于json的前端撤销方法，包括：根据json格式对页面内容进行抽象，得到json页面数据；根据接收到的页面修改操作对所述json页面数据进行修改，得到json差异数据；当接收到所述页面修改操作对应的撤销命令时，根据所述json差异数据对页面内容进行恢复。
37.通过在接收到页面修改操作时对json页面数据进行修改，得到json差异数据，并在进行撤销操作时根据json差异数据进行页面内容的恢复，而不是根据全量数据进行页面恢复，减少json数据对内存空间的占用，提高硬件资源的利用率。
38.本技术还提供一种基于json前端撤销装置、服务器以及计算机可读存储介质，具有以上有益效果，在此不做赘述。
附图说明
39.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
40.图1为本技术实施例所提供的一种基于json的前端撤销方法的流程图；
41.图2为本技术实施例所提供的一种基于json的前端撤销装置的结构示意图。
具体实施方式
42.本技术的核心是提供一种基于json的前端撤销方法、前端撤销装置、服务器以及计算机可读存储介质，以降低页面编辑功能占用的内存空间。
43.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
44.相关技术中，对于有撤销重做功能的前端应用，可以采用前端和后端通信方式实现，但是依赖网络传输，且效率低下。还可以仅通过前端实现，但是会浪费存储空间，或者在操作步骤存储、数据修改时遇到困难。也就是说，相关技术中采用前端的方式进行撤销数据存储，会占用大量的前端存储的空间，导致空间浪费降低硬件资源的利用率。
45.因此，本技术提供一种基于json的前端撤销方法，通过在接收到页面修改操作时对json页面数据进行修改，得到json差异数据，并在进行撤销操作时根据json差异数据进行页面内容的恢复，而不是根据全量数据进行页面恢复，减少json数据对内存空间的占用，提高硬件资源的利用率。
46.以下通过一个实施例，对本技术提供的一种基于json的前端撤销方法进行说明。
47.请参考图1，图1为本技术实施例所提供的一种基于json的前端撤销方法的流程图。
48.本实施例中，该方法可以包括：
49.s101，根据json格式对页面内容进行抽象，得到json页面数据；
50.本步骤旨在根据json格式对页面内容进行抽象，得到json页面数据。也就是将页面内容抽象为json格式的数据，以便后续对页面数据的状态进行确定并量化，使得后续可以对操作进行撤回。
51.其中，json(javascript object notation，javascript简谱对象)格式是一种轻量级的数据交换格式。它基于ecmascript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得json成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
52.其中，根据json格式对页面内容进行抽象，得到json页面数据的方式可以参考现有技术提供的任意一种抽象方式，在此不做具体限定。
53.在具体场景中，本步骤可以包括：
54.根据json格式对页面内容进行抽象，得到json页面数据，并初始化得到操作位置标记和操作步骤集合。
55.也就是说，本可选方案中除了将页面内容进行抽象后得到json页面数据，还初始化得到操作位置标记和操作步骤集合。具体的，将操作位置标记移动至起始位置，可以用0进行表示。将操作步骤集合进行清零。
56.相应的，s102可以包括：
57.步骤1，根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据；
58.步骤2，将json差异数据保存至操作步骤集合，并对操作位置标记进行修改。
59.可见，本步骤旨在说明如何在操作位置标记和操作步骤集合的基础上获取json差异数据。本可选方案中，根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据；然后，将json差异数据保存至操作步骤集合，并对操作位置标记进行修改。
60.s102，根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据；
61.在s101的基础上，本步骤旨在根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据。也就是，获取到执行页面修改操作之前与之后之间的json差异数据。
62.主要是考虑到，现有技术中一般是将编辑过程中的编辑过程的全量数据进行保存，得到json全量数据，以便在撤回或重做时根据json全量数据进行数据恢复和重做。但是，在前端页面中保存json全量数据会增加对内存的占用，不利于页面和浏览器的运行，降低性能资源的利用率。
63.其中，json差异数据包括操作类型和操作数据。其中，操作类型根据操作对象的不同，可以是不同的操作类型。例如，当操作对象是图片时，操作类型就是位移类型，左移、右移等。当操作对象是文本时，操作类型就是编辑类型，删除、新增等。其中，操作数据就是具体的操作数据。
64.可选的，本步骤可以包括：
65.步骤1，根据接收到的页面修改操作对页面内容进行修改，得到当前页面内容；
66.步骤2，根据当前页面内容对json页面数据进行修改，得到当前json页面数据；
67.步骤3，将json页面数据和当前json页面数据进行差异对比，得到json差异数据。
68.可见，本可选方案中主要是说明如何获取到的json差异数据。本可选方案中根据接收到的页面修改操作对页面内容进行修改，得到当前页面内容；根据当前页面内容对json页面数据进行修改，得到当前json页面数据；将json页面数据和当前json页面数据进行差异对比，得到json差异数据。
69.可选的，本步骤可以包括：
70.步骤1，根据接收到的页面修改操作对json页面数据进行修改，得到当前json页面数据；
71.步骤2，通过jsondiffpatch插件将json页面数据和当前json页面数据进行差异对比，得到json差异数据。
72.可见，本可选方案中主要是说明如何获取到的json差异数据。本可选方案中根据接收到的页面修改操作对json页面数据进行修改，得到当前json页面数据；通过
jsondiffpatch插件将json页面数据和当前json页面数据进行差异对比，得到json差异数据。其中，jsondiffpatch插件是一个将两个json文档、文本、数组等进行对比，并生成diff、patch信息的javascript库，该库支持多种formatter格式输出，以及提供可视化界面。
73.s103，当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容进行恢复。
74.在s102的基础上，本步骤旨在当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容进行恢复。
75.其中，撤销命令就是编辑者对当前内容的编辑过程进行撤销的操作。例如，删除了一个词，如果进行撤销就是把这个词进行恢复。
76.由于记录的json差异数据表示的是修改前后的差异数据。因此，恢复过程需要通过当前的页面内容进行恢复。
77.可选的，本步骤可以包括：
78.步骤1，当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容对应的json页面数据进行修改，得到已恢复json页面数据；
79.步骤2，根据已恢复json页面数据对页面内容进行恢复。
80.可见，本可选方案中主要是说明如何进行恢复。本可选方案中当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容对应的json页面数据进行修改，得到已恢复json页面数据；根据已恢复json页面数据对页面内容进行恢复。
81.可选的，本实施例还可以包括：
82.当接收到撤销命令对应的重做命令时，根据对应的json差异数据对页面内容执行重新修改操作，得到新的页面内容。
83.此外，本实施例中除了接收到撤销命令，还可以接收到重做指令。以便对撤销操作的内容进行重做。例如，将撤销前的内容进行恢复。
84.综上，本实施例通过在接收到页面修改操作时对json页面数据进行修改，得到json差异数据，并在进行撤销操作时根据json差异数据进行页面内容的恢复，而不是根据全量数据进行页面恢复，减少json数据对内存空间的占用，提高硬件资源的利用率。
85.以下通过一个具体的实施例，对本技术提供的一种基于json的前端撤销方法做进一步说明。
86.本实施例中，该方法可以包括：
87.步骤1，使用json数据将页面内容抽象表示出来；
88.步骤2，初始化数据并存储，分别为抽象的json数据(第一步得到的数据)、位置标记(开始没有操作设置为0)、步骤集合(用空数组表示当前没有历史操作步骤)；
89.其中，位置标记表示当前操作所处的位置，用数字表示。初始是0，正常操作时每一步操作标记加1，撤销操作标记减1，重做操作标记加1。可以根据位置标记和步骤集合数来判断当前是否可以进行撤销重做：当位置标记大于等于步骤集合数时，表示当前只能进行撤销操作；当位置标记小于步骤集合数并且大于0时，表示当前撤销重做操作都可以进行；当位置标记等于0，步骤集合数大于0时，表示当前只能进行重做操作；当位置标记等于0，步骤集合数等于0时，表示当前既不能撤销也不能重做。撤销或者重做时根据位置标记从步骤集合中取出对应所需要的差异数据：位置标记为n时，撤销操作取步骤集合的第n条数据，重
做操作取步骤集合的第n 1条数据。
90.其中，步骤集合是一个json数组，里面每一条内容都是一个json对象。该json对象是由操作前后的页面json数据计算后得到的差异数据，抽象表示这一步操作修改了页面的什么内容。相较于直接存储页面全量数据，特别是页面数据量很大时，这种存储差异数据的方式可以大大减少存储的数据量，节省存储空间。
91.步骤3，当用户每一步操作修改页面内容时，修改json数据与当前页面内容相对应，然后利用json数据处理插件得到前后json数据的差异内容数据，存储到步骤集合中，将位置标记改为1表示现在操作位置是第一步的位置；
92.其中，处理json数据差异的方法可以选择现有技术提供的任意一种，也可以直接使用一些开源的处理插件。以开源的插件jsondiffpatch为例：
93.抽象表示页面上一块内容的位置及大小信息，距离左边距0，距离上边距0，宽100，高100。
[0094][0095][0096]
移动后数据样例：
[0097]
操作向右移动100，距离左边距100，距离上边距0，宽100，高100
[0098][0099]
调用jsondiffpatch的diff方法可以得到这次操作对应的差异数据difference＝jsondiffpatch.diff(positon,positon_new)。
[0100]
得到差异，只改变了左边距，数组第一位存储的是初始数据左边距0，数组第二位存储的是操作后的数据左边距100，上边距、宽、高前后一致所以差异数据中没有表示。
[0101]
difference＝{
[0102]
left:[0,100]
[0103]
}。
[0104]
可见，差异数据明显小于原始的数据大小，在页面复杂，整体数据量大时，能够节省大量的存储空间。
[0105]
步骤4，用户触发撤销或者重做指令，根据步骤集合中的json差异数据进行执行。
[0106]
其中，当为撤销指令时，通过判断步骤集合里有一步操作，当前操作位置在第一步，确认可以撤销。然后进入撤销操作，拿到步骤集合的第一个位置的数据a，将位置标记改为0。然后利用json数据处理插件，用数据a和当前的json数据可以得到新的json数据。
[0107]
其中，当为重做指令时，通过判断步骤集合里只有一步操作，还有位置标记是1，可知无法进行重做操作。
[0108]
具体的，当为撤销指令时，让页面回到操作之前，也就是需要得到前一步的数据，
[0109]
此时，当前的页面数据positon_new，还有这步操作的差异数据difference，可以先通过jsondiffpatch的reverse方法，得到撤销操作的差异数据(前一步操作向右移动100，left值0变为100，撤销对应的差异数据应该是向左移动100，left值100变为0)。
[0110]
reversedifference＝jsondiffpatch.reverse(difference)；
[0111]
得到结果：
[0112]
reversedifference＝{
[0113]
left:[100,0]
[0114]
}。
[0115]
调用jsondiffpatch的patch方法，可以得到撤销后的数据：
[0116]
position_revoke＝jsondiffpatch.patch(position_new,reversedifference)。
[0117]
得到结果：
[0118][0119]
可以看到得到的结果和操作前的数据position是一致的。此时还可进行回退操作，对应的处理方法和步骤3一样，只需要修改调用方法时传入的参数即可。
[0120]
position_redo＝jsondiffpatch.patch(position_revoke,difference)。
[0121]
步骤5，根据当前json数据修改页面显示内容；
[0122]
步骤6，一步完整的撤销重做操作执行完毕。
[0123]
可见，本实施例通过在接收到页面修改操作时对json页面数据进行修改，得到json差异数据，并在进行撤销操作时根据json差异数据进行页面内容的恢复，而不是根据全量数据进行页面恢复，减少json数据对内存空间的占用，提高硬件资源的利用率。
[0124]
下面对本技术实施例提供的基于json的前端撤销装置进行介绍，下文描述的基于json的前端撤销装置与上文描述的基于json的前端撤销方法可相互对应参照。
[0125]
请参考图2，图2为本技术实施例所提供的一种基于json的前端撤销装置的结构示意图。
[0126]
本实施例中，该装置可以包括：
[0127]
页面抽象模块100，用于根据json格式对页面内容进行抽象，得到json页面数据；
[0128]
差异数据获取模块200，用于根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据；
[0129]
页面撤销模块300，用于当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容进行恢复。
[0130]
可选的，该页面抽象模块100，具体用于根据接收到的页面修改操作对页面内容进行修改，得到当前页面内容；根据当前页面内容对json页面数据进行修改，得到当前json页面数据；将json页面数据和当前json页面数据进行差异对比，得到json差异数据。
[0131]
可选的，该json差异数据包括操作类型和操作数据。
[0132]
可选的，该页面撤销模块300，具体用于当接收到页面修改操作对应的撤销命令时，根据json差异数据对页面内容对应的json页面数据进行修改，得到已恢复json页面数据；根据已恢复json页面数据对页面内容进行恢复。
[0133]
可选的，该装置还可以包括：
[0134]
页面重做模块，用于当接收到撤销命令对应的重做命令时，根据对应的json差异数据对页面内容执行重新修改操作，得到新的页面内容。
[0135]
可选的，该页面抽象模块100，具体用于根据json格式对页面内容进行抽象，得到json页面数据，并初始化得到操作位置标记和操作步骤集合；
[0136]
相应的，页面撤销模块300，具体用于根据接收到的页面修改操作对json页面数据进行修改，得到json差异数据；将json差异数据保存至操作步骤集合，并对操作位置标记进行修改。
[0137]
可选的，该页面撤销模块300，具体用于根据接收到的页面修改操作对json页面数据进行修改，得到当前json页面数据；通过jsondiffpatch插件将json页面数据和当前json页面数据进行差异对比，得到json差异数据。
[0138]
本技术实施例还提供一种服务器，包括：
[0139]
存储器，用于存储计算机程序；
[0140]
处理器，用于执行所述计算机程序时实现如以上实施例所述的基于json的前端撤销方法的步骤。
[0141]
本技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如以上实施例所述的基于json的前端撤销方法的步骤。
[0142]
说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
[0143]
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
[0144]
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd
‑
rom、或技术领域内所公知的任意其它形式的存储介质中。
[0145]
以上对本技术所提供的一种基于json的前端撤销方法、前端撤销装置、服务器以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以对本技术进行若干改进和修饰，这些改进和修饰也落入本技术权利要求的保护范围内。