CN105631011A - 一种网页视图交互处理方法及系统 - Google Patents

Abstract

本发明公开了一种网页视图交互处理方法及系统，属于网页处理技术领域；方法包括：步骤S1，对html文件进行扫描并得到html文件中带有预设标签的文件节点；步骤S2，对所有扫描得到的文件节点进行解析，以得到关联于每个文件节点的视图数据以及对应的视图模型；步骤S3，建立并保存关联于每个文件节点的视图数据与视图模型之间的对应关系；步骤S4，采用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。系统包括：扫描单元、解析单元、关系建立单元、存储单元以及渲染单元。上述技术方案的有益效果是：降低网页代码维护的复杂程度，减少网页相关工具中不必要的功能模块，便于开发人员理解和掌握。

Description

一种网页视图交互处理方法及系统

技术领域

本发明涉及网页处理技术领域，尤其涉及一种网页视图交互处理方法及系统。

背景技术

传统的网页(Web)开发方式中，网页页面的展示和交互的方式通常为采用document(文件节点交互方式，以下简称为dom)节点的方式进行交互。采用dom方式进行网页的交互和展示会使得业务逻辑代码和视图操作代码混淆在一起，耦合度高，代码变得非常复杂且难以维护，并且网页交互工具体积臃肿，不适用于对带宽和加载速度要求比较高的移动端项目。网页开发的学习曲线也比较陡峭，其中定义了很多自定义的api接口需要开发人员一一记住。

发明内容

根据现有技术中存在的上述问题，现提供一种网页视图交互处理方法及系统的技术方案，旨在降低网页代码维护和变更的复杂程度，减少网页相关工具中不必要的功能模块，且便于开发人员理解和掌握。

上述技术方案具体包括：

一种网页视图交互处理方法，其中，包括：

步骤S1，对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；

步骤S2，对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；

步骤S3，建立并保存关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；

步骤S4，采用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

优选的，该网页视图交互处理方法，其中，关联于每个所述文件节点的所述预设标签包括：

关联于每个所述文件节点的原生标签，以及

设置于每个所述原生标签之前的预设前缀。

优选的，该网页视图交互处理方法，其中，执行所述步骤S3的同时，执行下述步骤：

步骤A1，判断所述文件节点是否支持用户的输入操作；

若否，则退出；

步骤A2，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并在存在有所述输入数值时转向步骤A3；

步骤A3，采用所述输入数值对所述视图数据进行更新；

步骤A4，刷新所述网页，并重新执行所述步骤S4。

优选的，该网页视图交互处理方法，其中，执行所述步骤A3之前，首先执行下述判断：

步骤A31，判断所述输入数值是否与对应的所述视图数据不同；

若是，则转向所述步骤A3；

若否，则退出。

优选的，该网页视图交互处理方法，其中，所述视图数据、所述视图模型以及所述对应关系被保存在系统内存中。

一种网页视图交互处理系统，其中，包括：

扫描单元，用于对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；

解析单元，连接所述扫描单元，用于对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；

关系建立单元，连接所述解析单元，用于建立关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；

存储单元，连接所述关系建立单元，用于保存所述对应关系；

渲染单元，连接所述存储单元，用于应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

优选的，该网页视图交互处理系统，其中，关联于每个所述文件节点的所述预设标签包括：

关联于每个所述文件节点的原生标签，以及

设置于每个所述原生标签之前的预设前缀。

优选的，该网页视图交互处理系统，其中，还包括：

判断单元，连接所述扫描单元，用于判断扫描得到的所述文件节点是否支持用户的输入操作，并输入判断结果；

监控单元，连接判断单元，用于根据所述判断结果，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并输出监控结果；

更新单元，分别连接所述监控单元和所述存储单元，用于根据所述监控结果，采用所述输入数值对所述存储单元中保存的所述视图数据进行更新；

刷新单元，分别连接所述更新单元和所述渲染单元，用于在所述更新单元完成更新后，控制所述渲染单元刷新所述网页，并重新应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

优选的，该网页视图交互处理系统，其中，所述更新单元包括：

比对模块，用于比对所述输入数值是否与对应的所述视图数据不同，并输出比对结果；

更新模块，连接所述比对模块，用于根据所述比对结果，在所述输入数值与所述视图数据不同时，采用所述输入数值对所述视图数据进行更新。

优选的，该网页视图交互处理系统，其中，所述存储单元为系统内存。

上述技术方案的有益效果是：

1)提供一种网页视图交互处理方法，能够降低网页代码维护和变更的复杂程度，减少网页相关工具中不必要的功能模块，且便于开发人员理解和掌握；

2)提供一种网页视图交互处理系统，能够支持实现上述网页视图交互处理方法。

附图说明

图1是本发明的较佳的实施例中，一种网页视图交互处理方法的总体流程示意图；

图2-3是本发明的较佳的实施例中，于图1的基础上，网页视图交互处理方法的分步骤流程示意图；

图4是本发明的较佳的实施例中，一种网页视图交互处理系统的总体结构示意图；

图5是本发明的较佳的实施例中，于图4的基础上，更新单元的结构示意图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。

