CN114254228A - 一种数据动态绑定的web应用处理方法及相关装置 - Google Patents

Abstract

本申请公开了一种数据动态绑定的web应用处理方法，包括：创建页面表单，并将所述页面表单渲染至前端页面；将所述页面表单虚拟缓存至内存中的虚拟DOM树；通过JS对象对所述页面表单的变化进行监听；当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。通过虚拟DOM树实现将页面表单的变化进行实时渲染，而不是通过手动操作JS对象对页面的元素进行实时渲染，提高了对DOM进行操作的性能，降低了UI阻塞的风险，提高了用户的体验。本申请还公开了一种数据动态绑定的web应用处理装置、服务器以及计算机可读存储介质，具有以上有益效果。

Description

一种数据动态绑定的web应用处理方法及相关装置

技术领域

本申请涉及计算机技术领域，特别涉及一种数据动态绑定的web应用处理方法、web应用处理装置、服务器以及计算机可读存储介质。

背景技术

随着信息技术的不断发展，在网页技术领域中，可以实现更多动态的显示内容，实现更多的功能，以提高用户的体验。

现有技术中，为了实现前端页面的动态显示，也就是涉及到表单元素增删、属性改变时，需要通过JavaScript手动操作DOM(Document Object Model，文档对象模型)元素，写出大量琐碎的操作逻辑。大量DOM操作降低了页面性能，提高了UI(User Interface，用户界面)阻塞的风险，影响用户体验。

因此，如何提高web应用进行处理的效率，提高用户体验是本领域技术人员关注的重点问题。

发明内容

本申请的目的是提供一种数据动态绑定的web应用处理方法、web应用处理装置、服务器以及计算机可读存储介质，以对web应用进行处理的效率，降低维护门槛。

为解决上述技术问题，本申请提供一种数据动态绑定的web应用处理方法，包括：

创建页面表单，并将所述页面表单渲染至前端页面；

将所述页面表单虚拟缓存至内存中的虚拟DOM树；

通过JS对象对所述页面表单的变化进行监听；

当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。

可选的，创建页面表单，并将所述页面表单渲染至前端页面，包括：

基于预设代码参数创建所述页面表单；

将所述页面表单渲染至所述前端页面。

可选的，通过JS对象对所述页面表单的变化进行监听；

通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；

若发生变化，则判定监听到所述页面表单发生变化。

可选的，当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面，包括：

当监听到所述页面表单的变化时，采用所述变化对所述虚拟DOM树进行处理，得到新虚拟DOM树；

将所述新虚拟DOM树渲染至所述前端页面。

本申请还提供一种数据动态绑定的web应用处理装置，包括：

页面表单渲染模块，用于创建页面表单，并将所述页面表单渲染至前端页面；

虚拟缓存模块，用于将所述页面表单虚拟缓存至内存中的虚拟DOM树；

页面监听模块，用于通过JS对象对所述页面表单的变化进行监听；

变化渲染模块，用于当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。

可选的，所述页面表单渲染模块，具体用于基于预设代码参数创建所述页面表单；将所述页面表单渲染至所述前端页面。

可选的，所述页面监听模块，具体用于通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；若发生变化，则判定监听到所述页面表单发生变化。

可选的，所述变化渲染模块，具体用于当监听到所述页面表单的变化时，采用所述变化对所述虚拟DOM树进行处理，得到新虚拟DOM树；将所述新虚拟DOM树渲染至所述前端页面。

本申请还提供一种服务器，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上所述的web应用处理方法的步骤。

本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的web应用处理方法的步骤。

本申请所提供的一种数据动态绑定的web应用处理方法，包括：创建页面表单，并将所述页面表单渲染至前端页面；将所述页面表单虚拟缓存至内存中的虚拟DOM树；通过JS对象对所述页面表单的变化进行监听；当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。

通过虚拟DOM树实现将页面表单的变化进行实时渲染，而不是通过手动操作JS对象对页面的元素进行实时渲染，提高了对DOM进行操作的性能，降低了UI阻塞的风险，提高了用户的体验。

本申请还提供一种数据动态绑定的web应用处理装置、服务器以及计算机可读存储介质，具有以上有益效果，在此不做赘述。

附图说明

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

图1为本申请实施例所提供的一种数据动态绑定的web应用处理方法的流程图；

