一种网页视图交互处理方法及系统的制作方法
【技术领域】
[0001]本发明涉及网页处理技术领域，尤其涉及一种网页视图交互处理方法及系统。
【背景技术】
[0002]传统的网页(Web)开发方式中，网页页面的展示和交互的方式通常为采用document (文件节点交互方式，以下简称为dom)节点的方式进行交互。采用dom方式进行网页的交互和展示会使得业务逻辑代码和视图操作代码混淆在一起，耦合度高，代码变得非常复杂且难以维护，并且网页交互工具体积臃肿，不适用于对带宽和加载速度要求比较高的移动端项目。网页开发的学习曲线也比较陡峭，其中定义了很多自定义的api接口需要开发人员一一记住。
【发明内容】
[0003]根据现有技术中存在的上述问题，现提供一种网页视图交互处理方法及系统的技术方案，旨在降低网页代码维护和变更的复杂程度，减少网页相关工具中不必要的功能模块，且便于开发人员理解和掌握。
[0004]上述技术方案具体包括:
[0005]—种网页视图交互处理方法，其中，包括:
[000?]步骤SI，对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；
[0007]步骤S2，对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；
[0008]步骤S3，建立并保存关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；
[0009]步骤S4，采用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。
[0010]优选的，该网页视图交互处理方法，其中，关联于每个所述文件节点的所述预设标签包括:
[0011 ]关联于每个所述文件节点的原生标签，以及
[0012]设置于每个所述原生标签之前的预设前缀。
[0013]优选的，该网页视图交互处理方法，其中，执行所述步骤S3的同时，执行下述步骤:
[0014]步骤Al，判断所述文件节点是否支持用户的输入操作；
[0015]若否，则退出；
[0016]步骤A2，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并在存在有所述输入数值时转向步骤A3;
[0017]步骤A3，采用所述输入数值对所述视图数据进行更新；
[0018]步骤A4，刷新所述网页，并重新执行所述步骤S4。
[0019]优选的，该网页视图交互处理方法，其中，执行所述步骤A3之前，首先执行下述判断:
[0020]步骤A31，判断所述输入数值是否与对应的所述视图数据不同；
[0021 ]若是，则转向所述步骤A3;
[0022]若否，则退出。
[0023]优选的，该网页视图交互处理方法，其中，所述视图数据、所述视图模型以及所述对应关系被保存在系统内存中。
[0024]一种网页视图交互处理系统，其中，包括:
[0025]扫描单元，用于对html文件进行扫描并得到所述html文件中带有预设标签的文件节点；
[0026]解析单元，连接所述扫描单元，用于对所有扫描得到的所述文件节点进行解析，以得到关联于每个所述文件节点的视图数据以及对应的视图模型；
[0027]关系建立单元，连接所述解析单元，用于建立关联于每个所述文件节点的所述视图数据与所述视图模型之间的对应关系；
[0028]存储单元，连接所述关系建立单元，用于保存所述对应关系；
[0029]渲染单元，连接所述存储单元，用于应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。
[0030]优选的，该网页视图交互处理系统，其中，关联于每个所述文件节点的所述预设标签包括:
[0031 ]关联于每个所述文件节点的原生标签，以及
[0032]设置于每个所述原生标签之前的预设前缀。
[0033]优选的，该网页视图交互处理系统，其中，还包括:
[0034]判断单元，连接所述扫描单元，用于判断扫描得到的所述文件节点是否支持用户的输入操作，并输入判断结果；
[0035]监控单元，连接判断单元，用于根据所述判断结果，监控所述文件节点上是否存在关联于用户的新的所述输入操作的输入数值，并输出监控结果；
[0036]更新单元，分别连接所述监控单元和所述存储单元，用于根据所述监控结果，采用所述输入数值对所述存储单元中保存的所述视图数据进行更新；
[0037]刷新单元，分别连接所述更新单元和所述渲染单元，用于在所述更新单元完成更新后，控制所述渲染单元刷新所述网页，并重新应用视图渲染器，结合所述视图数据和对应的所述视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。
[0038]优选的，该网页视图交互处理系统，其中，所述更新单元包括:
[0039]比对模块，用于比对所述输入数值是否与对应的所述视图数据不同，并输出比对结果；
[0040]更新模块，连接所述比对模块，用于根据所述比对结果，在所述输入数值与所述视图数据不同时，采用所述输入数值对所述视图数据进行更新。
[0041]优选的，该网页视图交互处理系统，其中，所述存储单元为系统内存。
[0042]上述技术方案的有益效果是:
[0043]I)提供一种网页视图交互处理方法，能够降低网页代码维护和变更的复杂程度，减少网页相关工具中不必要的功能模块，且便于开发人员理解和掌握；
[0044]2)提供一种网页视图交互处理系统，能够支持实现上述网页视图交互处理方法。
【附图说明】
[0045]图1是本发明的较佳的实施例中，一种网页视图交互处理方法的总体流程示意图；
[0046]图2-3是本发明的较佳的实施例中，于图1的基础上，网页视图交互处理方法的分步骤流程示意图；
[0047]图4是本发明的较佳的实施例中，一种网页视图交互处理系统的总体结构示意图；
[0048]图5是本发明的较佳的实施例中，于图4的基础上，更新单元的结构示意图。
【具体实施方式】
[0049]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0050]需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
[0051]下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。
[0052]本发明的较佳的实施例中，基于现有技术中存在的上述问题，现提供一种网页视图交互处理方法，其步骤具体如图1所示，包括:
[0053]步骤SI，对html文件进行扫描并得到html文件中带有预设标签的文件节点；
[0054]步骤S2，对所有扫描得到的文件节点进行解析，以得到关联于每个文件节点的视图数据以及对应的视图模型；
[0055]步骤S3，建立并保存关联于每个文件节点的视图数据与视图模型之间的对应关系;
[0056]步骤S4，采用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看。
[0057]在一个具体实施例中，首先获取关联于该网页的html文件，由于在该实施例中，采用如上文中所述的dom方式管理html文件的交互，因此在上述html文件中包括多个dom节点(即上文中所述的文件节点)。则在上述步骤SI中，扫描上述html文件并获取其中带有预设标签的dom节点。
[0058]在该实施例中，获取上述带有预设标签的dom节点后，对这些dom节点进行解析，以从其标签中得到关联于每个文件节点的视图数据以及对应的视图模型；
[0059]在该实施例中，随后根据获取到的视图数据和视图模型形成上述视图数据和视图模型的对应关系。上述对应关系不一定只适用于一个dom节点。例如，以关联于用户名的输入框作为dom节点，则该dom节点的标签中可以包括信息:Value = username，其中Value为视图模型，而username为视图数据，因此可以形成Value和username之间的对应关系。则Value= Username这一对应关系可能同样适用于其他关联于用户名输入的dom节点。
[0060]在该实施例中，建立上述视图数据与视图模型的对应关系之后(可以包括多个对应关系)，保存这些对应关系，具体地，将这些已经建立的对应关系保存于系统内存中，以供随时进行调用。
[0061]在该实施例中，最后，采用视图渲染器，结合视图数据和对应的视图模型进行渲染，并将渲染结果显示在网页上供使用者查看，即利用上述视图数据与视图模型之间的对应关系，将相应的网页呈现给使用者查看。
[0062]本发明的较佳的实施例中，关联于每个文件节点的预设标签包括:
[0063]关联于每个文件节点的原生标签，以及
[0064]设置于每个原生标签之前的预设前缀。
[0065]具体地，本发明的较佳的实施例中，为了便于开发人员学习和记忆，上述预设标签可以包括两部分:一部分为dom节点自带的传统标签，与现有技术中相同，另一部分为设置于上述传统标签之前的预设前缀。换言之，在原生标签前增加预设前缀形成上述的预设标签。
[0066]本发明的一个较佳的实施例中，上述预设前缀可以为uku-，即在需要进行视图和视图模型绑定的html文件的各个dom节点的原生标签前增加uku-，即可形成带有预设标签的dom节点。在上述步骤SI的扫描过程中，只要扫描到带有uku-前缀的标签，则认为对应的dom节点需要进行进一步解析。
[0067]本发明的较佳的实施例中，执行步骤S3的同时，执行如图2所示的下述步骤:
[0068]步骤Al，判断文件节点是