CN114706649B - 一种表单字段销毁与重建方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例提供一种表单字段销毁与重建方法、装置、设备及存储介质，属于计算机技术领域。所述表单字段销毁与重建方法包括：对表单字段所对应的状态变化信息进行实时存储；监听表单字段是否在可视区范围内，并根据监听情况采取相应的字段销毁措施或字段重建措施。采用本发明的技术方案，可确保表单字段所对应的状态变化信息在随表单字段进入可视区时能被重建，从而提示用户。该方案弥补了现有表单虚拟滚动的不足，特别是在表单字段众多、表单数据量较大的情况下，显著地提升了用户体验。

Description

一种表单字段销毁与重建方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，具体地涉及一种表单字段销毁与重建方法、装置、设备及存储介质。

背景技术

目前，在前端页面展示中，常常会出现因待滚动表单的字段较多等原因而导致的页面滚动的卡顿问题。针对这一问题，现有技术中引了虚拟滚动予以解决。虚拟滚动的基本原理是：确定滚动的可视区，每次只渲染可视区中的表单字段，而超出可视区的表单字段对应的页面元素则被销毁，以释放出其占有的内存，进而达到减少前端性能负担的目的。

但是，本申请发明人在实现本发明的过程中发现：在应用虚拟滚动时，表单字段可能在校验未完成的情况下就滚出了可视区，进而直接被销毁，使得该表单字段即使在后续因再次进入可视区而被重新渲染，也已经无法获知该表单字段是否完成了校验，而若是校验一直无法完成，又将影响整个表单的提交，严重影响用户体验。

因此，需要提供在虚拟滚动中增强用户体验的表单字段销毁与重建方案。

发明内容

本发明实施例的目的是提供一种表单字段销毁与重建的方法、装置、设备及存储介质，用于至少部分地解决上述技术问题。

为了实现上述目的，本发明实施例提供一种表单字段销毁与重建方法，包括：响应于表单字段的状态变化，存储该表单字段对应的状态变化信息；监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内；若所判断的表单字段不在所述可视区范围内，则销毁该表单字段及其对应的状态变化信息；以及若所判断的表单字段处于所述可视区范围内，则重新渲染该表单字段及其对应的状态变化信息。

优选地，所述状态变化信息包括：用于提示表单字段校验状态变化的第一提示信息；用户按需标注的第二提示信息；和/或后台服务器发送的第三提示信息。

优选地，所述第一提示信息包括校验成功信息和校验错误信息。

优选地，所述存储该表单字段对应的状态变化信息包括：确定所述表单字段的唯一标识，并将该唯一标识与对应的状态变化信息进行关联存储；和/或获取当前页面的数据结构，并在该数据结构中选择数据存储位置来存储所述状态变化信息。

优选地，所述确定所述表单字段的唯一标识包括：针对表单中以非表格形式展示的字段，设定不同字段以不同名称作为所述唯一标识；以及针对表单中以表格形式展示的字段，将字段名称与该字段在表格中的位置关联存储为所述唯一标识。

优选地，所述实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内包括：根据可视区尺寸以及表单字段的指定角位置相对于可视区的边界的距离，判断该表单字段是否在所述可视区范围内。

优选地，所述存储、所述监听、所述判断、所述销毁及所述重新渲染通过调用运行所述页面的浏览器的相应功能接口来实现。

优选地，所述重新渲染该表单字段及其对应的状态变化信息包括：查询针对待渲染的表单字段是否存储有状态变化信息，若是，则一并渲染所述表单字段和所述状态变化信息，否则仅渲染所述表单字段。

另一方面，本发明还提供一种表单字段销毁与重建装置，包括：存储模块，用于响应于表单字段的状态变化，存储该表单字段对应的状态变化信息；监听模块，用于监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内；销毁模块，用于在所判断的表单字段不在所述可视区范围时，销毁该表单字段及其对应的状态变化信息；以及重建模块，用于在所判断的表单字段处于所述可视区范围时，重新渲染该表单字段及其对应的状态变化信息。

另一方面，本发明还提供一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行本申请上述任意的表单字段销毁与重建方法。

另一方面，本发明还提供一种表单字段销毁与重建设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任意的表单字段销毁与重建方法。

通过上述技术方案，本发明方案将表单字段与对应的状态变化信息一并存储，并在虚拟滚动的过程中，使得状态变化信息随表单字段进入可视区而一并被渲染，从而能够达到提示用户表单字段发生了状态变化的目的，例如提示用户表单校验未通过等，弥补了现有虚拟滚动存在的不足，提高了用户体验。

本发明实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明实施例，但并不构成对本发明实施例的限制。在附图中：

图1是本发明实施例的表单字段销毁与重建方法的流程示意图；

图2是本发明实施例的示例中的表单字段销毁与重建的示意图；

