CN109522018B - 页面处理方法、装置及存储介质 - Google Patents

Abstract

本申请公开了一种页面处理方法、装置及存储介质。该方法包括：根据待生成页面的视图生成模板字符串；对所述模板字符串进行解析，生成模板树；获取所述模板树中至少一个节点的属性，根据所述至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构；及，将所述数据结构转化为树结构，根据所述数据模型和所述树结构生成第一标记语言文档，并根据第一标记语言文档生成页面。利用这些技术方案，能够提高页面开发和维护的时间效率以及页面处理装置的资源利用率。

Description

页面处理方法、装置及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及页面处理方法、装置及存储介质。

背景技术

随着互联网业务的飞速发展，现在的网页越来越复杂，功能越来越强大，数据量也逐渐加大。在这种情况下，进行web前端开发时，直接操作文档对象模型(DOM)的方式效率越来越低，JavaScript的逻辑越来越复杂，导致网站的维护成本很高。

目前，现有的解决方案为了能够减少对DOM的直接操作，使用JavaScript逻辑形成虚拟树，把界面数据变化后的虚拟树进行对比得到差异，然后根据差异对界面进行调整。但是，由于使用JavaScript逻辑形成虚拟树，在网页的开发以及维护时，耗时都比较长。此外，虚拟树对比的时间开销也很大，即使使用循环递归的比较方式，其处理效率远差于手动修改DOM。鉴于此，在前端开发时，如何能够提高页面开发和维护的时间效率是需要解决的问题。

发明内容

有鉴于此，本发明实施例提供了一种页面处理方法、装置及存储介质，能够提高页面开发和维护的时间效率以及页面处理装置的资源利用率。

本发明的技术方案是这样实现的：

本发明实施例提供了一种页面处理方法，包括：

根据待生成页面的视图生成模板字符串；

对所述模板字符串进行解析，生成模板树；

获取所述模板树中至少一个节点的属性，根据所述至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构；及，

将所述数据结构转化为树结构，根据所述数据模型和所述树结构生成第一标记语言文档，并根据所述第一标记语言文档生成所述页面。

本发明实施例还提供了一种页面处理装置，包括：

模板化模块，用于根据待生成页面的视图生成模板字符串；

解析模块，用于对所述模板化模块生成的模板字符串进行解析，生成模板树；

获取模块，用于获取所述解析模块生成的模板树中至少一个节点的属性；

构建模块，用于根据所述获取模块得到的至少一个节点的属性，构建与待生成页面的数据模型相关联的数据结构；

转化模块，用于将所述构建模块得到的数据结构转化为树结构；及，

生成模块，用于根据所述数据模型和所述转化模块得到的树结构生成第一标记语言文档，并根据所述第一标记语言文档生成所述页面。

本发明实施例又提供了一种计算机可读存储介质，存储有计算机可读指令，可以使至少一个处理器执行如上所述的方法。

与现有技术相比，本发明提供的方法，不依赖于固定的语法和自定义的标签，减少了开发人员的学习成本，且语法灵活，实现起来更加简便；在生成第一标记语言文档时将数据结构转化为树结构，提高了页面更新的速度，减少了代码的执行时间；通过模板树构建与待生成页面的数据模型相关联的数据结构，将数据模型与DOM直连起来，这种绑定可以大大较少复杂页面的处理时间，提高了页面开发和维护的效率，同时提高了页面处理装置的资源利用率。

附图说明

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

图1为本发明一实施例所涉及的web前端开发***的结构示意图；

图2为依据本发明一实施例的页面处理方法的示例性流程图；

图3为依据本发明一实施例的获取模板树中至少一个节点的属性的示例性流程图；

图4为依据本发明一实施例的根据数据模型和树结构生成第一标记语言文档的示例性流程图；

图5为依据本发明另一实施例的页面处理方法的示例性流程图；

图6为依据本发明一实施例的更新标记语言文档的示例性流程图；

图7为依据本发明又一实施例的页面处理方法的示例性流程图；

图8为依据本发明一实施例的页面处理装置的结构示意图；

图9为依据本发明另一实施例的页面处理装置的结构示意图。

具体实施方式

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