本发明的较佳的实施例中，基于现有技术中存在的上述问题，现提供一种网页视图交互处理方法，其步骤具体如图1所示，包括：

步骤S1，对html文件进行扫描并得到html文件中带有预设标签的文件节点；

步骤S2，对所有扫描得到的文件节点进行解析，以得到关联于每个文件节点的视图数据以及对应的视图模型；

步骤S3，建立并保存关联于每个文件节点的视图数据与视图模型之间的对应关系；

步骤S4，采用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

在一个具体实施例中，首先获取关联于该网页的html文件，由于在该实施例中，采用如上文中所述的dom方式管理html文件的交互，因此在上述html文件中包括多个dom节点(即上文中所述的文件节点)。则在上述步骤S1中，扫描上述html文件并获取其中带有预设标签的dom节点。

在该实施例中，获取上述带有预设标签的dom节点后，对这些dom节点进行解析，以从其标签中得到关联于每个文件节点的视图数据以及对应的视图模型；

在该实施例中，随后根据获取到的视图数据和视图模型形成上述视图数据和视图模型的对应关系。上述对应关系不一定只适用于一个dom节点。例如，以关联于用户名的输入框作为dom节点，则该dom节点的标签中可以包括信息：Value＝username，其中Value为视图模型，而username为视图数据，因此可以形成Value和username之间的对应关系。则Value＝username这一对应关系可能同样适用于其他关联于用户名输入的dom节点。

在该实施例中，建立上述视图数据与视图模型的对应关系之后(可以包括多个对应关系)，保存这些对应关系，具体地，将这些已经建立的对应关系保存于系统内存中，以供随时进行调用。

在该实施例中，最后，采用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看，即利用上述视图数据与视图模型之间的对应关系，将相应的网页呈现给使用者查看。

本发明的较佳的实施例中，关联于每个文件节点的预设标签包括：

关联于每个文件节点的原生标签，以及

设置于每个原生标签之前的预设前缀。

具体地，本发明的较佳的实施例中，为了便于开发人员学习和记忆，上述预设标签可以包括两部分：一部分为dom节点自带的传统标签，与现有技术中相同，另一部分为设置于上述传统标签之前的预设前缀。换言之，在原生标签前增加预设前缀形成上述的预设标签。

本发明的一个较佳的实施例中，上述预设前缀可以为uku-，即在需要进行视图和视图模型绑定的html文件的各个dom节点的原生标签前增加uku-，即可形成带有预设标签的dom节点。在上述步骤S1的扫描过程中，只要扫描到带有uku-前缀的标签，则认为对应的dom节点需要进行进一步解析。

本发明的较佳的实施例中，执行步骤S3的同时，执行如图2所示的下述步骤：

步骤A1，判断文件节点是否支持用户的输入操作；

若否，则退出；

步骤A2，监控文件节点上是否存在关联于用户的新的输入操作的输入数值，并在存在有输入数值时转向步骤A3；

步骤A3，采用输入数值对视图数据进行更新；

步骤A4，刷新网页，并重新执行步骤S4。

具体地，本发明的较佳的实施例中，将上述带有预设标签的dom节点分为支持用户的输入操作的dom节点，以及不支持用户的输入操作的dom节点。更进一步地，不支持用户的输入操作的dom节点中，其视图数据是固定的预设值，因此只需要建立视图数据和视图模型的对应关系即可。而支持用户的输入操作的dom节点中，其视图数据为一个变量(例如上文中提到的username)，当使用者输入相应数值时，则该变量会被输入的数值替代，此时需要根据上述对应关系更新视图数据以及对应的视图模型。

例如，原本作为输入框的dom节点，其视图数据和视图模型的对应关系为Value＝username。由于该dom节点支持使用者的输入操作，则当使用者输入“XXX”时，username被XXX所替代，此时视图数据和视图模型的对应关系应该被更新为Value＝XXX。因此上述步骤A3中，需要采用输入数值对视图数据进行更新，从而保证上述对应关系是正确的，随后再刷新网页，将根据上述的更新结果重新显示。

本发明的较佳的实施例中，进一步地，如图3所示，执行步骤A3之前，首先执行下述判断：

步骤A31，判断输入数值是否与对应的视图数据不同；

若是，则转向步骤A3；

若否，则退出。

上述步骤即判断输入数值是否与本身的视图数据相同的过程。例如，若当前的视图数据为XXX，输入仍然为XXX，则此时不需要更新。

本发明的较佳的实施例中，如上文中所述，上述视图数据和视图模型的对应关系可能对应于多个dom节点，因此，在上述步骤中，需要通信根据该对应关系同时更新多个dom节点的视图数据，从而保证网页显示的一致性。

本发明的较佳的实施例中，上述视图数据、视图模型以及对应关系均被保存在系统内存中。

综上所述，本发明技术方案中，首先在需要进行视图数据和视图模型双向绑定的dom节点上设置具有预设前缀的预设标签。随后扫描得到具有上述预设标签的dom节点并进行解析，得到关联于不同的dom节点的视图数据、视图模型及其对应关系并保存。随后采用视图渲染器，根据对应关系，将视图模型上的具体视图数据进行渲染，使其能够显示在网页页面上。