图3是本发明实施例的示例中的提示文案随字段一并重新渲染的示意图；

图4是本发明另一实施例的表单字段销毁与重建装置的结构示意图；以及

图5是本发明另一实施例的表单字段销毁与重建设备的结构示意图。

附图标记说明

100、可视区；200、非可视区；300、滚动条；401、存储模块；402、监听模块；403、销毁模块；404、重建模块。

具体实施方式

以下结合附图对本发明实施例的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明实施例，并不用于限制本发明实施例。

图1是本发明实施例的表单字段销毁与重建方法的流程示意图，其中该表单字段销毁与重建方法由客户端在前面执行，例如由浏览器执行。如图1所示，该表单字段销毁与重建方法可以包括以下的步骤S100-S400。

步骤S100，响应于表单字段的状态变化，存储该表单字段对应的状态变化信息。

其中，所述状态变化信息是用于指示表单字段响应于用户或后台处理而呈现的变化。举例而言，状态变化信息指示某表单字段从未填写状态变化为填写状态。

在本发明优选的实施例中，所述状态变化信息可以包括：用于提示表单字段校验状态变化的第一提示信息；用户按需标注的第二提示信息；和/或后台服务器发送的第三提示信息。

对于第一提示信息，举例而言，某表单字段要求填写“用户名”，但后台对用户填写的用户名进行校验后发现其填写的用户名超过了20个字符，不符合设置的规则，从而生成第一提示信息来提醒用户该字段的校验未通过；承接于此，当用户修改用户名之后，再次校验通过时，则移除指示校验未通过的第一提示信息，但而后可以生成指示校验通过的第一提示信息。即，所述第一提示信息可以包括校验成功信息和校验错误信息。但在实践中，用户往往更关心的是校验错误信息，因为若校验成功，出于对虚拟滚动的速度要求，可以不再专门提醒校验成功。

对于第二提示信息，举例而言，用户暂时无法确定填写的“价格”字段的数值是否准确（该数值符合校验规则，但可能跟真实值不一样），则用户可以主动触发该字段的标注功能来标注此字段“存疑”，并使得浏览器生成指示标注有“存疑”的第二提示信息。

对于第三提示信息，举例而言，在用户填写某“价格”字段后，后台服务器通过检索发现相关物品价格在近期因自然灾害等不可抗力而上涨较多，超出了原设定范围，从而后台服务器可主动向前端发送第三提示信息，用以指示该字段的数值“待确认”。

需说明的是，关于上述提示信息，可以例如以悬浮窗的形式展示在相关表单字段旁边。

进一步地，在确定状态变化信息的内容之后，需要存储该状态变化信息。而在优选的实施例中，涉及的存储方法可以包括以下两种方案中的任意一者。

1）确定所述表单字段的唯一标识，并将该唯一标识与对应的状态变化信息进行关联存储。

以校验错误信息为例，每个表单字段有唯一的标识，当校验不通过时，将字段的标识和校验错误信息进行存储，例如可以按如下的表1的方式进行存储。

表1

请注意，如表1的确定所述表单字段的唯一标识是直接命名的方案，即设定不同字段以不同名称作为所述唯一标识。但是，在具体应用中，表单的字段常常会以表格（table）形式进行展示，例如表2。

表2

易知在表2的情形中，仅通过设置不同名称无法确定唯一标识。据此，在优选的实施例中，针对表单中以表格形式展示的字段，将字段名称与该字段在表格中的位置关联存储为所述唯一标识。即，针对表2，可通过下面的表3中添加行号（r1-r3）的方式来进一步生成唯一标识。

表3

如此，针对步骤S100，浏览器内置的功能接口可针对待展示表单的每一字段，监听字段的状态变化，并实时地将发生状态变化的表单字段的唯一标识与其对应的状态变化进行关联存储。

2）获取当前页面的数据结构，并在该数据结构中选择数据存储位置来存储所述状态变化信息。

举例而言，当前展示表单的页面的数据结构为Json结构或者XML结构，而这些数据结构进行数据存储的各个位置具有唯一索引，从而在生成状态变化信息时，直接在Json结构或者XML结构选择并标记用于存储所述状态变化信息的数据存储位置。

步骤S200，监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内。

其中，可用浏览器接口addEventlistener(“scroll”)来实现对表单滚动的监听。

其中，可视区是指界面上向用户展示字段的区域。

在优选的实施例中，所述实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内可以包括：根据可视区尺寸以及表单字段的指定角位置相对于可视区的边界的距离，判断该表单字段是否在所述可视区范围内。举例而言，判断表单字段的左上角距离可视区上边界/下边界/左边界/右边界的距离，当字段左上角距离可视区上边界的距离大于0，且距离可视区下边界的距离小于可视区高度，且距离可视区左边界距离大于0，且距离可视区右边界距离小于可视区宽度，则在可视区范围内，否则不在。