本发明实施例所保护的页面处理方法，可以应用于web前端开发中，实现数据与DOM直连的双向数据绑定，同样也可用于安卓操作***与IOS操作***的前端开发。

图1为本发明一实施例所涉及的web前端开发***的结构示意图。如图1所示，web前端开发***100包括终端设备101和用户102。在终端设备101上运行有浏览器103，浏览器103中包括本申请实施例所保护的页面处理装置1031和用户接口1032。

根据本发明的实施例，开发人员使用页面处理装置1031对web网站前端页面进行处理，具体包括：根据待生成页面的视图生成模板字符串；对模板字符串进行解析，生成模板树；获取模板树中至少一个节点的属性，根据至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构；及，将数据结构转化为树结构，并根据数据模型和树结构生成第一标记语言文档。将第一标记语言文档添加到待生成页面中即可获得初始页面，然后在用户界面上展示。这样，用户打开浏览器时就可以看到该页面。

根据本发明的实施例，在数据模型出现变动时，可以根据页面处理装置1031快速实现对页面的更新。例如，页面处理装置1031通过用户接口1032获得用户触发的事件，这时候作为待渲染数据的数据模型出现变动，通过上述相关联的数据结构，可以对第一标记语言文档进行更新，得到第二标记语言文档，然后渲染成更新后的页面，在用户界面上显示。

其中，所述终端设备101是指具有数据计算处理功能的终端设备，包括但不限于(安装有通信模块的)智能手机、掌上电脑、平板电脑等。这些通信终端上都安装有操作***，包括但不限于：Android操作***、Symbian操作***、Windows mobile操作***、以及苹果iPhone OS操作***等等。

图2为依据本发明一实施例的页面处理方法的示例性流程图。该方法应用于浏览器。如图2所示，该方法可包括如下步骤：

步骤201，根据待生成页面的视图生成模板字符串。

步骤202，对模板字符串进行解析，生成模板树。

步骤203，获取模板树中至少一个节点的属性，根据至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构。

步骤204，将数据结构转化为树结构，根据数据模型和树结构生成第一标记语言文档，并根据第一标记语言文档生成页面。

下面对各个步骤进行详细描述。

在步骤201中，根据待生成页面的视图生成模板字符串。例如，该待生成页面为用户登录页面。该步骤可以实现“模板化”，即获得包含变量与逻辑的字符串。具体地，模板字符串包括脚本语言语句与标记语言语句。

在本发明实施例中，使用JavaScript语言作为脚本语言进行页面开发，标记语言为超级文本标记语言(HTML)。那么，所生成的模板字符串是包括JavaScript语句和HTML语句的混合代码。由于在模板字符串中可以写任意的JavaScript语句，可以解决现有技术中只能使用固定标签与语法的局限，提高了页面开发的效率。

考虑到用现有的正则表达式难以将模板字符串中的JavaScript语句与输出变量区分开，在本发明一实施例中，根据待生成页面的视图生成模板字符串时，具体包括：设置第一标识符用于标记脚本语言语句；设置第二标识符用于在使用标记语言语句时标记输出变量。

在具体应用时，第一标识符为<％％>，对JavaScript语句采用<％％>的语法进行编写，如<％if(name){％><span>姓名不能为空<span><％}％>。第二标识符为{{}}，用其对输出变量进行标识，如<span>{{name}}</span>，表示在span中输出name。通过这样区分，实现了对虚拟树中JavaScript语句有了对应DOM，而输出变量可以解析为虚拟树的属性变化。

例如，在如下的HTML代码中，定义了标签div，其中，输出变量class_name和name使用{{}}表示，JavaScript语句使用<％％>来表示。

在步骤202中，对模板字符串进行解析，生成模板树。由于上述步骤201中模板字符串包括脚本语言语句与标记语言语句，那么解析得到的模板树包括脚本语言语句和DOM树。

例如，使用如下的getDomTree函数对模板字符串(指tplHtml)进行解析，得到模板树(指返回的“root.firstElementChild”)。

这样，上述标签div中的代码被解析成3个节点，得到的模板树如下所示：

▼Nodelist(3)[text,p.{{class_name}},text]

0：text

1：p.{{class_name}}

2：text

length:3

