CN106843901B

CN106843901B - 一种页面渲染和验证的方法和装置

Info

Publication number: CN106843901B
Application number: CN201710072998.XA
Authority: CN
Inventors: 温文添
Original assignee: Guangzhou Uc Network Technology Co ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2017-02-10
Filing date: 2017-02-10
Publication date: 2020-08-25
Anticipated expiration: 2037-02-10
Also published as: US20180232212A1; US10684826B2; CN106843901A

Abstract

本发明提供了一种页面渲染和验证的方法和装置。所述方法包括：基于初始业务页面和衍生业务页面之间的异同，提取通用业务配置和衍生业务配置；将通用业务配置进行封装，同时将一种或多种衍生业务配置分出各自的属性逻辑和验证逻辑并且各自分别封装，其中将通用业务的封装和衍生业务的封装分别保存至相应的页面配置文件中；根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中绑定一个表单验证方法；渲染过程中先加载通用业务数据再加载衍生业务数据，页面提交时先校验通用业务数据，然后校验衍生业务数据。

Description

一种页面渲染和验证的方法和装置

技术领域

本发明涉及信息处理技术领域，具体而言涉及一种页面渲染和验证的方法和装置。

背景技术

在初始业务页面根据不同业务场景不断演变的过程中，该页面的开发往往需要针对业务进行相应的调整，每种衍生业务之间除了通用的配置外还存在着一些较小的差异，这些较小的差异还不足触发将该衍生业务变为独立业务的条件，故在开发实现上往往将衍生业务差异的渲染及输入验证逻辑添加至该初始业务页面，导致该页面JavaScript过于臃肿，不利于后续人员调试和维护

若采用与上述相反的开发方式，每种衍生业务独立新增和维护衍生业务页面渲染及输入验证逻辑则会产生大量重复代码，在更改通用业务配置时则需修改多个文件，往往会遗漏或产生错误，同时带来更多的重复功能的测试工作量。

发明内容

本发明的目的在于提供一种页面渲染和验证的方法和装置，以改善上述技术问题。

本发明实施例提供了一种页面渲染和验证的方法，其包括：

S1)基于初始业务页面和衍生业务页面之间的异同，提取通用业务配置和衍生业务配置；

S2)将通用业务配置进行封装，同时将一种或多种衍生业务配置分出各自的属性逻辑和验证逻辑并且各自分别封装，其中将通用业务的封装和衍生业务的封装分别保存至相应的页面配置文件中，并且每一种衍生业务对应一个页面配置文件；

S3)根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中绑定一个表单验证方法；

S4)渲染过程中先加载通用业务数据再加载衍生业务数据，页面提交时先校验通用业务数据，然后校验衍生业务数据。

优选的，在步骤S1中，将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

优选的，在步骤S2中，将通用业务配置封装在$(document).ready初始化方法里并且将该初始化方法和通用业务配置信息一起保存在第一页面配置文件中，将一个衍生业务配置的属性逻辑封装在$(document).ready方法里，将该衍生业务配置的验证逻辑封装在jQuery.validation验证方法，并且将该衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在第二页面配置文件中，在有多种衍生业务时以此方式将每种衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在各自对应的页面配置文件中。

优选的，在步骤S3中，使用页面标签语言判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，在通用业务的页面配置文件中在表单提交按钮上绑定表单验证方法，该表单验证方法在处理通用业务数据验证后执行衍生业务配置的验证逻辑。

优选的，在步骤S4中，首先加载通用业务的页面配置文件中保存的初始化方法，然后执行衍生业务的页面配置文件中保存的初始化方法，在页面提交时先校验通用业务数据的有效性，然后根据加载到通用业务的页面配置文件中的衍生业务的页面配置文件中保存的验证方法来校验与其对应的衍生业务数据的有效性。

本发明实施例还提供了一种页面渲染和验证的装置，其包括：

业务配置提取单元，用于基于初始业务页面和衍生业务页面之间的异同，提取通用业务配置和衍生业务配置；

封装和保存单元，用于将通用业务配置进行封装，同时将一种或多种衍生业务配置分出各自的属性逻辑和验证逻辑并且各自分别封装，其中将通用业务的封装和衍生业务的封装分别保存至相应的页面配置文件中，并且每一种衍生业务对应一个页面配置文件；

加载和绑定单元，用于根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中绑定一个表单验证方法；

渲染和验证单元，用于渲染过程中先加载通用业务数据再加载衍生业务数据，页面提交时先校验通用业务数据，然后校验衍生业务数据。

优选的，所述业务配置提取单元用于将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