图2为本申请实施例所提供的一种数据动态绑定的web应用处理装置的结构示意图。

具体实施方式

本申请的核心是提供一种数据动态绑定的web应用处理方法、web应用处理装置、服务器以及计算机可读存储介质，以对web应用进行处理的效率，降低维护门槛。

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

现有技术中，为了实现前端页面的动态显示，也就是涉及到表单元素增删、属性改变时，需要通过JavaScript手动操作DOM元素，写出大量琐碎的操作逻辑。大量DOM操作降低了页面性能，提高了UI阻塞的风险，影响用户体验。

因此，本申请提供一种数据动态绑定的web应用处理方法，通过虚拟DOM树实现将页面表单的变化进行实时渲染，而不是通过手动操作JS对象对页面的元素进行实时渲染，提高了对DOM进行操作的性能，降低了UI阻塞的风险，提高了用户的体验。

以下通过一个实施例，对本申请提供的一种数据动态绑定的web应用处理方法进行说明。

请参考图1，图1为本申请实施例所提供的一种数据动态绑定的web应用处理方法的流程图。

本实施例中，该方法可以包括：

S101，创建页面表单，并将页面表单渲染至前端页面；

可见，本可选方案中主要是创建页面表单，并将页面表单渲染至前端页面。

本实施例中主要是vue框架实现对web应用的处理过程。其中，vue是一套用于构建用户界面的渐进式JavaScript框架，其目标是通过尽可能简单的API(ApplicationProgramming Interface，应用程序接口)实现响应的数据绑定和组合的视图组件。

进一步的，本步骤可以包括：

步骤1，基于预设代码参数创建页面表单；

步骤2，将页面表单渲染至前端页面。

可见，本可选方案中主要是说明如何将页面表单进行前端渲染。本可选方案中，基于预设代码参数创建页面表单，将页面表单渲染至前端页面。

其中，进行前端页面渲染的方式可以采用现有技术提供的任意一种渲染方式，在此不做具体限定。

S102，将页面表单虚拟缓存至内存中的虚拟DOM树；

在S101的基础上，本步骤旨在将页面表单虚拟缓存至内存中的虚拟DOM树。其中，虚拟DOM树可以看做一棵模拟了DOM树的JavaScript对象树。当组件状态发生更新时，然后触发虚拟DOM数据的变化，然后通过虚拟DOM和真实DOM的比对，再对真实DOM更新。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构。

S103，通过JS对象对页面表单的变化进行监听；

在S102的基础上，本步骤旨在通过JS(JavaScript，一种脚本语言)对象对页面表单的变化进行监听。

其中，进行监听的方式可以采用现有技术提供的任意一种监听方式，在此不做具体限定。

进一步的，本步骤可以包括：

步骤1，通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；

步骤2，若发生变化，则判定监听到页面表单发生变化。

可见，本可选方案主要是对如何进行监听。本可选方案中，通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化，若发生变化，则判定监听到页面表单发生变化。

S104，当监听到页面表单的变化时，通过虚拟DOM树将变化渲染至前端页面。

在S103的基础上，本步骤旨在当监听到页面表单的变化时，通过虚拟DOM树将变化渲染至前端页面。

进一步的，本步骤可以包括：

步骤1，当监听到页面表单的变化时，采用变化对虚拟DOM树进行处理，得到新虚拟DOM树；

步骤2，将新虚拟DOM树渲染至前端页面。

可见，本可选方案主要是说明如何进行新页面的渲染。本可选方案中，当监听到页面表单的变化时，采用变化对虚拟DOM树进行处理，得到新虚拟DOM树，将新虚拟DOM树渲染至前端页面。

综上，本实施例通过虚拟DOM树实现将页面表单的变化进行实时渲染，而不是通过手动操作JS对象对页面的元素进行实时渲染，提高了对DOM进行操作的性能，降低了UI阻塞的风险，提高了用户的体验。

以下通过一个具体的实施例，对本申请提供的一种数据动态绑定的web应用处理方法做进一步说明。

本实施例中，该方法可以包括：

步骤1，创建页面表单。

其中，表单元素是指页面中渲染的所有内容，表单元素需要核对的要素包括但不限于内容、类型、位置、层级。为每个表单元素创建自己独占的UUID(Universally UniqueIdentifier，通用唯一识别码)。