步骤S300，若所判断的表单字段不在所述可视区范围内，则销毁该表单字段及其对应的状态变化信息。

其中，表单字段不在所述可视区范围内存在字段未进入或滚过了可视区的情形。针对该情形，举例而言，将此表单字段及其状态变化信息所对应的页面元素进行销毁，例如使用浏览器接口element.removeChild(child)来移除和销毁相关页面元素，其中页面元素包括但不限于静态内容、指令、表达式、小脚本、声明、注释等。

步骤S400，若所判断的表单字段处于所述可视区范围内，则重新渲染该表单字段及其对应的状态变化信息。

其中，查询针对待渲染的表单字段是否存储有状态变化信息，若是，则一并渲染所述表单字段和所述状态变化信息，否则仅渲染所述表单字段。举例而言，重新渲染此表单字段，例如使用浏览器接口document.createElement()来创建页面元素，使用element.appendChild(child) 来将创建的元素添加到页面中；根据表单字段的标识，查询是否存在状态变化信息，如果存在状态变化信息，则通过浏览器接口document.createElement()和element.appendChild(child)将状态变化信息渲染到页面中。

下面通过示例来具体描述本发明实施例的表单滚动的实现，其中图2是本发明实施例的示例中的表单滚动的示意图，图3是与图2相对应的本发明实施例的示例中的提示文案随字段一并重新渲染的示意图。

如图2所示，界面包括可视区100、非可视区200以及滚动条300，其中非可视区200属于未进入或滚过了可视区100的场景。在现有虚拟滚动中，例如字段3在可视区100中示出有提示文案3（对应为本发明实施例的状态变化信息），但随着滚动条的滚动，字段3及其提示文案3在滚过了可视区100之后将被销毁，而当其重新进入可视区100时，只能重新渲染出字段3，而无法一并渲染出提示文案3。这是因为提示文案3最初是响应于与用户或者后台服务器的交互操作（例如用户的输入操作、用户的鼠标移动操作或者访问后台服务器以得到反馈等）而被触发的，而在重新渲染时，这些交互操作都不存在，从而提示文案无法与字段一并被重新渲染，进而达不到提示用户的目的，带来进一步的不利后果。举例而言，字段3为图3中的“wy核算科目”，而提示文案3为“未在核算科目范围内”，若该提示文案3在“wy核算科目”被重新渲染时未能一并渲染，则可能出现以下两种情形。

1）重新渲染后，字段3处恢复成显示“请选择”，则工作人员（特别是在更换过工作人员的情况下）需要重新查找大量资料以确定相关商品应在的核算科目，且在确定完毕后，还需要进行键盘或鼠标操作来触发后台服务器进行校验以生成“该商品是否在核算科目范围内”的提示文案，造成人力和时间的浪费，极大地影响用户体验。

2）重新渲染后，字段3处仍显示“wy核算科目”，但原本已经校验完毕并生成的提示文案3“未在核算科目范围内”消失，造成工作人员误以为该商品已经通过校验而继续填写其余字段，造成大量无效工作，同样极大地影响用户体验。

据此，继续参考图2、图3，采用本发明实施例的表单字段销毁与重建方法，在字段3及其提示文案3在可视区100中首次显示时，会将该字段3及其提示文案3一并存储，使得提示文案3的触发不再受限于是否存在交互操作，从而可在后续滚动过程中控制提示文案3随字段3的销毁而销毁，以及控制提示文案3随字段3一并重新渲染在可视区100，从而在重新渲染时减少了用户的交互操作，并对字段校验是否完成等继续进行用户提醒，避免了上述耗时耗力的两种情形，特别是在表单字段众多、表单数据量较大的情况下，显著地提升了用户体验。

综上所述，本发明实施例的表单字段销毁与重建方法将表单字段与对应的状态变化信息一并存储，并在虚拟滚动的过程中，使得状态变化信息随表单字段进入可视区而一并被渲染，从而能够达到提示用户表单字段发生了状态变化的目的，例如提示用户表单校验未通过等，弥补了现有虚拟滚动存在的不足，提高了用户体验。

图4是本发明另一实施例的表单字段销毁与重建装置的结构示意图，该表单字段销毁与重建装置与前述实施例的表单字段销毁与重建方法是基于相同的发明思路的。如图4所示，该表单字段销毁与重建装置可以包括：存储模块401，用于响应于表单字段的状态变化，存储该表单字段对应的状态变化信息；监听模块402，用于监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内；销毁模块403，用于在所判断的表单字段不在所述可视区范围时，销毁该表单字段及其对应的状态变化信息；以及重建模块404，用于在所判断的表单字段处于所述可视区范围时，重新渲染该表单字段及其对应的状态变化信息。

需说明的是，本发明实施例的表单字段销毁与重建装置的更多实施细节及效果，可参考上述实施例的表单字段销毁与重建方法，在此则不再进行赘述。