优选的，所述封装和保存单元用于将通用业务配置封装在$(document).ready初始化方法里并且将该初始化方法和通用业务配置信息一起保存在第一页面配置文件中，将一个衍生业务配置的属性逻辑封装在$(document).ready方法里，将该衍生业务配置的验证逻辑封装在jQuery.validation验证方法，并且将该衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在第二页面配置文件中，在有多种衍生业务时以此方式将每种衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在各自对应的页面配置文件中。

优选的，所述加载和绑定单元使用页面标签语言判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，在通用业务的页面配置文件中在表单提交按钮上绑定表单验证方法，该表单验证方法在处理通用业务数据验证后执行衍生业务配置的验证逻辑。

优选的，所述渲染和验证单元用于首先加载通用业务的页面配置文件中保存的初始化方法，然后执行衍生业务的页面配置文件中保存的初始化方法，在页面提交时先校验通用业务数据的有效性，然后根据加载到通用业务的页面配置文件中的衍生业务的页面配置文件中保存的验证方法来校验与其对应的衍生业务数据的有效性。

根据本发明的页面渲染和验证的方法和装置，将通用业务和衍生业务分开，将属性逻辑和验证逻辑剥离开，可以解决下面问题：

1.避免衍生业务复用方案中多方业务逻辑集成在同个页面，有利于后续人员维护；

2.避免衍生业务独立方案中对应业务页面间存在大量重复代码，修改通用属性时容易遗漏，从而减少测试人员的繁重测试工作量；

3.避免最终输出至浏览器的html及JavaScript代码过于臃肿，有利于开发人员调试。

附图说明

图1是本发明提供的一种页面渲染和验证的方法的流程图；

图2是本发明提供的一种页面渲染和验证的装置的示意框图。

具体实施方式

下面将结合本发明实施例和附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1是本发明提供的一种页面渲染和验证的方法的流程图。如图1所示，本发明的页面渲染和验证的方法包括以下步骤：

S1)基于初始业务页面和衍生业务页面之间的异同，提取通用业务配置和衍生业务配置。

应用程序的开发商经常对应用程序进行版本升级，这些升级除了修补存在的bug之外，更多情况是给应用程序扩展更多的新功能。这样，初始版本显示的页面与具有扩展功能的升级版本显示的页面就存在着相同内容和不同内容。本发明实施例提供的方法的第一步就是基于初始业务页面和衍生业务页面之间的异同，提取通用业务配置和衍生业务配置。具体而言，将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

下面通过一个具体例子来详细介绍。

初始版本提供的初始业务：普通消息推送，该推送需填写的内容如下：

消息样式、消息通道、应用消息直接下载、所属应用、应用是否静默下载、有效起始时间、有效结束时间、纯图上传、消息名称、主标题、消息正文、辅标题、生效时间、防干扰时间、推送内容类型、跳转类型、指定返回页面、下发渠道、客户端版本、预约推送时间。

当升级后的新版本在初始业务的基础上推出衍生业务时，该衍生业务推出新功能：专题消息：专题投放人群；则该衍生业务所衍生的配置：定向人群消息：定向投放人群、发布设置，定向用户消息：上传人群文件、是否弹窗。即，升级后的新版本除了初始业务需要填写的内容之外，还要包括衍生业务给出的业务配置。

这样针对新版本的业务页面渲染，首先需要将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

S2)将通用业务配置进行封装，同时将一种或多种衍生业务配置分出各自的属性逻辑和验证逻辑并且各自分别封装，其中将通用业务的封装和衍生业务的封装分别保存至相应的页面配置文件中，并且每一种衍生业务对应一个页面配置文件。

具体而言，将通用业务配置封装在jQuery的$(document).ready初始化方法里并且将该初始化方法和通用业务配置信息一起保存在第一页面配置文件中，将一个衍生业务配置的属性逻辑封装在jQuery的$(document).ready方法里，将该衍生业务配置的验证逻辑封装在jQuery.validation验证方法，并且将该衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在第二页面配置文件中，在有多种衍生业务时以此方式将每种衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在各自对应的页面配置文件中。

另外，每种衍生业务在创建和编辑时都有一个标记来说明业务类型，这样在有多种衍生业务的情况下，便于后面的操作中识别执行哪个衍生业务。

在本步骤中，$(document).ready初始化了通用业务数据需初始化的工作，例如所属应用文本框在配置时需要根据运营人员输入的应用名来模糊查询出相关应用列表，这个控件的初始化就是在通用的$(document).ready中完成封装。将该初始化方法与通用业务配置数据一起保存在一个页面配置文件中，例如命名为create.html的页面配置文件。同理，$(document).ready也可以初始化衍生业务的属性数据需初始化的工作，用validation验证方法执行衍生业务的验证逻辑，将衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在另一个页面配置文件中，例如命名为spice.html的页面配置文件。