本发明的较佳的实施例中，上述方法适用于网页开发的前端。

本发明的较佳的实施例中，基于上文中所述的网页视图交互处理方法，现提供一种网页视图交互处理系统，其结构具体如图4所示，包括：

扫描单元1，用于对html文件进行扫描并得到html文件中带有预设标签的文件节点；

解析单元2，连接扫描单元1，用于对所有扫描得到的文件节点进行解析，以得到关联于每个文件节点的视图数据以及对应的视图模型；

关系建立单元3，连接解析单元2，用于建立关联于每个文件节点的视图数据与视图模型之间的对应关系；

存储单元4，连接关系建立单元3，用于保存对应关系；进一步地，上述存储单元可以为系统内存。

渲染单元5，连接存储单元4，用于应用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

本发明的较佳的实施例中，如上文中所述，关联于每个文件节点的预设标签包括：

关联于每个文件节点的原生标签，以及

设置于每个原生标签之前的预设前缀。

本发明的较佳的实施例中，仍然如图4所示，上述系统中还包括：

判断单元6，连接扫描单元1，用于判断扫描得到的文件节点是否支持用户的输入操作，并输入判断结果；

监控单元7，连接判断单元6，用于根据判断结果，监控文件节点上是否存在关联于用户的新的输入操作的输入数值，并输出监控结果；

更新单元8，分别连接监控单元7和存储单元4，用于根据监控结果，采用输入数值对存储单元4中保存的视图数据进行更新；

刷新单元9，分别连接更新单元8和渲染单元5，用于在更新单元8完成更新后，控制渲染单元5刷新网页，并重新应用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

进一步地，本发明的较佳的实施例中，如图5所示，上述更新单元8包括：

比对模块81，用于比对输入数值是否与对应的视图数据不同，并输出比对结果；

更新模块82，连接比对模块81，用于根据比对结果，在输入数值与视图数据不同时，采用输入数值对视图数据进行更新。

以上所述仅为本发明较佳的实施例，并非因此限制本发明的实施方式及保护范围，对于本领域技术人员而言，应当能够意识到凡运用本发明说明书及图示内容所作出的等同替换和显而易见的变化所得到的方案，均应当包含在本发明的保护范围内。

Claims (10)

1.一种网页视图交互处理方法，其特征在于，包括：

步骤S1，对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；

步骤S2，对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；

步骤S3，建立并保存关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；

步骤S4，采用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

2.如权利要求1所述的网页视图交互处理方法，其特征在于，关联于每个所述文件节点的所述预设标签包括：

关联于每个所述文件节点的原生标签，以及

设置于每个所述原生标签之前的预设前缀。

3.如权利要求1所述的网页视图交互处理方法，其特征在于，执行所述步骤S3的同时，执行下述步骤：

步骤A1，判断所述文件节点是否支持用户的输入操作；

若否，则退出；

步骤A2，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并在存在有所述输入数值时转向步骤A3；

步骤A3，采用所述输入数值对所述视图数据进行更新；

步骤A4，刷新所述网页，并重新执行所述步骤S4。

4.如权利要求3所述的网页视图交互处理方法，其特征在于，执行所述步骤A3之前，首先执行下述判断：

步骤A31，判断所述输入数值是否与对应的所述视图数据不同；

若是，则转向所述步骤A3；

若否，则退出。

5.如权利要求1所述的网页视图交互处理方法，其特征在于，所述视图数据、所述视图模型以及所述对应关系被保存在系统内存中。

6.一种网页视图交互处理系统，其特征在于，包括：

扫描单元，用于对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；

解析单元，连接所述扫描单元，用于对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；

关系建立单元，连接所述解析单元，用于建立关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；

存储单元，连接所述关系建立单元，用于保存所述对应关系；

渲染单元，连接所述存储单元，用于应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

7.如权利要求6所述的网页视图交互处理系统，其特征在于，关联于每个所述文件节点的所述预设标签包括：

关联于每个所述文件节点的原生标签，以及

设置于每个所述原生标签之前的预设前缀。

8.如权利要求6所述的网页视图交互处理系统，其特征在于，还包括：

判断单元，连接所述扫描单元，用于判断扫描得到的所述文件节点是否支持用户的输入操作，并输入判断结果；

监控单元，连接判断单元，用于根据所述判断结果，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并输出监控结果；

更新单元，分别连接所述监控单元和所述存储单元，用于根据所述监控结果，采用所述输入数值对所述存储单元中保存的所述视图数据进行更新；

刷新单元，分别连接所述更新单元和所述渲染单元，用于在所述更新单元完成更新后，控制所述渲染单元刷新所述网页，并重新应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。

9.如权利要求8所述的网页视图交互处理系统，其特征在于，所述更新单元包括：

比对模块，用于比对所述输入数值是否与对应的所述视图数据不同，并输出比对结果；

更新模块，连接所述比对模块，用于根据所述比对结果，在所述输入数值与所述视图数据不同时，采用所述输入数值对所述视图数据进行更新。

10.如权利要求6所述的网页视图交互处理系统，其特征在于，所述存储单元为系统内存。