其中，text所指示的文本节点都是使用JavaScript代码来描述的。在对包括JavaScript语句的模板字符串进行解析时，可以使用JavaScript中原生的应用程序接口(API)，无需进行复杂的语法分析，并且可以直接得到DOM的属性，即节点的值。

在步骤203中，获取模板树中至少一个节点的属性，根据至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构。

图3为依据本发明一实施例的获取模板树中至少一个节点的属性的示例性流程图。如图3所示，包括如下步骤：

步骤2031，遍历模板树，获得至少一个节点。

在具体应用时，可以使用深度优先法，递归遍历模板树，获得模板树中的每个节点。例如，树的子节点用dom.childNodes获取，以NodeList对象返回节点的子节点集合。

步骤2032，对遍历到的至少一个节点进行分类，判断每个节点是否为文本节点。

本步骤中，确定每个节点的类型，根据类型判断该节点是否为文本节点。若是，执行步骤2033，否则执行步骤2034。在具体应用时，可以使用nodeType返回节点类型来判断。当返回的一个节点的类型为3时，确定该节点为文本节点；否则，为非文本节点。

步骤2033，当一个节点被确认为文本节点时，根据脚本语言的语法对该文本节点的语句进行分析，获得该文本节点的至少一个属性名以及与该属性名相应的表达式。

本步骤中，对于文本节点，获得该文本节点的标签和属性。对属性进行JavaScript语法分析，判断分析后的结果是否为JavaScript表达式，如果是，确定所包含的属性有哪些，每个属性属于什么类型的表达式。

在分析时，表达式对应至少一个脚本指令。在分析表达式时，预先设置每个脚本指令的脚本模板；针对每个脚本指令，根据该脚本指令的脚本模板对该文本节点的语句进行匹配，得到该脚本指令对应的表达式。