因为一个衍生业务需要的字段跟通用业务的字段之间、以及不同衍生业务的字段之间差别很大，所以通用业务数据和衍生业务数据需要单独封装，而且也需要单独为每个衍生业务封装对应的$(document).ready初始化方法和jQuery.validation验证方法，将对每个衍生业务的封装保存在对应的一个页面配置文件中，例如假设有3个衍生业务，则按照上述方法对这3个衍生业务分别独立封装，然后将每个封装(包含有衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法)保存在对应的一个页面配置文件中，共计有3个不同的页面配置文件，即每一种衍生业务对应一个页面配置文件。

S3)根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中绑定一个表单验证方法。

其中使用页面标签语言判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，在通用业务的页面配置文件中在表单提交按钮上绑定表单验证方法，该表单验证方法在处理通用业务数据验证后执行衍生业务配置的验证逻辑。

具体而言，因为每种衍生业务在创建和编辑时都有一个标记来说明业务类型，用户根据需要点击相应的衍生业务，例如上面举例的专题消息的投放，后台使用页面标签语言(例如jsp、struts、spring、Groovy等)判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件(例如spice.html)加载到通用业务的页面配置文件(例如create.html)中，在通用业务的页面配置文件中在表单提交按钮上绑定一个表单验证方法(例如validateForm方法)，该表单验证方法将会在后面的验证步骤中先处理通用业务数据验证(例如日期有效性校验)，通用业务数据验证通过后执行validation验证方法，因为加载到通用业务的页面配置文件中的衍生业务的页面配置文件中的validation验证方法重新定义了通用业务的页面配置文件中的validation验证方法，所以即执行衍生业务配置的验证逻辑。

以下通过一个简单例程来说明如何实现处理通用业务数据验证后再执行衍生业务配置的验证逻辑。

在所述通用业务的页面配置文件create.html中保存validateForm()和spiceValidation()，而create.html中保存的spiceValidation()是一个空函数，不执行任何事情，具体的验证由validateForm()执行，并且在验证通过后执行调用spiceValidation()。例如以下伪代码所示：

通用业务的create.html中保存的validateForm验证方法：

通过使用页面标签语言将spice.html加载到create.html尾部，则衍生业务的页面配置文件中保存的validation验证方法的代码保存在create.html中，故输出至浏览器的实际html代码是：

根据浏览器特性，将会实现对不同衍生业务的定制验证的目的。

其中首先加载通用业务的页面配置文件中保存的初始化方法，然后执行衍生业务的页面配置文件中保存的初始化方法，在页面提交时先校验通用业务数据的有效性，然后根据加载到通用业务的页面配置文件中的衍生业务的页面配置文件中保存的验证方法来校验与其对应的衍生业务数据的有效性。

具体而言，利用可在页面多处执行JavaScript脚本的特点，在渲染页面时，首先加载通用业务的页面配置文件中保存的$(document).ready初始化方法，执行至页面底部后接着执行衍生业务的页面配置文件中保存的$(document).ready初始化方法，以实现页面的定制渲染。

在页面提交时需要进行数据验证，先校验通用业务数据的有效性，然后校验衍生业务数据的有效性。如在上面通过简单例程进行举例说明的那样，在验证时，绑定的表单验证方法(例如validateForm方法)会在处理完通用业务数据验证(例如日期有效性校验),经校验有效后将执行validation验证方法。因为加载到通用业务的页面配置文件中的衍生业务的页面配置文件(例如spice.html)中的validation验证方法重新定义了通用业务的页面配置文件(例如create.html)中的validation验证方法，所以即执行对衍生业务数据的验证，从而实现了可以对不同的衍生业务执行不同的校验的目的。正如上面的例程所示，执行create.html中的validateForm()，对通用业务数据校验有效后，执行returnspiceValidation()，由此调用加载到create.html中的spice.html文件记录的functionspiceValidation()，由此实现了页面提交时先校验通用业务数据，然后校验衍生业务数据。

当从衍生业务页面提取出多种衍生业务后，按照上面的相关步骤描述，后台判断出用户通过点击选择的一个衍生业务类型，将html返回给浏览器时会根据每种衍生业务的标记来导入相应衍生业务的spice.html，即只有一个spice.html被导入到create.html的尾部，而且不同衍生业务的spice.html之间是互斥的，这样即便从衍生业务页面提取出多种衍生业务，因为每次只有一个spice.html被导入到create.html的尾部，所以多种衍生业务的验证也不会发生冲突。

