CN103544024A - 生成浏览器页面的方法、系统及终端设备 - Google Patents

Abstract

本发明公开了一种生成基于HTML代码的浏览器页面的方法、系统及终端设备。该生成基于HTML代码的浏览器页面的方法包括：从远程服务器侧获取模板信息；使用正则表达式解析模板语法；根据实际模板内容，动态生成模板所需要的填充方法；使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面；显示基于所述HTML代码的浏览器页面。本发明还提供了一种生成基于HTML代码的浏览器页面的系统及终端设备。本发明实施例通过模板的动态生成以及模板的数据填充来形成HTML代码，大大提高了模板的解析和填充效率，有效提升了系统的运算逻辑、使得系统的运算量减少，浏览器页面处理速度提高。

Description

生成浏览器页面的方法、系统及终端设备

技术领域

本发明涉及数据处理领域，具体涉及生成基于HTML代码的浏览器页面的方法、系统及终端设备。

背景技术

用于Web开发的模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

现有WinJS（Windows Library for Javascript）模板引擎技术是微软公司所提供的一套使用JSON（JavaScript Object Notation）数据和HTML（超文本标记语言，即Hypertext Markup Language）模板，来驱动生成HTML代码的技术。

WinJS模板引擎使用属性解释标记的办法来描述模板信息，不能灵活的表达模板要绑定的信息，不便于描述一些逻辑运算，会使得模板所需要的逻辑运算信息和模板描述被分离开来。这种描述方式不灵活，不方便，增加了维护成本。

发明内容

本发明实施例提供一种生成基于HTML代码的浏览器页面的方法及系统以及终端设备，能够提高模板的解析和填充效率，解决手动编写代码去做嵌套模板的绑定和渲染的问题。

本发明实施例提供一种生成浏览器页面的方法，所述方法用于具有HTML代码的浏览器页面，即生成基于HTML代码的浏览器页面的方法，其包括：

从远程服务器侧获取模板信息；

使用正则表达式解析模板语法；

根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；

使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

优选地，在所述从远程服务器侧获取模板信息的步骤中，所获取的模板所采用的语言为JavaScript。

优选地，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用if/else逻辑计算表达式来解析模板语法，所述if/else逻辑计算表达式为下列表达式中的一个或多个：

·{{if<condition>}}<action>{{/if}}；

·{{if<condition>}}<action>{{else}}<action>{{/if}}；和