具体地，对文本节点的JavaScript代码进行分析时，需要为每个脚本指令设置相应的使用方法，即脚本模板。表1为脚本指令示例，包括多个脚本指令的名称、含义以及相应的脚本模板。其中，v_if、v_elif、v_else这三个指令用正则匹配来分析，并且最后以{结尾。v_if与v_elif是有关联的，当在JavaScript语句中找到“}else{”时，表明前面的if与当前的else是配对的，这样else后面DOM的条件要解析成前面if值的反值，即取反。

表1脚本指令示例

对于each这个指令，由于each代表了一个或多个节点，在解析时方法类似v_if，但是要对each与for两种结构分别进行分析。对此，所设置的脚本模板如下所示：

此外，bind指令是当属性中有bind开头的属性(如bindtap点击、bindinput表单输入、bindmouseup等鼠标事件)，由于要在属性中添加，所以将其写入attr字段中。

步骤2034，当一个节点被确认为非文本节点时，从模板树中读取该非文本节点的标签及属性。

例如，使用nodeType返回节点的类型不是3，那么确定该节点为非文本节点。对该非文本节点进行HTML语法分析，可以获得该非文本节点的标签(tagName)及属性(attributes)。

这样，在步骤203中，根据至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构，该数据结构将数据模型和DOM直连起来，因此，也称为直连数据结构。

在本发明一实施例中，构建上述数据结构的具体方法包括：在数据结构中，为每个文本节点构建一个元素；在该元素中，将该文本节点的属性名作为键(key)，将与该属性名相应的表达式以及该表达式对应的脚本指令作为值(value)，构建与数据模型相关联的字段。其中，脚本指令和表达式的关系也是键值的组合，即脚本指令作为键，表达式作为值。

也就是说，根据双层键值(key，(key，value))的方式，将文本节点的属性写入上述相关联的字段。当数据模型中的数据出现变动时，通过该属性可以关联到相应的节点，这样就实现了数据与DOM的直连，因此，上述字段也可称为直连关系字段。

例如，所建立的数据结构为数据数组domArr，其中标签为“p”的文本节点中，构建的直连关系字段为relation字段，包括2个属性：一是key为属性名“name”，value包括：脚本指令v_if，表达式“${name}”；脚本指令innerText，表达式“姓名：${name}”；二是key为属性名“class_name”，value包括：脚本指令attr，表达式“{‘class’:‘${class_name}’}”。

又如，当脚本指令为each时，构建的relation字段如下所示，其中，key为属性名“data”，value包括：脚本指令each，表达式“arr:‘data’,index:‘index’,item:‘value’”。

在步骤204中，将数据结构转化为树结构，根据数据模型和树结构生成第一标记语言文档，并根据第一标记语言文档生成页面。

本步骤中，在生成第一标记语言文档时，将数据结构转化为树结构。对生成的第一标记语言文档进行渲染，即可生成所需的页面。

具体而言，在生成HTML文档时，将数据结构转化为DOM。例如，转化的方法是虚拟了一个root的根结点，利用getTree函数，将输入的数据结构data转化为树结构root，如下代码所示。

这样，生成的树结构如下所示，可见，该树结构中包括了直连关系字段relation。

图4为依据本发明一实施例的根据数据模型和树结构生成第一标记语言文档的示例性流程图。如图4所示，采用递归方法，包括如下步骤：

步骤401，根据树结构中节点的标签tag生成HTML文档中的元素。

例如，在下述关于render函数的代码示例中，使用document.createElement函数生成元素，即语句var el＝document.createElement(node.tag)。

步骤402，在属性中添加更新后的domId。

步骤403、添加静态属性。

所谓静态属性是指树结构中针对节点设置的固定值。这些固定值是节点属性的基本内容，在此基础上通过变量进行动态设置来添加动态属性。在如下的代码中，使用setAttribute函数来设置节点的静态属性。

步骤404，对直连关系字段relation进行处理。

直连关系字段包括属性名、脚本指令、表达式。运行各个脚本指令，获得运行结果。具体包括，v_if、v_elif、v_else，如果false直接返回；innerHTML，利用模板字符串${}；对于each，可以根据数组的长度，循环添加入元素，其中，domid设置成`${domid}_${index}`来标识元素。这样在更新页面的时候，只要知道数组中变动元素的index，就可找出DOM中要更新的元素。

步骤405，递归处理子元素。

当步骤401中生成的元素作为父元素、该父元素包括多个子元素时，可以使用forEach指令对各个子元素进行递归处理，如下代码所示。

最终生成的HTML文档是指返回的doc。将该doc进行渲染，可以得到初始页面，在浏览器的用户界面上显示。

在上述实施例中，通过根据待生成页面的视图生成模板字符串，对模板字符串进行解析，生成模板树，获取模板树中至少一个节点的属性，根据至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构，将数据结构转化为树结构，根据数据模型和树结构生成第一标记语言文档，可以获得以下技术效果：

1)由于在模板字符串中写任意的JavaScript语句，可以不依赖于固定的语法和自定义的标签，无需手动合成虚拟树，因此，减少了开发人员的学习成本，且语法灵活，实现起来更加简便。

2)在生成第一标记语言文档时，将数据结构转化为树结构，好处是在更新DOM的时候，这种一维的数组结构易于操作与查找；而在生成HTML文档时，这种树结构更易于生成，因此，提高了页面更新的速度，减少了代码的执行时间。

3)通过模板树构建与待生成页面的数据模型相关联的数据结构，将数据模型与DOM直连起来，这种绑定可以大大较少复杂页面的处理时间，提高了处理效率，同时提高了页面处理装置的资源利用率。

图5为依据本发明另一实施例的页面处理方法的示例性流程图。如图5所示，在图2所示的基础之上，步骤204生成的页面为初始页面后，还包括如下步骤：

步骤501，监听数据模型是否发生变动。

数据模型中的数据是用于渲染页面的，监听这些数据是否发送变动，若发生变动，则更新DOM，进而更新所显示的初始页面。

在本发明一实施例中，可以使用defineProperty函数来监听数据模型中属性的变化。具体而言，监听属性中的set方法。set作为属性的重写器，一旦属性被重新赋值，此set方法被自动调用。

在本发明另一实施例中，可以使用setData函数，并非是设置属性的时候就更新DOM，而是手动调用，手动调用可以有效的减少更新页面的执行。

步骤502，当监听到数据模型发生变动时，根据数据模型和数据结构中节点的属性对第一标记语言文档进行更新，得到第二标记语言文档，并根据第二标记语言文档生成更新后的页面。

对得到的第二标记语言文档进行渲染，即可得到更新后的页面。