UUID的创建规则，可以包括：生成0/1随机数并且加1，得到随机数；生成的随机数*10000，得到乘数结果；将乘数结果与0进行按位或运算，得到或结果；将或结果转换为十六进制，十六进制结果；将十六进制结果截取第二位到最后位的字符串作为UUID。

步骤2，表单DOM树虚拟缓存。

将步骤1中的DOM树进行前台页面渲染后，依然虚拟缓存在内存中，得到对应的保存在内存中的虚拟DOM树。

步骤3，启动js对象，用于监听页面表单元素的变化，并记录变化内容。

其中，监听的范围包括但不限于监听表单元素位置：记录位置新顺序、旧顺序；监听表单元素属性：属性是否发生变化；监听表单元素内容：内容是否发送变化。

步骤4，JS对象讲监听到的变化一次提交给虚拟DOM树。

步骤5，虚拟DOM树将接受到的变化一次性进行渲染至前端页面。

其中，表单元素内容类型若为：file。该元素内容存储的是对应的fid；fileData是一种文件存储的解决方案，后端存储的是fileData对象，通过约定的解析方式可以从中得到图片、音视频等媒体文件的源地址用于前端回显，数据库中存储的是文件对应的fid，唯一标记一个文件，相当于一个索引，也可以通过fileData解析得到。表单采用了set API解决数组和对象部分类型操作下视图无法及时更新问题的API。

其中，采用trackInfo是防止在地址栏通过遍历问卷ID的方式窃取问卷数据的一种保护机制。每一张表单id生成一个trackInfo，第三方无法直接得到表单id，降低的问卷数据丢失的风险。

进一步的，在实际的应用环境中问卷在PC端的预览采用iframe嵌入h5地址的方式。问卷包含8种题型：单选题、多选题、填空题、矩阵量表题、矩阵多选题、段落说明、分页栏、图片，按钮区负责添加题型。

题型渲染：服务端返回题型数据列表，单个题目&单个选项(选择题)，都有各自的UUID。通过v-for指令来循环。不同的题型用questionType字段来区分。

***核心是关联和跳题逻辑。关联逻辑：一道题的出现依赖另一道题有没有作答或者是否选择某个选项。跳题逻辑：某道题产生了某种作答的情况下，下面的另一道题会被跳过。可供关联或跳题的题目列表是在模板渲染的过程中动态载入的。跳题逻辑分为无条件跳题和按选项跳题，无条件跳题是只要某题作答，下面某道题就会被跳过。按选项跳题是指某道题选择了特定选项，目标题目才会被跳过。

问卷图片上传的过程，首先调用上传接口将图片传到特定目录。回显时获取图片的fileData，fileData可以解析为fid和src，fid是前后端约定的文件唯一标记，用于匹配数据库中特定的文件。src用于前端显示。

由于vue 2.X对数据劫持的实现特性，不能监听到数组中某一项的数据变化。Vue提供了Vue.set API来解决数组响应式失效的问题。

问卷h5在获取问卷数据前需要从URL(Uniform Resource Locator，统一资源***)中获取trackInfo来进行接口鉴权，防止问卷被遍历，提升安全性。

引入虚拟DOM的目的是浏览器操作真实HTML DOM节点的代价大，很多计算为无用功，白白浪费了很多算力，导致页面卡顿，影响用户体验。虚拟DOM会将多次DOM更新的diff保存到一个本地js对象中，最终一次性attach到DOM树上，避免大量无谓计算。操作内存中的对象明显更快，最终再交由浏览器去统一绘制。

其中，diff算法用来比较2棵虚拟DOM树的差异，基本步骤可以概括为：深度优先遍历DOM树记录差异、明确差异类型(节点替换、属性更改等)、应用列表对比算法、输出实例。

其中，UUID的意思是唯一不重复的id，生成方式有很多种，本发明中提到的是其中一种。使用UUID可以提升循环中的dom节点的更新效率。

其中，fileData是一种文件存储的解决方案，后端存储的是fileData对象，通过约定的解析方式可以从中得到图片、音视频等媒体文件的源地址用于前端回显，数据库中存储的是文件对应的fid，唯一标记一个文件，相当于一个索引，也可以通过fileData解析得到。

其中，set API是vue提供的一个为了解决数组和对象部分类型操作下视图无法及时更新问题的API。由于vue 2.x版本使用Object.defineProperty来进行对象劫持，天然会造成一些响应式的问题，set API是对这个缺陷的一种补充。

