CN111580830A - 超文本标记语言文档元素的绑定及解析方法 - Google Patents

Abstract

本发明提供了一种超文本标记语言文档元素的绑定及解析方法，其中，超文本标记语言文档元素的绑定方法包括：根据目标元素的绑定属性定义所述目标元素和指定元素的绑定关系；根据所述目标元素、绑定属性、所述指定元素及绑定关系构成超文本标记语言文档。实施本发明在不引用脚本的情况下使超文本标记语言实现对绑定关系的支持，因此通过实施本发明实现的绑定关系具有高性能、占用内存小的特点，极大改善用户体验。

Description

超文本标记语言文档元素的绑定及解析方法

技术领域

本发明涉及计算机应用技术领域，具体涉及一种超文本标记语言文档元素的绑定及解析方法。

背景技术

随着超文本标记语言(HyperText Mark-up Language，HTML)的发展，运行在PC、智能手机上的应用(App)，开始使用HTML技术来为用户呈现内容，并作为人机交互的界面。在当前的HTML规范中缺乏对绑定关系的支持(绑定关系为在用户界面上利用某个元素的状态值来改变另外一个元素状态的用法)，因此开发者只能通过额外的脚本程序来实现这一功能。但是编写额外的脚本程序不仅加大了开发人员的工作量，而且在浏览器的脚本功能被禁用的情形下，通过脚本实现的功能无法实现，另外脚本是解释性编程语言，执行效率相对较低，占用内存大。由此可见，通过脚本实现绑定关系存在诸多弊端。

发明内容

因此，本发明要解决的技术问题在于克服现有技术中的HTML规范中缺乏对绑定关系的支持的缺陷，从而提供一种超文本标记语言文档元素的绑定及解析方法。

本发明第一方面提供了一种超文本标记语言文档元素的绑定方法包括：根据目标元素的绑定属性定义所述目标元素和指定元素的绑定关系；根据所述目标元素、绑定属性、所述指定元素及绑定关系构成超文本标记语言文档。

可选地，本发明提供的超文本标记语言文档元素的绑定方法中，绑定属性的值为至少一个赋值表达值。

可选地，赋值表达式包括左值及右值；所述左值用于指定所述目标元素中受所述指定元素影响的属性或内容；所述右值为表达式，包含所述指定元素的内容和/或属性。

本发明第二方面提供了一种超文本标记语言文档元素的解析方法，所述超文本标记语言文档包括：目标元素、所述目标元素的绑定属性、指定元素、以及根据绑定属性定义的所述目标元素与所述指定元素的绑定关系；所述超文本标记语言文档元素的解析方法包括：对所述超文本标记语言文档进行解析，得到DOM树，所述超文本标记语言文档中各元素分别形成一个DOM树节点；在所述指定元素形成的DOM树节点上注册监听器；通过监听器判断所述指定元素的内容或属性的值是否发生变化；若所述指定元素的内容或属性的值发生变化，通过所述监听器执行所述绑定关系，更新所述目标元素的内容或属性的值。

可选地，本发明提供的超文本标记语言文档元素的解析方法中，绑定属性的值为至少一个赋值表达式；所述赋值表达式包括左值和右值，所述左值用于指定所述目标元素中受所述指定元素影响的属性或内容；所述右值为表达式，包含所述指定元素的内容和/或属性；在所述对所述超文本标记语言文档进行解析的步骤之后，所述在所述指定元素形成的DOM树节点上注册监听器的步骤之前，还包括：对所述右值进行解析并编译，得到求值树，所述求值树为用于求值的函数调用树结构。

可选地，通过所述监听器执行所述绑定关系，更新所述目标元素的步骤，包括：遍历所述求值树；根据所述指定元素的内容和/或属性的值计算所述右值的值；通过所述右值的值取代所述目标元素的目标元素中受所述指定元素影响的属性或内容。

可选地，本发明提供的超文本标记语言文档元素的解析方法还包括：判断所述目标元素的绑定属性是否发生变化；若所述目标元素的绑定属性发生变化，返回所述对所述右值进行解析并编译，得到求值树的步骤。