图6为依据本发明一实施例的更新标记语言文档的示例性流程图。如图6所示，包括如下步骤：

步骤601，确定数据模型中发生变动的数据字段。

例如，在如下代码中，key指发生变动的数据字段。

步骤602，在数据结构中确定出与该数据字段的属性相关联的节点。

例如，该数据字段的属性为“name”，数据结构为包括直连关系字段relation的数组domArr(如下代码所示)，相关联的节点为标签为“p”的节点。

步骤603，在第一标记语言文档中确定出与该相关联的节点对应的元素。

例如，通过标签为“p”，可以确定HTML文档doc中对应标签“p”的元素，作为待更新的元素。

步骤604，根据发生变动的数据字段的值重新对该元素进行赋值，得到第二标记语言文档。

例如，数据字段的值用value表示，通过getValue函数对元素的取值重新进行赋值，这样就完成了对元素的更新，从而得到了新的HTML文档。

通过本实施例，当数据模型发生变动时，通过构建的与待生成页面的数据模型相关联的数据结构，能够确定出待更新的HTML元素，这样能够快速实现页面的更新。

图7为依据本发明又一实施例的页面处理方法的示例性流程图。如图7所示，在图2所示的基础之上，还包括如下步骤：

步骤701，获取待生成页面的视图中所触发的事件。

例如，这种事件(event)为点击(click)事件、输入(input)事件等。

步骤702，根据数据结构中节点的属性和事件对第一标记语言文档进行更新，得到第二标记语言文档，并根据第二标记语言文档生成更新后的页面。

根据在节点的属性中预先设置的绑定指令，确定出数据结构中与事件相关联的节点；在第一标记语言文档中确定出与该相关联的节点对应的元素；调用该事件对应的事件处理函数对事件进行处理，得到第二标记语言文档。对得到的第二标记语言文档进行渲染，即可得到更新后的页面。

例如，绑定指令为上述表1中给出的bind指令，该bind指令在数据结构中是写入了节点的属性attr字段中。那么，在该数据结构中找到bind指令，从而确定出该bind指令所在的节点。

通过本实施例，事件产生导致了界面产生变动，当事件触发时，通过构建的直连数据结构，将触发的事件导入到HTML中，从而实现了基于事件的更新。

图8为依据本发明一实施例的页面处理装置800的结构示意图，该装置应用于浏览器中。该页面处理装置800包括：

模板化模块810，用于根据待生成页面的视图生成模板字符串；

解析模块820，用于对模板化模块810生成的模板字符串进行解析，生成模板树；

获取模块830，用于获取解析模块820生成的模板树中至少一个节点的属性；

构建模块840，用于根据获取模块830得到的至少一个节点的属性，构建与待生成页面的数据模型相关联的数据结构；

转化模块850，用于将构建模块840得到的数据结构转化为树结构；及，

生成模块860，用于根据数据模型和转化模块850得到的树结构生成第一标记语言文档，并根据第一标记语言文档生成页面。

在本发明一实施例中，模板字符串包括脚本语言语句与标记语言语句，模板化模块810用于，设置第一标识符用于标记脚本语言语句；设置第二标识符用于在使用标记语言语句时标记输出变量。

在本发明一实施例中，获取模块830用于，遍历模板树，获得至少一个节点；判断所述至少一个节点是否为文本节点；当一个节点被确认为文本节点时，根据脚本语言的语法对该文本节点的语句进行分析，获得该文本节点的至少一个属性名以及与该属性名相应的表达式。

在本发明一实施例中，页面处理装置800进一步包括：

监听模块870，用于监听数据模型是否发生变动；

更新模块880，用于当监听模块870监听到数据模型发生变动时，根据数据模型和构建模块840得到的数据结构中节点的属性对生成模块860得到的第一标记语言文档进行更新，得到第二标记语言文档。

在本发明一实施例中，页面处理装置800进一步包括：

监听模块870，用于获取待生成页面的视图中所触发的事件；

更新模块880，用于根据构建模块840得到的数据结构中节点的属性和监听模块870得到的事件对生成模块860得到的第一标记语言文档进行更新，得到第二标记语言文档。