其中，trackInfo是防止在地址栏通过遍历问卷ID的方式窃取问卷数据的一种保护机制。每一张问卷会生成一个trackInfo，不是简单的id自增，第三方无法直接得到trackInfo，降低的问卷数据丢失的风险。

可见，本实施例可以通过虚拟DOM树实现将页面表单的变化进行实时渲染，而不是通过手动操作JS对象对页面的元素进行实时渲染，提高了对DOM进行操作的性能，降低了UI阻塞的风险，提高了用户的体验。

下面对本申请实施例提供的web应用处理装置进行介绍，下文描述的web应用处理装置与上文描述的web应用处理方法可相互对应参照。

请参考图2，图2为本申请实施例所提供的一种数据动态绑定的web应用处理装置的结构示意图。

本实施例中，该装置可以包括：

页面表单渲染模块100，用于创建页面表单，并将页面表单渲染至前端页面；

虚拟缓存模块200，用于将页面表单虚拟缓存至内存中的虚拟DOM树；

页面监听模块300，用于通过JS对象对页面表单的变化进行监听；

变化渲染模块400，用于当监听到页面表单的变化时，通过虚拟DOM树将变化渲染至前端页面。

可选的，该页面表单渲染模块100，具体用于基于预设代码参数创建页面表单；将页面表单渲染至前端页面。

可选的，该页面监听模块300，具体用于通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；若发生变化，则判定监听到页面表单发生变化。

可选的，该变化渲染模块400，具体用于当监听到页面表单的变化时，采用变化对虚拟DOM树进行处理，得到新虚拟DOM树；将新虚拟DOM树渲染至前端页面。

本申请实施例还提供一种服务器，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如以上实施例所述的web应用处理方法的步骤。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如以上实施例所述的web应用处理方法的步骤。

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

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本申请所提供的一种数据动态绑定的web应用处理方法、web应用处理装置、服务器以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

Claims (10)

1.一种数据动态绑定的web应用处理方法，其特征在于，包括：

创建页面表单，并将所述页面表单渲染至前端页面；

将所述页面表单虚拟缓存至内存中的虚拟DOM树；

通过JS对象对所述页面表单的变化进行监听；

当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。

2.根据权利要求1所述的web应用处理方法，其特征在于，创建页面表单，并将所述页面表单渲染至前端页面，包括：

基于预设代码参数创建所述页面表单；

将所述页面表单渲染至所述前端页面。

3.根据权利要求1所述的web应用处理方法，其特征在于，通过JS对象对所述页面表单的变化进行监听；

通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；

若发生变化，则判定监听到所述页面表单发生变化。

4.根据权利要求1所述的web应用处理方法，其特征在于，当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面，包括：

当监听到所述页面表单的变化时，采用所述变化对所述虚拟DOM树进行处理，得到新虚拟DOM树；

将所述新虚拟DOM树渲染至所述前端页面。

5.一种数据动态绑定的web应用处理装置，其特征在于，包括：

页面表单渲染模块，用于创建页面表单，并将所述页面表单渲染至前端页面；

虚拟缓存模块，用于将所述页面表单虚拟缓存至内存中的虚拟DOM树；

页面监听模块，用于通过JS对象对所述页面表单的变化进行监听；

变化渲染模块，用于当监听到所述页面表单的变化时，通过所述虚拟DOM树将所述变化渲染至所述前端页面。

6.根据权利要求5所述的web应用处理装置，其特征在于，所述页面表单渲染模块，具体用于基于预设代码参数创建所述页面表单；将所述页面表单渲染至所述前端页面。

7.根据权利要求5所述的web应用处理装置，其特征在于，所述页面监听模块，具体用于通过JS监听对象判断表单元素位置和/或表单元素属性和/或表单元素内容是否发生变化；若发生变化，则判定监听到所述页面表单发生变化。

8.根据权利要求5所述的web应用处理装置，其特征在于，所述变化渲染模块，具体用于当监听到所述页面表单的变化时，采用所述变化对所述虚拟DOM树进行处理，得到新虚拟DOM树；将所述新虚拟DOM树渲染至所述前端页面。

9.一种服务器，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1至4任一项所述的web应用处理方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至4任一项所述的web应用处理方法的步骤。

Images