可选地，本发明提供的超文本标记语言文档元素的解析方法还包括：判断所述指定元素是否被删除；若所述指定元素被删除，销毁所述求值树。

本发明第三方面提供了一种计算机设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，从而执行如本发明第一方面提供的超文本标记语言文档元素的绑定方法，或，本发明第二方面提供的超文本标记语言文档元素的解析方法。

本发明第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如本发明第一方面提供的超文本标记语言文档元素的绑定方法，或，本发明第二方面提供的超文本标记语言文档元素的解析方法。

本发明技术方案，具有如下优点：

1.本发明提供的超文本标记语言文档元素的绑定方法，先根据目标元素的绑定属性定义目标元素和指定元素的绑定关系，然后根据目标元素、绑定属性、指定元素及绑定关系构成宝文本标记语言文档。该方法在不引用脚本的情况下使超文本标记语言实现对绑定关系的支持,因此通过该方法实现的绑定关系具有高性能、占用内存小的特点，极大改善用户体验。

2.本发明提供的超文本标记语言文档元素的绑定方法，绑定属性的值为至少一个赋值表达式，赋值表达式包括左值和右值，左值用于指定目标元素中受指定元素影响的属性或内容，右值为表达式，包含指定元素的内容和/或属性。在本发明提供的超文本标记语言文档元素的绑定方法中，右值表达式可以根据用户的需求进行定义，使得绑定关系更加灵活。

3.本发明提供的超文本标记语言文档元素的解析方法，超文本标记语言文档包括，目标元素、目标元素的绑定属性、以及根据绑定元素定义的目标元素与指定元素的绑定关系，对上述文档进行解析时，先对超文本标记语言文档进行解析，得到DOM树，然后在指定元素形成的DOM树节点上注册监听器，当指定元素的内容或属性的值发生变化时，监听器执行绑定关系，更新目标元素。在本发明提供的超文本标记语言文档元素的解析方法中，在不引用脚本的情况下实现了元素间的绑定。

4.本发明提供的超文本标记语言文档元素的解析方法，超文本标记语言文档中，绑定属性的值为赋值表达式，赋值表达式包括左值和右值，右值为包含指定元素的内容和/或属性的表达式，对超文本标记语言文档进行解析时，对右值进行解析并编译，形成求值树，右值表达式中的每个变量分别为一个叶子节点，每个函数分别为一个函数节点，对右值表达式进行求值时，遍历求值树即可得到右值表达式的值，即使右值表达式中的变量或函数发生了变化，只需将求值树中发生改变的因素相对应的节点进行替换，然后重新遍历求值树即可，无需再次解析并构造求值树，求值过程几乎没有任何性能损失，求值过程更高效。

附图说明

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

图1为本发明实施例中包含绑定关系的界面；

图2为本发明实施例中超文本标记语言文档元素的绑定方法的一个具体示例的流程图；

图3为本发明实施例中包含绑定关系的界面；

图4为本发明实施例中超文本标记语言文档元素的解析方法的一个具体示例的流程图；

图5为本发明实施例中超文本标记语言文档元素的解析方法对超文本标记语言文档进行解析后形成的DOM树的示意图；

图6为本发明实施例中超文本标记语言文档元素的解析方法的具体示例的流程图；

图7为本发明实施例中根据右值表达式构造的求值树；

图8-图10为本发明实施例中超文本标记语言文档元素的解析方法的具体示例的流程图；

图11为本发明实施例中提供的计算机设备的示意框图。

具体实施方式

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

下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

实施例1

很多运行在PC、智能手机手机上的应用使用前端技术来为用户呈现内容，并作为人机交互的界面。例如，现在的一些餐厅中会使用特定应用使得用户完成自助点餐，该应用呈现给的界面如图1所示，该界面包括两部分内容：选择框和选择框下面的文字，在该界面中，当用户在选择框中选择“上海阳春面”时，在选择框下方的文字部分会对应显示“您当前的选择是：上海阳春面”，这种在用户界面上利用某个元素的状态值来改变另外一个元素状态的用法，在传统的用户界面编程技术中，称为“绑定(binding)”。由于现有的HTML规范中缺乏对绑定技术的支持，因此通过需要编写如下所示的脚本程序来实现这一功能：