图9为依据本发明又一实施例的页面处理装置900的结构示意图。该页面处理装置900包括：处理器910、存储器920、端口930以及总线940。处理器910和存储器920通过总线940互联。处理器910可通过端口930接收和发送数据。其中，

处理器910用于执行存储器920存储的机器可读指令模块。

存储器920存储有处理器910可执行的机器可读指令模块。处理器910可执行的指令模块包括：模板化模块921、解析模块922、获取模块923、构建模块924、转化模块925和生成模块926。其中，

模板化模块921被处理器910执行时可以为：根据待生成页面的视图生成模板字符串；

解析模块922被处理器910执行时可以为：对模板化模块921生成的模板字符串进行解析，生成模板树；

获取模块923被处理器910执行时可以为：获取解析模块922生成的模板树中至少一个节点的属性；

构建模块924被处理器910执行时可以为：根据获取模块923得到的至少一个节点的属性，构建与待生成页面的数据模型相关联的数据结构；

转化模块925被处理器910执行时可以为：将构建模块924得到的数据结构转化为树结构；

生成模块926被处理器910执行时可以为：根据数据模型和转化模块925得到的树结构生成第一标记语言文档，并根据第一标记语言文档生成页面。

在本发明实施例中，处理器910可执行的指令模块进一步包括：监听模块927和更新模块928，其中，

监听模块927被处理器910执行时可以为，监听数据模型是否发生变动；

更新模块928被处理器910执行时可以为，当监听模块927监听到数据模型发生变动时，根据数据模型和构建模块924得到的数据结构中节点的属性对生成模块926得到的第一标记语言文档进行更新，得到第二标记语言文档。

在另一实施例中，监听模块927被处理器910执行时可以为，获取待生成页面的视图中所触发的事件；

更新模块928被处理器910执行时可以为，根据构建模块924得到的数据结构中节点的属性和监听模块927得到的事件对生成模块926得到的第一标记语言文档进行更新，得到第二标记语言文档。

由此可以看出，当存储在存储器920中的指令模块被处理器910执行时，可实现前述各个实施例中模板化模块、解析模块、获取模块、构建模块、转化模块、生成模块、监听模块和更新模块的各种功能。

上述装置和***实施例中，各个模块及单元实现自身功能的具体方法在方法实施例中均有描述，这里不再赘述。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

另外，本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。

因此，本发明还公开了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本发明上述方法的任何一种实施例。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (16)

1.一种页面处理方法，其特征在于，包括：

根据待生成页面的视图生成模板字符串；

对所述模板字符串进行解析，生成模板树；

获取所述模板树中至少一个节点的属性，根据所述至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构；及，

将所述数据结构转化为树结构，根据所述数据模型和所述树结构生成第一标记语言文档，并根据所述第一标记语言文档生成所述页面；

其中，所述获取所述模板树中至少一个节点的属性包括：

遍历所述模板树，获得所述至少一个节点；

判断所述至少一个节点是否为文本节点；

当一个节点被确认为文本节点时，根据脚本语言的语法对该文本节点的语句进行分析，获得该文本节点的至少一个属性名以及与该属性名相应的表达式，所述表达式对应至少一个脚本指令；

所述根据所述至少一个节点的属性构建与待生成页面的数据模型相关联的数据结构包括：

在所述数据结构中，为每个文本节点构建一个元素；

在该元素中，将该文本节点的属性名作为键，将与该属性名相应的表达式以及该表达式对应的脚本指令作为值，构建与所述数据模型相关联的字段。

2.根据权利要求1所述的方法，其中，所述模板字符串包括脚本语言语句与标记语言语句，所述根据待生成页面的视图生成模板字符串包括：

设置第一标识符用于标记所述脚本语言语句；

设置第二标识符用于在使用所述标记语言语句时标记输出变量。

3.根据权利要求1所述的方法，其中，所述判断所述至少一个节点是否为文本节点包括：

确定每个节点的类型，根据类型判断节点是否为文本节点。

4.根据权利要求1所述的方法，进一步包括：

预先设置每个脚本指令的脚本模板；

所述根据脚本语言的语法对该文本节点的语句进行分析，获得该文本节点的至少一个属性名以及与该属性名相应的表达式包括：