·{{if             <condition>              }}<action>{{elif<condition>}}<action>{{else}}<action>{{/if}。

优选地，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用模板嵌套描述来解析模板语法，所述模板嵌套描述为：

·{{tmpl<template>}}。

优选地，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用模板数据绑定描述来解析模板语法，所述模板数据绑定描述为：

·{{=js call}}。

优选地，在所述使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面的步骤中，所述用户数据包括姓名、年龄、宠物名字和零食偏好中的一种或多种。

本发明实施例还提供了一种生成浏览器页面的系统，包括：

获取模块，用于从远程服务器侧获取模板信息；

解析模块，用于使用正则表达式解析模板语法；

填充方法生成模块，用于根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；

模板填充模块，用于使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

优选地，所述解析模块使用if/else逻辑计算表达式、模板嵌套描述和/或模板数据绑定描述来解析模板语法。

本发明实施例还提供了一种终端设备，包括处理单元以及存储单元，其中：

处理单元用于从远程服务器获取模板信息以及获取用户数据；

存储单元用于使用正则表达式解析模板语法，根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法，并使用获取的所述用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

优选地，所述处理单元还用于在终端设备上显示基于所述HTML代码的浏览器页面。

从上述技术方案可以看出，由于本发明实施例采用的正则表达式来解析模板语法，通过提供嵌套模板的描述办法，便于描述一些逻辑运算，使得模板所需要的逻辑运算信息和模板描述被统一描述，不用分开描述。避免了手动编写代码去做嵌套模板的绑定和渲染，节约了模板执行时间，且降低了维护成本，提高了模板执行效率。

附图说明

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

图1是本发明实施例生成基于HTML代码的浏览器页面的方法的流程示意图；

图2是本发明实施例生成基于HTML代码的浏览器页面的系统的模块结构示意图。

具体实施方式

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

本发明实施例提供了一种生成基于HTML代码的浏览器页面的方法，所述方法包括：从远程服务器侧获取模板信息；使用正则表达式解析模板语法；根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面；显示基于所述HTML代码的浏览器页面。以下分别进行详细说明。

请结合参看图1，本发明实施例生成基于HTML代码的浏览器页面的方法的流程示意图，包括如下步骤：

步骤102，从远程服务器侧获取模板信息。

用户终端的操作系统响应用户操作，需要生成浏览器页面时，首先与远程服务器建立联系，从远程服务器侧获取模板信息。

模板包含表示元素，这些元素包括文本文字、HTML和数据绑定表达式，用于后续的用户数据填充以及实现用户界面，模板是建立通用的与数据类型无关的算法的重要手段。本步骤中所获取的模板所采用的语言为JavaScript。JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

步骤104，使用正则表达式解析模板语法。

正则表达式是对字符串操作的一种逻辑公式，是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。给定一个正则表达式和另一个字符串，可以达到如下的目的：1.给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）；2.可以通过正则表达式从字符串中获取我们想要的特定部分。

具体地来说，在本发明生成基于HTML代码的浏览器页面的方法的实施例中，使用了三类正则表达式来描述模板所需要的逻辑运算，具体如下：

1.模板引擎if/else逻辑计算表达式：

·{{if<condition>}}<action>{{/if}}

·{{if<condition>}}<action>{{else}}<action>{{/if}}或

·{{if             <condition>               }}<action>{{elif<condition>}}<action>{{else}}<action>{{/if}

2.模板嵌套描述：

·{{tmpl<template>}}

3.模板数据绑定描述：

·{{=js call}}

下文将结合具体实例来介绍正则表达式的具体应用。

步骤106，根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法。

由于JavaScript是一种动态语言，可以在程序运行时改变其结构：新的函数可以被引进、已有的函数可以被删除等。模版语言内容和一些固定内容组成了一个模版。在本实施例中，例如可通过JavaScript的getElementById取得模版描述。因此，在本步骤中，可以基于不同的模板内容，相应动态生成模板填充方法。

在现有技术中，微软WinJS模版技术所使用的模版语法解释引擎处理过程要分词组成语法解析树，完成一个文法、词法解析，所以处理过程相对复杂，效率较低。本发明由于基于步骤104中的正则表达式来匹配模板语法，动态生产填充方法，因此得以提升模板的解析和填充效率。

步骤108，使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

在本步骤中，采用步骤106中所生成的模板填充方法将用户数据填充到模板中去，进而生成HTML代码的浏览器页面。其中，用户数据比如包括姓名、年龄、宠物名字、零食偏好等等信息。此处需要说明的是，用户终端的操作系统一般从远程服务器获取JSON用户数据。

在现有技术微软的WinJS模版方法里，没有根据不同模版内容动态生成填充方法，而是根据文法词法，来一点一点替换模版占位描述来填充。本发明实施例根据实际模版内容生产一个方法，把Json数据带入，就可以生成全部模版内容，没有用词法、文法解析，不需要一点一点进行替换。

步骤110，显示基于所述HTML代码的浏览器页面。在步骤108中生成HTML代码的浏览器页面之后，优选地，显示该基于所述HTML代码的浏览器页面。当然，在其他实施例中，也可以将生成的HTML代码的浏览器页面传送给其他的终端，比如远端电脑或者服务器，用于后续处理。

本发明实施例使用正则表达式解析模板语法，同时利用JavaScript的动态语言特性，根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法，然后使用用户数据执行动态生成的模板填充方法，取得最终生成的HTML，大大提高了模板的解析和填充效率。

下文将通过具体应用来介绍上述步骤104中，使用正则表达式解析模板语法的实例。

实例1：使用if/else逻辑计算表达式

采用本发明方法的描述方式：

上述代码简单解释如下：模版的id是gridCellColumnTemplate,type是一个模版。

<div class="{{if exist}}exist{{else}}empty{{/if}}">

如果Json数据中exist变量是true将输出exist,否则输出empty。例如exit是ture,输出的内容为：<div class="exist">否则为:<div class="empty">。

采用现有WinJS方法的描述方式：

上述代码简单解释如下：id是tplGridBodyCell，data-win-control是WinJS的数据绑定模版。

<div data-win-bind="className:existHistoryGridData.getBodyCellExistClass">

数据绑定对象为className,绑定内容为Json变量的exist，用户回调处理方法为:HistoryGridData.getBodyCellExistClass。

逻辑运算还需要另外描述为：

实例2：使用模板嵌套描述表达式

如果主模板想描述二维表格中每个列的信息，子模板想描述每个列中单元格的信息，在本发明实例中，可通过采用模板嵌套描述表达式进行如下关联描述：

本实例解决了WinJS模板引擎无法描述嵌套模板的关联信息的问题，用户无需再写代码来说明主模板和子模板之间的关联关系。

为了清楚说明本实例的特点，下面列出如果采用现有技术的分离式描述方式进行描述时的实例：

列模板的描述：

 <div id="tplGridBodyColumn"data-win-control="WinJS.Binding.Template">

</div>

列中单元格模板的描述：

该描述无法把子模板和主模板的关联关系在主模板中描述出来，只能通过客户自己写代码来进行关联和渲染，模板执行效率比较低。

此外，发明人将使用WinJS模板和使用本发明实施例的方法所得的模板引擎进行比对测试，让二者分别来渲染相同用户数据，生成3000个HTML DOM（Document Object Model，即文档对象模型）元素，WinJS引擎平均需要3秒时间。本模板引擎平均需要0.3秒时间，大大节约了模板的执行时间约90%，利用的是遵循自然规律的技术手段，获得了计算设备对数据的计算速度和显示效率的大幅提升的技术效果。因此，上述各相关实施例是通过执行计算机程序实现计算机系统内部性能改进的解决方案，属于专利保护的客体。并且上述各相关实施例使得计算设备的运算量减少，数据处理速度、以及关联与渲染质量提高，因而获得的是技术效果，属于通过执行计算机程序实现了外部技术数据处理的解决方案，属于专利法第二条第二款规定的技术方案，属于专利保护的客体。测试结论证明了本模板引擎更加高效。下文附上相关的测试代码。

测试用例之WinJS模板描述：

测试用例之WinJS模板描述，逻辑预算部分描述：

测试用例之本发明实施例相关模板描述:

其中，测试用例中的{{=date}}直接在模版里，定义输出Json中date的内容，即为模板数据绑定描述的具体应用。

由于本发明实施例所采用的正则表达式来解析模板语法，使用更加简单易懂的语法来描述模板信息，描述嵌套模板之间的关系，便于维护，更加高效地执行模板，节约模板执行时间，提高模板效率。同时利用JavaScript的动态语言特性，根据实际模板内容，动态生成模板所需要的模板填充方法，大大提高了模板的解析和填充效率，提到浏览器网页的响应速度，很好地提高了用户体验。

请参看图2，是本发明实施例一种生成基于HTML代码的浏览器页面的系统的模块结构示意图。该系统200优选地包括获取模块202、解析模块204、填充方法生成模块206、模板填充模块208以及页面显示模块210。

其中，获取模块202用于从远程服务器侧获取模板信息；解析模块204用于使用正则表达式解析模板语法；填充方法生成模块206用于根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；模板填充模块208用于使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面；页面显示模块210用于显示基于所述HTML代码的浏览器页面。需要说明的是，在生成HTML代码的浏览器页面之后，优选地，采用页面显示模块210显示该基于所述HTML代码的浏览器页面。当然，在其他实施例中，也可以将生成的HTML代码的浏览器页面传送给其他的终端，比如远端电脑或者服务器，用于后续处理。

本发明还提供一种终端设备，其包括处理单元以及存储单元，其中处理单元用于从远程服务器获取模板信息以及获取用户数据（例如为JSON数据）；存储单元用于使用正则表达式解析模板语法，根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法，并使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。同时处理单元还用于在终端设备显示基于所述HTML代码的浏览器页面。

其中，所述终端设备例如可以为智能手机或个人计算机，所述处理单元例如可以为CPU。所述终端设备的操作系统优选采用WinRT环境，WindowsRT是Windows家族的一个成员，WindowsRT系统画面与操作方式采用Metro(新Windows UI)风格用户界面，各种应用程序、快捷方式等能以动态方块的样式呈现在屏幕上，用户可自行将常用的浏览器、社交网络、游戏、操作界面融入。Windows RT专注于ARM平台，采用预装的方式发行。Windows RT中包含针对触摸操作进行优化的微软Word、Excel、PowerPoint和OneNote的桌面版。

需要说明的是，上述系统和模块内的各单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本发明实施例通过执行计算机程序实现模板的动态生成以及模板的数据填充，根据具有技术含义的数据转换形成HTML DOM元素，通过文档对象模型及其逻辑运算建立浏览器页面，并进行显示，避免了像现有技术那样经过繁复的运算才能建立浏览器页面的缺陷。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器（ROM，Read Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁盘或光盘等。

以上对本发明实施例所提供的生成基于HTML代码的浏览器页面的方法和系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种生成浏览器页面的方法，所述方法包括：

从远程服务器侧获取模板信息；

使用正则表达式解析模板语法；

根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；

使用用户数据执行动态生成的所述模板填充方法，生成HTML代码的浏览器页面。

2.根据权利要求1所述的方法，其特征在于，在所述获取模板信息的步骤中，所获取的模板所采用的语言为JavaScript。

3.根据权利要求1或2所述的方法，其特征在于，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用if/else逻辑计算表达式来解析模板语法，所述if/else逻辑计算表达式为下列表达式中的一个或多个：

·{{if<condition>}}<action>{{/if}}；

·{{if<condition>}}<action>{{else}}<action>{{/if}}；和

·{{if             <condition>              }}<action>{{elif<condition>}}<action>{{else}}<action>{{/if}。

4.根据权利要求1或2所述的方法，其特征在于，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用模板嵌套描述来解析模板语法，所述模板嵌套描述为：

·{{tmpl<template>}}。

5.根据权利要求1或2所述的方法，其特征在于，在所述使用正则表达式解析模板语法的步骤中，具体包括：使用模板数据绑定描述来解析模板语法，所述模板数据绑定描述为：

·{{=js call}}。

6.根据权利要求1或2所述的方法，其特征在于，在所述使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面的步骤中，所述用户数据包括姓名、年龄、宠物名字和零食偏好中的一种或多种。

7.一种生成浏览器页面的系统，其特征在于，包括：

获取模块，用于获取模板信息；

解析模块，用于使用正则表达式解析模板语法；

填充方法生成模块，用于根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法；

模板填充模块，用于使用用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

8.根据权利要求7所述的系统，其特征在于，所述解析模块使用if/else逻辑计算表达式、模板嵌套描述和/或模板数据绑定描述来解析模板语法。

9.一种终端设备，其特征在于，包括处理单元以及存储单元，其中：

处理单元用于从远程服务器获取模板信息以及获取用户数据；

存储单元用于使用正则表达式解析模板语法，根据所述模板语法确定所述模板的实际模板内容，根据实际模板内容，动态生成模板所需要的模板填充方法，并使用获取的所述用户数据执行动态生成的模板填充方法，生成HTML代码的浏览器页面。

10.根据权利要求9所述的终端设备，其特征在于，所述处理单元还用于在终端设备上显示基于所述HTML代码的浏览器页面。

Images