上述代码的基本原理为：脚本程序监听select元素上的onchange事件；当该事件发生时(通常会因为用户交互产生这一事件)，运行在用户代理中的脚本执行引擎会调用相应的事件处理函数“function noodle_changed()”；在事件处理函数中读取select元素的value属性值，然后再设置到span元素的id属性上。

虽然通过脚本程序可以实现元素之间的绑定关系，但是使用脚本程序存在诸多缺陷：1.需要编写额外的脚本程序，这加大了开发人员的工作量；2.在浏览器的脚本功能被禁止的情形下，无法工作；3.脚本是解释性编程语言，执行效率相对较低，且占用内存大。

因此，为了解决现有技术中，通过脚本实现绑定所存在的问题，本发明实施例提供了一种超文本标记语言文档元素的绑定方法，如图2所示，包括：

步骤S110：根据目标元素的绑定属性定义所述目标元素和指定元素的绑定关系。本发明实施例中在原有HTML规范的基础上，新增了绑定属性，名为“databind”，该属性为自定义的，因此用于标识该属性的标识符可以随意调整。

步骤S120：根据所述目标元素、绑定属性、所述指定元素及绑定关系构成超文本标记语言文档。在一具体实施例中，用户代理通过对超文本标记语言文档进行解析，并对超文本标记语言文档内容进行渲染，进而呈现给用户并实现用户交互。

在实际应用中，为了通过本发明实施例提供的超文本标记语言文档元素的绑定方法实现图1所示的案例，可以形成如下代码：