针对每个脚本指令，根据该脚本指令的脚本模板对该文本节点的语句进行匹配，得到该脚本指令对应的表达式。

5.根据权利要求1所述的方法，进一步包括：

当一个节点被确认为非文本节点时，从所述模板树中读取该非文本节点的标签及属性。

6.根据权利要求1所述的方法，进一步包括：

监听所述数据模型是否发生变动；

当监听到所述数据模型发生变动时，根据所述数据模型和所述数据结构中节点的属性对所述第一标记语言文档进行更新，得到第二标记语言文档。

7.根据权利要求6所述的方法，其中，所述根据所述数据模型和所述数据结构中节点的属性对所述第一标记语言文档进行更新，得到第二标记语言文档包括：

确定所述数据模型中发生变动的数据字段；

在所述数据结构中确定出与该数据字段的属性相关联的节点；

在所述第一标记语言文档中确定出与该相关联的节点对应的元素；

根据发生变动的数据字段的值重新对该元素进行赋值，得到所述第二标记语言文档。

8.根据权利要求1所述的方法，进一步包括：

获取待生成页面的视图中所触发的事件；

根据所述数据结构中节点的属性和所述事件对所述第一标记语言文档进行更新，得到第二标记语言文档。

9.根据权利要求8所述的方法，其中，所述根据所述数据结构中节点的属性和所述事件对所述第一标记语言文档进行更新，得到第二标记语言文档包括：

根据在节点的属性中预先设置的绑定指令，确定出所述数据结构中与所述事件相关联的节点；

在所述第一标记语言文档中确定出与该相关联的节点对应的元素；

根据对所述事件的处理结果重新对该元素进行赋值，得到所述第二标记语言文档。

10.一种页面处理装置，其特征在于，包括：

模板化模块，用于根据待生成页面的视图生成模板字符串；

解析模块，用于对所述模板化模块生成的模板字符串进行解析，生成模板树；

获取模块，用于获取所述解析模块生成的模板树中至少一个节点的属性；

构建模块，用于根据所述获取模块得到的至少一个节点的属性，构建与待生成页面的数据模型相关联的数据结构；

转化模块，用于将所述构建模块得到的数据结构转化为树结构；及，

生成模块，用于根据所述数据模型和所述转化模块得到的树结构生成第一标记语言文档，并根据所述第一标记语言文档生成所述页面；

其中，所述获取模块用于，遍历所述模板树，获得所述至少一个节点；判断所述至少一个节点是否为文本节点；当一个节点被确认为文本节点时，根据脚本语言的语法对该文本节点的语句进行分析，获得该文本节点的至少一个属性名以及与该属性名相应的表达式，所述表达式对应至少一个脚本指令；

所述构建模块用于，在所述数据结构中，为每个文本节点构建一个元素；在该元素中，将该文本节点的属性名作为键，将与该属性名相应的表达式以及该表达式对应的脚本指令作为值，构建与所述数据模型相关联的字段。

11.根据权利要求10所述的装置，其中，所述模板字符串包括脚本语言语句与标记语言语句，所述模板化模块用于，设置第一标识符用于标记所述脚本语言语句；设置第二标识符用于在使用所述标记语言语句时标记输出变量。

12.根据权利要求10所述的装置，其中，所述获取模块用于，确定每个节点的类型，根据类型判断节点是否为文本节点。

13.根据权利要求10所述的装置，进一步包括：

监听模块，用于监听所述数据模型是否发生变动；

更新模块，用于当所述监听模块监听到所述数据模型发生变动时，根据所述数据模型和所述构建模块得到的数据结构中节点的属性对所述生成模块得到的第一标记语言文档进行更新，得到第二标记语言文档。

14.根据权利要求10至12中任一项所述的装置，进一步包括：

监听模块，用于获取待生成页面的视图中所触发的事件；

更新模块，用于根据所述构建模块得到的数据结构中节点的属性和所述监听模块得到的事件对所述生成模块得到的第一标记语言文档进行更新，得到第二标记语言文档。

15.一种计算机可读存储介质，其特征在于，存储有计算机可读指令，使至少一个处理器执行如权利要求1至9中任一项所述的方法。

16.一种终端设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求1至9中任一项所述的方法。

Images