根据本发明的页面渲染和验证的方法，将通用业务和衍生业务分开，将属性逻辑和验证逻辑剥离开，渲染过程中先加载通用业务数据，然后加载衍生业务数据，先验证通用业务数据，然后验证衍生业务数据，避免衍生业务复用方案中多方业务逻辑集成在同个页面，避免衍生业务独立方案中对应业务页面间存在大量重复代码，避免最终输出至浏览器的html及JavaScript代码过于臃肿，有利于后续人员维护、开发人员调试和减少测试人员的测试工作量。

图2是本发明提供的一种页面渲染和验证的装置的示意框图。如图2所示，本发明的页面渲染和验证的装置，其包括：

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程，前述方法实施例中列举的例子，同样适用于解释装置的工作过程，在此不再重复描述。

根据本发明的页面渲染和验证的装置，将通用业务和衍生业务分开，将属性逻辑和验证逻辑剥离开，渲染过程中先加载通用业务数据，然后加载衍生业务数据，先验证通用业务数据，然后验证衍生业务数据，避免衍生业务复用方案中多方业务逻辑集成在同个页面，避免衍生业务独立方案中对应业务页面间存在大量重复代码，避免最终输出至浏览器的html及JavaScript代码过于臃肿，有利于后续人员维护、开发人员调试和减少测试人员的测试工作量。

本发明实施例所提供的页面渲染和验证的方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，平板电脑，智能手机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims

1.一种页面渲染和验证的方法，包括：

S3)根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中在表单提交按钮上绑定一个表单验证方法；

S4)渲染过程中先加载通用业务数据再加载衍生业务数据，页面提交时，所述表单验证方法先处理通用业务数据验证以校验通用业务数据，然后执行衍生业务配置的验证逻辑以校验衍生业务数据。

2.根据权利要求1所述的方法，其特征在于在步骤S1中，将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

3.根据权利要求2所述的方法，其特征在于在步骤S2中，将通用业务配置封装在$(document).ready初始化方法里并且将该初始化方法和通用业务配置信息一起保存在第一页面配置文件中，将一个衍生业务配置的属性逻辑封装在$(document).ready方法里，将该衍生业务配置的验证逻辑封装在jQuery.validation验证方法，并且将该衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在第二页面配置文件中，在有多种衍生业务时以此方式将每种衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在各自对应的页面配置文件中。

4.根据权利要求3所述的方法，其特征在于在步骤S3中，使用页面标签语言判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中。

5.根据权利要求4所述的方法，其特征在于在步骤S4中，首先加载通用业务的页面配置文件中保存的初始化方法，然后执行衍生业务的页面配置文件中保存的初始化方法，在页面提交时先校验通用业务数据的有效性，然后根据加载到通用业务的页面配置文件中的衍生业务的页面配置文件中保存的验证方法来校验与其对应的衍生业务数据的有效性。

6.一种页面渲染和验证的装置，包括：

加载和绑定单元，用于根据用户选择的衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中，并在通用业务的页面配置文件中在表单提交按钮上绑定一个表单验证方法；

渲染和验证单元，用于渲染过程中先加载通用业务数据再加载衍生业务数据，页面提交时，所述表单验证方法先处理通用业务数据验证以校验通用业务数据，然后执行衍生业务配置的验证逻辑以校验衍生业务数据。

7.根据权利要求6所述的装置，其特征在于所述业务配置提取单元用于将初始业务页面和衍生业务页面之间相同的业务数据提取为通用业务配置数据，将衍生业务页面不同于初始业务页面的业务数据提取为衍生业务配置数据。

8.根据权利要求7所述的装置，其特征在于所述封装和保存单元用于将通用业务配置封装在$(document).ready初始化方法里并且将该初始化方法和通用业务配置信息一起保存在第一页面配置文件中，将一个衍生业务配置的属性逻辑封装在$(document).ready方法里，将该衍生业务配置的验证逻辑封装在jQuery.validation验证方法，并且将该衍生业务配置的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在第二页面配置文件中，在有多种衍生业务时以此方式将每种衍生业务的属性逻辑信息和初始化方法、验证逻辑信息和验证方法一起保存在各自对应的页面配置文件中。

9.根据权利要求8所述的装置，其特征在于所述加载和绑定单元使用页面标签语言判断用户选择的衍生业务类型，根据不同衍生业务类型将对应的页面配置文件加载到通用业务的页面配置文件中。

10.根据权利要求9所述的装置，其特征在于所述渲染和验证单元用于首先加载通用业务的页面配置文件中保存的初始化方法，然后执行衍生业务的页面配置文件中保存的初始化方法，在页面提交时先校验通用业务数据的有效性，然后根据加载到通用业务的页面配置文件中的衍生业务的页面配置文件中保存的验证方法来校验与其对应的衍生业务数据的有效性。