在上述代码中，通过目标元素“span”的绑定属性“databind”定义了目标元素“span”与指定元素“select”的绑定关系“textContent:(#noodle).attr.value”，其中，“textContent”表示span元素的内容，“(#noodle).attr.value”表示id属性为noodle的元素(即select元素)的value属性的值。span元素的初始内容相当于：<span>兰州拉面</span>，当select元素的value属性值因为用户选择而发生变化时，span元素的内容将自动发生变化，例如，用户通过select元素选择了“重庆小面”这一条目，则span元素的内容变为：<span>重庆小面</span>，这一同步改动将由用户代理自动实现，不需要运行任何外部脚本程序。

本发明实施例提供的超文本标记语言文档元素的绑定方法，先根据目标元素的绑定属性定义目标元素和指定元素的绑定关系，然后根据目标元素、绑定属性、指定元素及绑定关系构成宝文本标记语言文档。通过该方法可以在不引用脚本的情况下使超文本标记语言实现对绑定关系的支持，通过本发实施例提供的方法实现的绑定关系具有性能高、占用内存小的特点，极大改善了用户体验。

在上述代码中，通过一个属性“databind”作为绑定属性表示目标元素和指定元素之间的绑定关系，但是在一具体实施例中，可以通过多个属性来表示绑定关系，例如，可以通过第一绑定属性指定指定元素的属性或内容，通过第二绑定属性指定目标元素的属性或内容，第一绑定属性和第二绑定属性共同形成绑定属性，完成对指定元素和目标元素的绑定关系的定义，通过多个属性表示绑定关系可以得到如下所示的代码：

上述代码使用datafrom属性指定了id为“noddle”的指定元素的属性“value”，使用datato属性指定了目标元素的内容“innerText”，通过datafrom和datato属性定义的绑定关系表示，将id为“noddle”的元素的value属性的值用作元素“span”的内部HTML内容(innerText)。但是通过该方法要求指定元素必须拥有id属性，这种用法相对简单，但灵活性不足，且难以支持可编程能力。

在一可选实施例中，绑定属性的值为至少一个赋值表达值：<lvalue>:<rvalueexpression>，该赋值表达式使用：(冒号)运算符，左值(lvalue)用于指定目标元素中受所述指定元素影响的属性或内容；右值(rvalue expression)为表达式，包含所述指定元素的内容和/或属性。

在一具体实施例中，左值可取不同类型的值：

textContent：表示右值表达式的值将被用作目标元素的文本内容。该取值亦可用innerText表示；

innerHTML：表示右值表达式的值将被用作目标元素的内部HTML内容；

attr.<attribute-name>：表示右值表达式的值将被用作目标元素的特定属性(attribute)的值，如attr.value、attr.name、attr.id等；

tyle.<style-name>：表示右值表达式的值将被用作目标元素的特定CSS属性(property)的值，如style.color、style.font、style.width等。

以上几种左值的取值类型仅为举例说明，实际应用中用户可根据实际需求对左值进行设置。

在一可选实施例中，可以使用CSS选择器来选择HTML文档中的除目标元素之外的其他元素作为目标元素，然后使用类似左值的表达式来选择该元素的文本内容、HTML内容、HTML属性(attribute)或者CSS属性(property)值作为右值(rvalue)，例如：style.color:(#theColor).attr.value，表示id为theColor的元素的value属性值，将用于目标元素的color风格属性值。当CSS选择器返回多个HTML元素时，可使用下标获得指定的元素：(.pastoral)[0]，该表达式返回class属性为pastoral的第一个元素。

在一具体实施例中，绑定属性可以同时指定多个绑定关系，当绑定属性定义多个绑定关系时，可以使用；(分号)分割多个绑定关系，如：style.color:(#theColor).attr.value；attr.class:(#theColor).attr.value。

在一具体实施例中，可以在右值表达式中使用预先定义的字符串函数，用来实现基本的字符串操作，以便提供一定的可编程能力。示例性地，在本发明实施例中，所有函数使用字符串为参数；使用单引号表示字面立即值，如'We are literal words'；对需要整数或浮点数作为参数时，以符合C语言标准的字符串形式表达，如'55'(十进制)、'0B10'(二进制)、'071'(八进制)、'0xFF'(十六进制)、'55.356E10'(浮点数)等；所有函数返回字符串，当参数非法时，返回空字符串(”)，具体规则可以根据用户的实际需求进行调整。所有函数支持以上要求后，可实现函数的嵌套使用，并可实现高效的解析处理。如执行表达式：UPPER(STRCAT('a','b'))，将返回字符串AB。

对具体的用户代理实现，本发明实施例至少支持如下字符串函数：

INTSTR，将给定字符串按照要求的进制进行转换，其原型为：INTSTR(string[,scale])，例如，执行表达式INTSTR('255asdfk','16')，返回'0x55'；

STRCAT，用于连接两个或多个字符串，其原型为：STRCAT(string1,string2,...)；

LOWER，用于转换字符串中所有字符为小写字母，其原型为：LOWER(string)；

UPPER，用于转换字符串中所有字符为大写字母，其原型为：UPPER(string)；

SUBSTR，用于获取子字符串，其原型为：SUBSTR(string,position[,length])；

LENGTH，用于获取字符串长度(返回值仍为字符串)，其原型为：LENGTH(string)；

LEFT，返回指定长度左侧子字符串，其原型为：LEFT(string,length)；

RIGHT，返回指定长度右侧子字符串，其原型为：RIGHT(string,length)；

LTRIM，去掉字符串左侧的指定前缀子字符串(默认为空格)，其原型为：LTRIM(string[,prefix])；

RTRIM，去掉字符串右侧的指定后缀子字符串(默认为空格)，其原型为：RTRIM(string[,postfix])；

LSTRIP，返回从开头到第一个分割字符串(默认为空格)之间的子字符串，其原型为：LSTRIP(string[,delimiter])；

RSTRIP，返回从结尾倒数第一个分割字符串(默认为空格)之间的子字符串，其原型为：RSTRIP(string[,delimiter])；

REPEAT，重复字符串，其原型为：REPEAT(string,count)；

REVERSE，反转字符串，其原型为：REVERSE(string)；

REPLACE，查找并替换子字符串，其原型为：REPLACE(string,from,to)；

GETSTR，返回字符串数组(使用JSON表达式，如["兰州拉面","重庆小面","上海阳春面","武汉热干面"])中特定位置(索引值)的字符串，其原型为：GETSTR(array,index)；

MAPSTR，在字典结构(使用JSON表达式，如{"la":"兰州拉面","xiao":"重庆小面","yang":"上海阳春面","re":"武汉热干面"})中查找特定值，其原型为：MAPSTR(dict,key)；

JSONIZE，利用多个字符串构造特定的JSON表达式字符串，其原型为：JSONIZE(<'array'|'dict'>,string1,string2,string3,string4,...)。

以上字符串函数仅为举例说明，实际应用中用户可根据凥需求使用不同的字符函数。

除上述字符函数之外，右值表达式中还可包括非变量、字符等因素。基于上述超文本标记语言文档元素的绑定方法，可以方便地实现各种绑定关系，例如：

以上代码中的databind属性定义了两个绑定关系：第一个绑定关系使用第一个h3元素的class属性值以及第二个h3元素的class属性值，中间使用字符“-”连接后赋值给了目标元素的class属性；第二个绑定关系使用第一个h3元素的innerText内容值以及第二个h3元素的innerText内容值，中间使用字符“；”连接后赋值给了目标元素的innerText内容。使用以上绑定关系表达式后，相当于如下代码：

<h3 class＝"info">Head 1</h3>

<h3 class＝"warning">Head 2</h3>

<p class＝"info-warning">HEAD 1；HEAD 2</p>

在一具体实施例中，为了增强绑定关系右值表达式的灵活性，可以在表示绑定关系的右值表达式中支持运算符，并支持除字符串之外的其他数据类型，如整数，例如：

上面的代码使用“^”作为字符串的连接运算符，替代了STRCAT函数。类似地，也可以定义其他运算符，比如针对整数的加减乘除运算符等，这种方法可以提高右值表达式的灵活性，但是在一定程度上也加大了右值表达式的求值复杂度。

另外，在一具体实施例中，还可以在右值表达式中引用预先定义的全局变量，尤其是JSON对象，通过引入全局变量可以带来一定的性能好处，例如，在MAPSTR函数的实现中，就可以直接访问已经构造好的JSON对象：

在上述代码中，通过在head元素中引入一个新的子元素“jsondta”定义了一个全局的JSON对象，HTML解析器将把这个JSON对象转换为内部表达，从而在后续引用这个对象时，无须重复解析。比如在调用MAPSTR函数时，可以传入$dictNoodle变量来引用这个全局的JSON对象，从而在一定程度上提高性能。

在一具体实施例中，甚至可以建立和全局JSON数据对象之间的绑定关系，例如：

综上所述，在引入新的绑定元素定义目标元素和指定元素之间的绑定关系的基础上，可以灵活地对绑定关系进行自定义，从而满足用户的需求，且相较于通过脚本实现绑定关系，通过本发明提供的方法实现的绑定关系效果更优，例如，如图3所示的秒表元素是一种复杂控件，为表示百分秒数值，理论上的更新频率要达到每秒100次。如果使用脚本同步更新秒表表盘下面的文本，受限于脚本的执行效率以及浏览器页面的渲染机制，最高能达到的更新次数为20次左右。而如果使用本发明提供的绑定关系，在同样的测试条件下，则可达到每秒50次的更新次数。

实施例2

本发明实施例提供了一种超文本标记语言文档元素的解析方法，用于解析通过上述实施例1中提供的超文本标记语言文档元素的绑定方法得到的超文本标记语言文档，超文本标记语言文档包括：目标元素、所述目标元素的绑定属性、指定元素、以及根据所述绑定属性定义的所述目标元素与所述指定元素的绑定关系，详细描述见上述实施例1。

如图4所示，超文本标记语言文档元素的解析方法包括：

步骤S210：对所述超文本标记语言文档进行解析，得到DOM树，如图5所示，所述超文本标记语言文档中各元素分别形成一个DOM树节点。

步骤S220：在所述指定元素形成的DOM树节点上注册监听器，由于指定元素中的内容或属性的值发生变化时，目标元素也需要相应发生变化，因此需要在指定元素形成的DOM树节点上注册监听器，当指定元素的内容或属性值发生变化时，完成对目标元素的更新。在一具体实施例中，监听器的本质为回调函数。在图5所述的DOM树中，指定元素形成的DOM树节点为被绑定节点，目标元素形成的OM树节点为目标节点。

步骤S230：通过监听器判断所述指定元素的内容或属性的值是否发生变化，若所述指定元素的内容或属性的值发生变化，执行步骤S240。

步骤S240：通过所述监听器执行所述绑定关系，更新所述目标元素。以图1的案例为例，当选择框中的选中的选项发生变化时，选择框下面的文字也相应发生变化。

在一具体实施例中，超文本标记语言文档中的所有的绑定关系会形成一个链表结构，作为HTML文档DOM树的一个全局属性，称为“全局绑定关系表”。同一指定元素可能存在多个绑定关系，即，当同一指定元素存在多个绑定关系时，指定元素的变化会影响多个目标元素的变化，当同一指定元素存在多个绑定关系时，该指定元素的所有绑定关系形成一个链表，称为“元素绑定关系表”，该链表中的每一个元素，都应该包含两个部分：该元素绑定的属性，以及与该属性对应的指向全局绑定关系表的指针。当监听器检测到该元素的属性发生变化时，确定元素绑定关系表中与该属性相对应的指针所指向的全局绑定关系表中的绑定关系，执行该绑定关系，实现对目标元素的值或属性的改变。

本发明提供的超文本标记语言文档元素的解析方法，超文本标记语言文档包括，目标元素、目标元素的绑定属性、以及根据绑定元素定义的目标元素与指定元素的绑定关系，对上述文档进行解析时，先对超文本标记语言文档进行解析，得到DOM树，然后在指定元素形成的DOM树节点上注册监听器，当指定元素的内容或属性的值发生变化时，监听器执行绑定关系，更新目标元素。在本发明提供的超文本标记语言文档元素的解析方法中，在不引用脚本的情况下实现了元素间的绑定。

在一可选实施例中，本发明实施例提供的超文本标记语言文档元素的解析方法所解析的超文本标记语言文档中，绑定属性的值为至少一个赋值表达式；所述赋值表达式包括左值和右值，所述左值用于指定所述目标元素中受所述指定元素影响的属性或内容；所述右值为表达式，包含所述指定元素的内容和/或属性，详细描述见上述实施例1。

如图6所示，上述步骤S210之后，步骤S220之前，该解析方法还包括：

步骤S250：对所述右值进行解析并编译，得到求值树，所述求值树为用于求值的函数调用树结构。在一具体实施例中，可以将databind属性定义的字符串值简单地看成一段脚本程序，用户代理可使用一个简易的脚本解释器，在指定元素的对应属性值和/或内容发生变化时，通过对databind属性的右值表达式进行求值来获得结果并赋值给目标元素的对应属性或者内容，例如，可以直接使用用户代理集成的ECMAScript脚本解释器执行绑定关系，或者使用内嵌式脚本解释器(例如LUA)执行绑定关系。但是为确保有更好的解析求值性能，本发明实施例提供的超文本标记语言文档元素的解析方法中，引入一个定制的右值表达式编译器，对databind属性的右值表达式进行解析并编译，生成求值树(evaluationtree)，当需要求值时，使用深度优先算法遍历求值树，代入指定元素的属性或内容值或字符串执行求值过程，并返回一个最终值。在一具体实施例中，当右值表达式为“UPPER(STRCAT((h3)[0].innerText,'；',(h3)[1].innerText))”时，可构造如图7所示的求值树。

在一可选实施例中，如图8所示，上述步骤S240具体包括：

步骤S241：遍历所述求值树，在一具体实施例中，由于本发明实施例针对右值表达式形成的求值树的结构中，右值表达式中的变量为叶子节点，第一层函数为叶子节点的父节点，第二层函数为第一层函数的父节点，因此为了按照右值表达式的运算逻辑对右值表达式进行求值，需要按照深度优先算法遍历求值树。

步骤S242：根据所述指定元素的内容和/或属性的值计算所述右值的值。

步骤S243：通过所述右值的值取代所述目标元素的目标元素中受所述指定元素影响的属性或内容。以上述步骤S250中举例构构造的求值树为例，构造求值树之后，只要按照深度优先算法遍历求值树确定每个节点的值即可求得表达式的值，在上面的求值树中，

节点(1)是一个叶子节点，其值取第1个h3元素的innerText内容值，即：Head 1；

节点(2)是一个叶子节点，其值为一个字面立即字符串，即：“；”；

节点(3)是一个叶子节点，其值取第2个h3元素的innerText内容值，即：Head 2；

节点(4)是一个函数节点，用其子节点的值作为参数调用STRCAT函数即可获得对应的值，即：Head 1；Head 2。

节点(5)是一个函数节点，用其子节点的值作为参数调用UPPER函数即可获得对应的值，即：HEAD 1；HEAD 2。

所以上述求值树的最终结果是HEAD 1；HEAD 2。

当被绑定元素(第1个h3元素以及第2个h3元素)的innerText内容值发生变化时，用户代理将在该求值树上重新执行上述求值过程，并将结果赋值给p元素的innerText内容值，而不需要再次解析并构造整个求值树，另外，求值过程几乎没有任何性能损失。

本发明实施例提供的超文本标记语言文档元素的解析方法，超文本标记语言文档中，绑定属性的值为赋值表达式，赋值表达式包括左值和右值，右值为包含指定元素的内容和/或属性的表达式，对超文本标记语言文档进行解析时，对右值进行解析并编译，形成求值树，右值表达式中的每个变量分别为一个叶子节点，每个函数分别为一个函数节点，对右值表达式进行求值时，遍历求值树即可得到右值表达式的值，即使右值表达式中的变量或函数发生了变化，只需将求值树中发生改变的因素相对应的节点进行替换，然后重新遍历求值树即可，无需再次解析并构造求值树，求值过程几乎没有任何性能损失，求值过程更高效。

在一可选实施例中，如图9所示，本发明实施例提供的超文本标记语言文档元素的解析方法还包括：

步骤S260：判断所述目标元素的绑定属性是否发生变化，若所述目标元素的绑定属性发生变化，返回步骤S250。例如，若绑定元素定义的绑定关系中，左值由目标元素A的a属性变为目标元素A的b属性，则判定为绑定属性发生变化，需要重新构造求值树；或，若绑定元素定义的绑定关系中，右值表达式的因素由指定元素C的a属性变为指定元素C的b属性，也判定为绑定属性发生变化，需要重新构造求值树。需要说明的是，绑定属性发生变化与绑定关系的右值表达式中指定元素的属性值或内容发生变化是不同的，前者需要重新构造求值树，后者只需将求值树中相关节点的值进行替换，然后重新遍历该求值树即可。

在一可选实施例中，如图10所示，本发明提供的超文本标记语言文档元素的解析方法还包括：

步骤S270：判断所述指定元素是否被删除，若所述指定元素被删除，执行步骤S280。

步骤S280：销毁所述求值树，当指定元素被删除后，与指定元素相关的绑定关系相应地无效，因此需要销毁与该指定元素相关的求值树。

实施例3

本发明实施例提供一种计算机设备，如图11所示，该计算机设备主要包括一个或多个处理器31以及存储器32，图11中以一个处理器31为例。

该计算机设备还可以包括：输入装置33和输出装置34。

处理器31、存储器32、输入装置33和输出装置34可以通过总线或者其他方式连接，图11中以通过总线连接为例。

处理器31可以为中央处理器(Central Processing Unit，CPU)。处理器31还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。存储器32可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储超文本标记语言文档元素的绑定方法，或，超文本标记语言文档元素的解析方法的使用所创建的数据等。此外，存储器32可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器32可选包括相对于处理器31远程设置的存储器。输入装置33可接收用户输入的计算请求(或其他数字或字符信息)。输出装置34可包括显示屏等显示设备，用以输出计算结果。

实施例4

本发明实施例提供一种计算机可读存储介质，该计算机可读存储介质存储计算机指令，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的超文本标记语言文档元素的绑定方法，或，超文本标记语言文档元素的解析方法。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard DiskDrive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；存储介质还可以包括上述种类的存储器的组合。

显然，上述实施例仅仅是为清楚地说明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引伸出的显而易见的变化或变动仍处于本发明创造的保护范围之中。

Claims (10)

1.一种超文本标记语言文档元素的绑定方法，其特征在于，包括：

根据目标元素的绑定属性定义所述目标元素和指定元素的绑定关系；

根据所述目标元素、绑定属性、所述指定元素及绑定关系构成超文本标记语言文档。

2.根据权利要求1所述的超文本标记语言文档元素的绑定方法，其特征在于，

所述绑定属性的值为至少一个赋值表达值。

3.根据权利要求2所述的超文本标记语言文档元素的绑定方法，其特征在于，

所述赋值表达式包括左值及右值；

所述左值用于指定所述目标元素中受所述指定元素影响的属性或内容；

所述右值为表达式，包含所述指定元素的内容和/或属性。

4.一种超文本标记语言文档元素的解析方法，其特征在于，

超文本标记语言文档包括：目标元素、所述目标元素的绑定属性、指定元素、以及根据所述绑定属性定义的所述目标元素与所述指定元素的绑定关系；

所述超文本标记语言文档元素的解析方法包括：

对所述超文本标记语言文档进行解析，得到DOM树，所述超文本标记语言文档中各元素分别形成一个DOM树节点；

在所述指定元素形成的DOM树节点上注册监听器；

通过所述监听器判断所述指定元素的内容或属性的值是否发生变化；

若所述指定元素的内容或属性的值发生变化，通过所述监听器执行所述绑定关系，更新所述目标元素。

5.根据权利要求4所述的超文本标记语言文档元素的解析方法，其特征在于，

所述绑定属性的值为至少一个赋值表达式；

所述赋值表达式包括左值和右值，所述左值用于指定所述目标元素中受所述指定元素影响的属性或内容；所述右值为表达式，包含所述指定元素的内容和/或属性；

在所述对所述超文本标记语言文档进行解析的步骤之后，所述在所述指定元素形成的DOM树节点上注册监听器的步骤之前，还包括：

对所述右值进行解析并编译，得到求值树，所述求值树为用于求值的函数调用树结构。

6.根据权利要求5所述的超文本标记语言文档元素的解析方法，其特征在于，

所述通过所述监听器执行所述绑定关系，更新所述目标元素的步骤，包括：

遍历所述求值树；

根据所述指定元素的内容和/或属性的值计算所述右值的值；

通过所述右值的值取代所述目标元素的目标元素中受所述指定元素影响的属性或内容。

7.根据权利要求5所述的超文本标记语言文档元素的解析方法，其特征在于，还包括：

判断所述目标元素的绑定属性是否发生变化；

若所述目标元素的绑定属性发生变化，返回所述对所述右值进行解析并编译，得到求值树的步骤。

8.根据权利要求5所述的超文本标记语言文档元素的解析方法，其特征在于，还包括：

判断所述指定元素是否被删除；

若所述指定元素被删除，销毁所述求值树。

9.一种计算机设备，其特征在于，包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，从而执行如权利要求1-3中任一项所述的超文本标记语言文档元素的绑定方法，或，权利要求4-8任一项所述的超文本标记语言文档元素的解析方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如权利要求1-3中任一项所述的超文本标记语言文档元素的绑定方法，或，权利要求4-8任一项所述的超文本标记语言文档元素的解析方法。

Images