图5是本发明另一实施例的表单字段销毁与重建设备的结构示意图。该表单字段销毁与重建设备可以包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的表单字段销毁与重建方法。需说明的是，该表单字段销毁与重建设备例如是计算机设备。

本发明另一实施例还提供一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行如上所述的表单字段销毁与重建方法。

对于计算机设备及机器可读存储介质中的表单字段销毁与重建方法可参考上述实施例进行理解，在此不再赘述。下面主要结合应用场景对计算机设备及机器可读存储介质进行进一步介绍。

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

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

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

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

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

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

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

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

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

以上结合附图详细描述了本发明实施例的可选实施方式，但是，本发明实施例并不限于上述实施方式中的具体细节，在本发明实施例的技术构思范围内，可以对本发明实施例的技术方案进行多种简单变型，例如改变步骤执行顺序，这些简单变型均属于本发明实施例的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明实施例对各种可能的组合方式不再另行说明。

此外，本发明实施例的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明实施例的思想，其同样应当视为本发明实施例所公开的内容。

Claims (10)

1.一种表单字段销毁与重建方法，其特征在于，包括：

响应于表单字段的状态变化，存储该表单字段对应的状态变化信息，其中所述状态变化信息响应于与用户或者后台服务器的交互操作而被触发，且展示在相关表单字段旁边，用于指示该表单字段响应于用户或后台处理而呈现的变化；

监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内；

若所判断的表单字段未进入或者滚出所述可视区范围内，则销毁该表单字段及其对应的状态变化信息；以及

若所判断的表单字段重新进入所述可视区范围内，则重新渲染该表单字段及其对应的状态变化信息；

其中，所述存储该表单字段对应的状态变化信息包括：确定所述表单字段的唯一标识，并将该唯一标识与对应的状态变化信息进行关联存储；和/或获取当前页面的数据结构，并在该数据结构中选择数据存储位置来存储所述状态变化信息，其中所述数据结构进行数据存储的各个位置具有唯一索引。

2.根据权利要求1所述的表单字段销毁与重建方法，其特征在于，所述状态变化信息包括：用于提示表单字段校验状态变化的第一提示信息；用户按需标注的第二提示信息；和/或后台服务器发送的第三提示信息。

3.根据权利要求2所述的表单字段销毁与重建方法，其特征在于，所述第一提示信息包括校验成功信息和校验错误信息。

4.根据权利要求1所述的表单字段销毁与重建方法，其特征在于，所述确定所述表单字段的唯一标识包括：

针对表单中以非表格形式展示的字段，设定不同字段以不同名称作为所述唯一标识；以及

针对表单中以表格形式展示的字段，将字段名称与该字段在表格中的位置关联存储为所述唯一标识。

5.根据权利要求1所述的表单字段销毁与重建方法，其特征在于，所述实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内包括：

根据可视区尺寸以及表单字段的指定角位置相对于可视区的边界的距离，判断该表单字段是否在所述可视区范围内。

6.根据权利要求1所述的表单字段销毁与重建方法，其特征在于，所述存储、所述监听、所述判断、所述销毁及所述重新渲染通过调用运行所述页面的浏览器的相应功能接口来实现。

7.根据权利要求1所述的表单字段销毁与重建方法，其特征在于，所述重新渲染该表单字段及其对应的状态变化信息包括：

查询针对待渲染的表单字段是否存储有状态变化信息，若是，则一并渲染所述表单字段和所述状态变化信息，否则仅渲染所述表单字段。

8.一种表单字段销毁与重建装置，其特征在于，包括：

存储模块，用于响应于表单字段的状态变化，存储该表单字段对应的状态变化信息，其中所述状态变化信息响应于与用户或者后台服务器的交互操作而被触发，且展示在相关表单字段旁边，用于指示该表单字段响应于用户或后台处理而呈现的变化；

监听模块，用于监听表单随页面的滚动，并实时判断所监听的表单中发生状态变化的表单字段是否在可视区范围内；

销毁模块，用于在所判断的表单字段未进入或者滚出所述可视区范围时，销毁该表单字段及其对应的状态变化信息；以及

重建模块，用于在所判断的表单字段重新进入所述可视区范围时，重新渲染该表单字段及其对应的状态变化信息；

其中，所述存储模块用于存储该表单字段对应的状态变化信息包括：确定所述表单字段的唯一标识，并将该唯一标识与对应的状态变化信息进行关联存储；和/或获取当前页面的数据结构，并在该数据结构中选择数据存储位置来存储所述状态变化信息，其中所述数据结构进行数据存储的各个位置具有唯一索引。

9.一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行上述权利要求1至7中任意一项所述的表单字段销毁与重建方法。

10.一种表单字段销毁与重建设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1至7中任意一项所述的表单字段销毁与重建方法。

Images