文档对象模型中节点的处理方法及装置、电子和存储设备与流程

文档序号:15636019发布日期:2018-10-12 21:29阅读:293来源:国知局

本申请涉及计算机应用领域,具体涉及一种文档对象模型中节点的处理方法以及装置,电子设备和存储设备。



背景技术:

在浏览器加载一个html页面时,浏览器会解析html,并创建针对当前页面的一个内部文档对象模型(dom),该文档对象模型中包含html标记的所有元素。通过编程语言与所述文档对象模型的交互,实现html网页的动态变化。

现有用户交互式网页通常采用react.js语言构建页面。react是一个用于构建用户界面的javascript库,其主要用于构建ui用户交互界面。用户交互界面的修改可以通过react.js将相关数据映射到网页上进行显示。

由于react.js以其出众的渲染性能、以及通过对dom的模拟,最大限度地减少与dom的交互等特点,成为一种非常流行的前端框架。而react.js性能出众的主要原因是其实现了一套虚拟节点差分算法(virtualdomdiff),下面简称差分算法,其基本原理是,使用js(javascript)模拟dom树,每当页面(可以称为交互界面)更新时,根据组件的render方法计算出新的虚拟dom树,并与此前的虚拟dom树作diff,得到一个patch(差异补丁),最后映射到真实dom树上完成页面更新。

然而,在采用react.js的差分算法对用户界面进行更新的过程中,须人工定义组件key值,通过key值判断两个节点状态是否一致。但是,当两个节点被赋予相同的key值,则将会被认为是同一个节点,后续相同key值的节点不会被创建,换言之,相同的key值的节点如果第一个节点被渲染之后,后续的另一个节点则会被丢弃,或者react会为避免渲染错误,直接中断渲染并发出警告,导致用户交互界面显示出现错误。

因此,如何避免因文档对象模型中节点key值相同而导致网页渲染失败,是需要解决的技术问题。



技术实现要素:

本申请提供一种文档对象模型中节点的处理方法,以解决现有技术中由于文档对象模型中节点信息重复而导致网页渲染失败的问题。

本申请提供一种文档对象模型中节点的处理方法,包括:

确定文档对象模型中的节点;

为所述节点生成第一标识信息;

在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

优选的,所述确定文档对象模型中的节点包括:

根据所述文档对象模型创建不同状态的虚拟文档对象模型;

分别确定不同状态下的所述虚拟文档对象模型中的虚拟节点。

优选的,所述为所述节点生成第一标识信息包括:

在所述文档对象模型处于编译且非运行的状态下,获取所述节点的数据信息中的静态属性信息;

根据所述静态属性信息为所述节点生成编译id,作为所述节点的所述第一标识信息;或,

在所述文档对象模型处于编译后且运行的状态下,获取所述节点的数据信息中的静态属性信息;

根据所述静态属性信息为所述节点生成静态id,作为所述节点的所述第一标识信息。

优选的,所述第一标识信息包括:标识位数据信息。

优选的,所述第一标识信息包括:分隔符信息。

优选的,所述第一标识信息的所述标识位数据信息,在完成对所述节点的编译后,进行加1处理,即:

f’=f+1

其中f’为编译后的所述标识位信息,f为编译前的所述标识位信息,f为大于等于零的整数。

优选的,所述根据所述第一标识信息以及所述节点的数据信息,生成所述节点的唯一第二标识信息包括:

获取所述节点的数据信息中的动态内容;

根据所述第一标识信息和所述动态内容生成所述节点的唯一第二标识信息。

优选的,所述根据所述第一标识信息和所述动态内容生成所述节点的唯一第二标识信息包括:

计算所述动态内容的哈希值;

根据所述第一标识信息和所述动态内容的哈希值生成所述节点的唯一第二标识信息。

优选的,当所述节点的动态内容为多个时,所述唯一第二标识信息包括:

所述第一标识信息和所述节点的多个动态内容的哈希值之和。

优选的,还包括:

根据所述唯一标识信息,对所述节点进行dom操作。

优选的,所述根据所述唯一标识信息,对所述节点进行dom操作包括:

根据所述唯一标识信息,遍历并比较状态变化前后的所述虚拟文档对象模型中的所述虚拟节点;

根据比较结果获取发生状态变化的所述虚拟节点的数据信息,并将状态变化的所述虚拟节点的数据信息通过所述dom操作应用至所述文档对象模型中对应的所述节点上。

本申请还提供一种文档对象模型中节点的处理装置,包括:

节点确定单元,用于确定文档对象模型中的节点;

第一标识生成单元,用于为所述节点生成第一标识信息;

第二标识生成单元,用于在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

确定单元,将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

优选的,所述节点确定单元包括:

虚拟dom创建单元,用于根据所述文档对象模型创建不同状态的虚拟文档对象模型;

虚拟节点确定单元,用于分别确定不同状态下的所述虚拟文档对象模型中的虚拟节点。

优选的,所述第一标识生成单元包括:编译id生成单元或静态id生成单元;

所述编译id生成单元,用于在所述文档对象模型处于编译且非运行的状态下,获取所述节点的数据信息中的静态属性信息;并根据所述静态属性信息为所述节点生成编译id,作为所述节点的第一标识信息;

所述静态id生成单元,用于在所述文档对象模型处于编译后且运行的状态下,获取所述节点的数据信息中的静态属性信息;并根据所述静态属性信息为所述节点生成静态id,作为所述节点的第一标识信息。

优选的,所述第一标识生成单元中的所述第一标识信息包括:标识位数据信息。

优选的,所述第一标识生成单元中的所述第一标识信息包括:分隔符信息。

优选的,所述第一标识生成单元中的所述第一标识信息的标识位数据信息的计算方式具体为:

在完成对所述节点编译后,对所述标识位进行加1处理,即:

f’=f+1

其中f’为编译后的所述标识位信息,f为编译前的所述标识位信息,f为大于等于零的整数。

优选的,所述第二标识生成单元包括:

动态内容获取单元,用于获取所述节点的数据信息中的动态内容;

唯一生成单元,用于根据所述第一标识信息和所述动态内容生成所述节点的唯一第二标识信息。

优选的,所述唯一生成单元包括:

计算单元,用于计算所述动态内容的哈希值;

所述唯一生成单元具体用于根据所述第一标识信息和所述动态内容的哈希值生成所述节点的唯一第二标识信息。

优选的,所述第二标识生成单元中所述节点的动态内容为多个时,所述唯一第二标识信息包括:

所述第一标识信息和所述节点的多个动态内容的哈希值之和。

优选的,还包括:

操作单元,用于根据所述唯一标识信息,对所述节点进行dom操作。

优选的,所述操作单元包括:

遍历比较单元,用于根据所述唯一标识信息,遍历并比较状态变化前后的所述虚拟文档对象模型中的所述虚拟节点;

应用单元,用于根据比较结果获取发生状态变化的所述虚拟节点的数据信息,并将状态变化的所述虚拟节点的数据信息通过所述dom操作应用至所述文档对象模型中对应的所述节点上。

本申请还提供一种电子设备,包括:

处理器;

存储器,用于存储对网络平台产生的数据进行处理的程序,所述程序在被所述处理器读取执行时,执行如下操作:

确定文档对象模型中的节点;

为所述节点生成第一标识信息;

在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

本申请还提供一种存储设备,存储网络平台产生数据,以及对应所述网络平台产生数据进行处理的程序;

所述程序在被所述处理器读取执行时,执行如下操作:

确定文档对象模型中的节点;

为所述节点生成第一标识信息;

在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

与现有技术相比,本申请具有以下优点:

本申请提供的一种文档对象模型中节点的处理方法,通过对确定的文档对象模型中的节点生成唯一标识信息,进而使得在对变化前后的两个文档树进行节点比较时不会出现节点标识重复而实际节点内容不同,所导致的文档对象模型中节点数据信息出现错误的问题,继而避免后续ui界面渲染时出现错误。由于本申请提供的文档对象模型中节点的处理方法中,唯一标识信息生成过程较为简单,进而使得文档对象模型在对节点比较处理的效率更高,降低开发人员的劳动强度。

附图说明

图1是本申请提供的一种文档对象模型中节点的处理方法的流程图;

图2是本申请提供的一种文档对象模型中节点的处理方法第一实施例中对节点进行dom操作的流程图;

图3是本申请提供的一种文档对象模型中节点的处理装置的结构示意图;

图4是本申请提供的一种文档对象模型中节点的处理装置第一实施中对节点进行dom操作的结构示意图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本申请内涵的情况下做类似推广,因此本申请不受下面公开的具体实施的限制。

请参考图1所示,图1是本申请提供一种文档对象模型中节点的处理方法的流程图,包括:

步骤s101:确定文档对象模型中的节点。

所述步骤s101中的所述文档对象模型(documentobjectmodel,简称dom),是w3c组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或html文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为dom。

dom可以是内置于浏览器中的一个应用程序接口,可以将html页面中的元素转换为一个对象树,通过dom可以访问、修改、删除或创建所有html中的元素,包括文本和属性。

html的dom文档对象模型是独立于平台和编程语言,dom文档对象模型可以何编程语言诸如java、javascript和vbscript等使用,以下以编程语言javascript对dom文档对象模型访问和操作html作为实施例进行说明。

dom文档对象模型把页面映射成一个多层节点结构,html页面中的每一个组成部分或元素都对应dom的某种类型节点,根据w3c的htmldom标准,html文档中的所有内容都是节点:每个html中的元素是元素节点,html元素内的文本是文本节点,每个html属性是属性节点,注释是注释节点,标签节点等等。其中,所述标签节点主要是指一般拥有一对开闭合标签的元素整体,例如:下列代码中的<html>和</html>,<button>和</button>分别为一对标签节点;所述属性节点一般是指元素节点的属性,例如:下列代码中的buttoncolor="red"和buttoncolor="green",文本节点是指在dom中呈现文本的部分。

<html>

<buttoncolor="red">{value}</button>

<buttoncolor="green">{value}</button>

</html>

在本申请提供的本实施中主要是以属性节点进行说明。

所述步骤s101中确定所述dom文档对象模型中的节点可以通过顶层document节点获取,由于dom文档对象模型中节点的关系是以属性方式存在,所以可以通过节点之间的相对关系获取。获取所述节点可以采用如下方式:

document.getelementbyid():通过特定的id来确定获取节点,返回的是一个对象;

document.getelementbytagname():通过元素节点名确定获取相同元素节点名的集合,返回的是一个对象数组;

document.getelementbyname():通过name属性的值确定获取元素节点的集合,返回的是一个数组。

document.getelementsbyclassname('xxx'):这个跟上面一个类似,返回是数组。

以上确定节点的方式适用于javascript编程语言的环境下,当采用javascript编程语言中的react进行确定节点时,需要在render渲染函数中使用document.getelementbyid获取节点数据信息。

首先对所述react进行解释,react作为一个前端框架,是以组件为出发点将一个复杂的页面,划分成若干个不同功能的模块组件,每个组件是节点,模块组件内的元素也是节点;react是通过v-dom构成一个与真实dom对象的虚拟的dom,在对真实dom进行更新或修改等操作时,先将操作前的虚拟dom(旧dom)与操作后的虚拟dom(新dom)进行比较,找到存在变化的节点(差分算法diff),直接将修改节点对应到真实的dom中完成修改操作,进而无需对整个dom进行更新,仅更新dom发生变化的节点即可。在react中确定节点的方式例如如下代码:

<script>

reactdom.render(

<p>{this.dynamicvalue+1}</p>,

document.getelementbyid('example')

);

</script>

假设在运行`this.dynamicvalue=2`,则会获得一个节点`<p>3</p>`。

上述代码中,通过getelementbyid确定节点<p>3</p>,并把内容为example绘制到节点<p>3</p>。

在本实施中,对于节点的处理方法可以是基于react中实现,对于确定节点可以是在dom文档对象模型编辑状态下获得,也可以理解为,在浏览界面未被加载到浏览器显示之前进行确定,确定的节点是react中所形成虚拟dom的节点。

可以理解的是,确定所述节点也可以是在dom文档对象模型发布后进行,所述节点的确定方式并不限于上述document.getelementbyid或react.finddomnode等方式。

本实施中以react前端框架为实施例进行说明,所述确定文档对象模型中的节点包括:

根据所述文档对象模型创建不同状态的虚拟文档对象模型;

分别确定不同状态下的所述虚拟文档对象模型中的虚拟节点。

在react前端框架中,为网页界面(ui)或html文档对应的文档对象模型创建一个虚拟文档对象模型,也可以理解为,将所述文档对象模型进行缓存。根据所述文档对象模型的状态变化创建不同的虚拟文档对象模型,也就是说,文档对象模型根据ui的变化创建变化后的虚拟文档对象模型(可以称为新dom文档对象模型或新dom树),同时保存与当前变化前的虚拟文档对象模型(可以称为旧dom文档对象模型或旧dom树)。

在本实施中,可以通过javascript对象表示所述dom文档对象模型的结构和信息,在通过dom文档对象模型(可以称为dom树)构建真实的文档对象模型,即能够在页面上显示相关元素或组件信息内容的dom树,构建真正的文档对象模型可以通过render方法中的tagname实现。

基于创建的虚拟dom树,分别确定新旧虚拟文档对象模型中的节点。

需要说明的是,下述步骤中的描述均是基于react前端框架进行说明,但实际上,本申请提供的文档对象模型中节点处理的方法并限于react前端框架,换言之,所述节点的确定并非仅为所述虚拟文档对象模型中实现,即:确定虚拟节点;也可以直接获取网页界面(ui)或html文档所创建的真实文档对象模型中的节点,即:实际节点;创建的文档对象模型可以包括:状态变化前的文档对象模型和状态变化后的文档对象模型。

可以理解的是,对于网页界面(ui)或web界面或html文档对应文档对象模型包括:真实文档对象模型(真实dom树)和虚拟文档对象模型(虚拟dom树),且二者创建的先后顺序没有限制。

在本实施中,确定的节点以所述虚拟dom树中的虚拟节点进行说明。

步骤s102:为所述节点生成第一标识信息。

在所述步骤s102中所述节点可以为虚拟节点,即:在下述描述中,对节点的操作为对虚拟节点的操作。

所述步骤s102的具体实现过程可以有两种方式:

第一种方式是在dom发布前,即:文档对象模板为被加载到浏览器进行显示之前,获取所述节点数据信息中的静态属性信息,根据所述静态属性信息为所述节点生成编译id,即:compileid,将所述compileid作为第一标识信息。

第二种方式是在dom发布后,获取所述节点数据信息中的静态属性信息,根据所述静态属性信息为所述节点生成表征静态内容的静态id,即:staticid,将所述staticid为第一标识信息。

两种方式对于生成第一标识信息的过程一致,区别在于所述静态id是在终端上生成因此会导致生成的处理时间过长,因此,在本实施中,优先选用通过第一种方式生成编译id。

上述编译id或静态id可以是所述节点的唯一编译id或唯一静态id,是否为唯一,可以根据实际需要设定,在本实施中可以采用唯一性来生成所述第一标识信息(唯一编译id或唯一静态id)。

需要说明的是,所述第一标识信息可以是根据不同的虚拟文档对象模型生成,即:新虚拟文档对象模型中的节点生成唯一第一标识信息,对旧虚拟文档对象模型中的节点生成唯一第一标识信息,新虚拟文档对象模型中的节点与旧虚拟文档对象模型中的节点分别具有唯一的第一标识信息。可以理解的是,新旧虚拟文档对象模型中虚拟节点的唯一标识采用相同的生成方式,对于静态属性(例如:样式、颜色等)一致的两个节点,生成的唯一的第一标识信息也是相同的。

当然,可以理解的是,对网页界面(ui)或html文档所对应的文档对象模型(真实的文档对象模型)中的节点生成唯一第一标识信息也是可行的,真是的文档对象模型也可以根据不同状态生成不同状态下文档对象模型中节点的唯一标识,由于虚拟文档对象模型的创建是基于真实的文档对象模型所以对真实的文档对象模型中节点生成的唯一第一标识信息可以直接应用到虚拟文档对象模型中的节点上。

为保证每一个节点具有唯一的编译id,在本实施中,所述compileid可以对首个生成编译id的节点的标识位赋值为0或1,之后每生成一个节点编译id对所处理后的具有编译id的节点的标识位加1处理,可以采用如下第一标识信息的计算公式:

f’=f+1

其中,f’为编译后的所述标识位信息,f为编译前的所述标识位信息,f为大于等于零的整数。

为更好的标识编译id,所述第一标识信息还可以包括:分隔符信息,例如:#,所述第一标识信息生成方式为:第一标识的分隔符+第一标识信息的标识位数据即:compileid可以为#1,#2….#n;当第一标识信息包括分隔符时所述第一标识信息的公式可以是:f’=#f+1。为便于理解,提供一段应用代码进行说明,例如:有两个按钮节点,为所述按钮节点分别生成编译id的过程可以参考下述代码:

<html>

<buttoncolor="red">{value}</button>

<buttoncolor="green">{value}</button>

</html>

在具有上述两个节点的dom发布之前,将生成对应每一个节点的compileid,代码如下:

<html>

<buttoncolor="red"compileid="#1">{value}</button>

说明:红色按钮生成的编译id为#1;

<buttoncolor="green"compileid="#2">{value}</button>

说明:绿色按钮生成的编译id为#2;

</html>

需要说明的是,所述编译id表示节点的静态属性,包括:节点类型,如:p/button/image/div等,还可以包括:样式,如style/margin/color等等。

上述在生成编译id或生成静态id时,所述dom文档对象模型是处于不同的发布状态下进行,所述发布状态在本实施中主要指示dom文档对象模型被加载到浏览器上进行运行展示,即:发布状态对应于运行状态,非发布状态对应于非运行状态。

以上是对所确定的节点生成编译id或静态id的描述,由于编译id或静态id并不能表征所述节点的全部信息,因此,在对所述确定的节点生成第一标识信息后,还需执行步骤s102。

所述步骤s103:在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息。

所述步骤s103的具体实现过程可以是根据所述节点的第一标识信息和所述节点的动态内容生成所述节点的唯一第二标识信息,即:uniqueid。

所述唯一第二标识信息生成具体可以包括:

获取所述节点数据信息中的动态内容;

根据所述第一标识信息和所述动态内容生成所述节点的唯一第二标识信息。

所述节点中的动态数据内容可以例如网页上的评论数据内容。所述动态数据内容可以通过javascript、java、python或php等编程语言进行编写并为html的dom添加动态内容。

在本实施中,可以通过js表达式获取动态内容,例如采用如下代码获得节点动态内容:

<script>

reactdom.render(

<p>{this.dynamicvalue+1}</p>,

document.getelementbyid('example')

);

</script>

需要说明的是,在react语法里面,所有动态内容(即变量)都用符号{}标识;页面渲染时,会逐个解析{}里面的表达式获得动态内容的值。

为区别所述唯一第二标识信息的静态属性(第一标识信息)和动态内容,所述唯一第二标识信息还可以包括:分隔符,即第二标识分隔符,所述第二标识分隔符位于所述动态内容之前,也就是说,所述唯一第二标识信息(uniqueid)可以包括:第一标识信息、第二标识分隔符以及动态内容,例如:uniqueid=第一标识信息+分隔符+动态内容,进一步的可以是,uniqueid=第一标识分隔符+第一标识信息的标识位+第二标识分隔符+动态内容。

所述分隔符可以是#、空格、制表符、逗号或分号等等。所述唯一第二标识信息中的第二标识分隔符与第一标识信息中的第一标识分隔符可以采用相同形式的也可以采用不同形式的。

可以理解的是,当时所述节点具有多个动态内容时,所述唯一第二标识信息(uniqueid)还可以包括多个动态内容,具体如下:

唯一第二标识信息(uniqueid)=第一标识信息(第一标识分隔符+第一标识信息的标识位)+第二标识分隔符+所述节点的动态内容1+……+所述节点的动态内容n,其中,所述n为正整数,即:所述唯一第二标识信息包括:第一标识信息和所述节点的多个动态内容的哈希值之和。

为提高dom文档对象模型的处理速度,在本实施中,对所述动态内容采用哈希算法计算所述动态内容的哈希值,进而使得所述动态内容的长度可控制,同时还能够表征不同节点的不同动态内容。

在本实施中,所述哈希算法可以采用md5或sha1等,当然对动态内容进行哈希算法压缩并不限于上述哈希算法。所述唯一第二标识信息可以表示为:uniqueid=第一标识信息(第一标识分隔符+第一标识信息的标识位)+第二标识分隔符+所述节点的动态内容1哈希值+……+所述节点的动态内容n哈希值,其中,所述n为正整数。

在本实施中,对节点生成唯一第二标识信息可以如下代码所示:

<html>

<buttoncolor="red"uniqueid="#1#d41d8cd98f00b204e9800998ecf8427e">{value}</button>

<buttoncolor="green"uniqueid="#2#d41d8cd98f00b204e9800998ecf8427e">{value}</button>

</html>

步骤s104:将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

所述步骤s104的具体实现过程可以是将所述唯一第二标识信息作为所述节点的数据信息的一部分进行存储。

基于上述,在确定所述唯一标识信息后还可以包括:

步骤s105:根据所述唯一标识信息,对所述节点进行dom操作。

所述步骤s105中涉及的dom操作包括:

查找节点,例如:

document.getelementbyid('id属性值'),即:返回拥有指定id的第一个对象的引用;

document/element.getelementsbyclassname('class属性值'),即:返回拥有指定class的对象集合;

document.getelementsbyname('name属性值'),即:返回拥有指定名称的对象结合;

document/element.queryselector('css选择器'),即:仅返回第一个匹配的元素;

document/element.queryselectorall('css选择器'),即:返回所有匹配的元素;

document.documentelement,即:获取页面中的html标签;

document.body,即:获取页面中的body标签;

document.all[”],即:获取页面中的所有元素节点的对象集合型。

新建节点,例如:

document.createelement('元素名'),即:创建新的元素节点;

document.createattribute('属性名'),即:创建新的属性节点;

document.createtextnode('文本内容'),即:创建新的文本节点,所述创建新的文本节点还可以通过element.innerhtml='新增文本内容'实现;

document.createcomment('注释节点'),即:创建新的注释节点;

document.createdocumentfragment(),即:创建文档片段节点。

添加新节点,例如:

parent.appendchild(element/txt/comment/fragment),即:向父节点的最后一个子节点后追加新节点;

parent.insertbefore(newchild,existingchild),即:向父节点的某个特定子节点之前插入新节点;

element.setattributenode(attributename),即:给元素增加属性节点;

element.setattribute(attributename,attributevalue),即:给元素增加指定属性,并设定属性值。

删除节点,例如:

parentnode.removechild(existingchild),即:删除已有的子节点,返回值为删除节点;

element.removeattribute('属性名'),即:删除具有指定属性名称的属性,无返回值;

element.removeattributenode(attrnode),即:删除指定属性,返回值为删除的属性。

修改节点,例如:

parentnode.replacechild(newchild,existingchild),即:用新节点替换父节点中已有的子节点;

element.setattributenode(attributename),即:若原元素已有该节点,此操作能达到修改该属性值的目的;

element.setattribute(attributename,attributevalue),即:若原元素已有该节点,此操作能达到修改该属性值的目的。

在本实施中,对所述节点的dom操作主要是基于react前端框架,也就是说,需要比较两个虚拟dom树查找到差异,并将差异应用到最新状态变化下的真实的dom文档对象模型中。具体过程可以参考图2所示,图2是本申请提供的一种文档对象模型中节点的处理方法中对节点进行dom操作的实施例流程图,包括:

步骤s201:根据所述唯一标识信息,遍历并比较状态变化前后的所述虚拟文档对象模型中的所述虚拟节点。

所述步骤s201可以采用virtualdom的diff算法实现,所述diff算法在比较两个状态的虚拟dom树时,是对同一层级的节点进行遍历比较,即:将状态变化前的旧dom树与状态变化后的新dom树进行比较,例如可以用diff函数比较两颗虚拟dom树:

functiondiff(oldtree,newtree){

varindex=0//当前节点的唯一标识信息

varpatches={}//用来记录每个节点差异的对象

dfsdiff(oldtree,newtree,index,patches)

returnpatches

};

上述代码中,所述dfsdiff为深度优先搜索,逐个比较新旧虚拟dom树的差异部分。

在发现两颗虚拟dom树的差异后,执行下述步骤s302。

步骤s202:根据比较结果获取发生状态变化的所述虚拟节点的数据信息,并将变化的所述虚拟节点的数据信息通过所述dom操作应用至所述文档对象模型中对应的所述节点上,所述文档对象模型中对应的所述节点是与所述虚拟文档对象模型向对应的实际文档对象模型中的实际节点。

所述步骤s202中发生状态变化的所述节点的数据信息可以是删除节点、增加文本内容,修改节点等等dom操作。

由于在比较过程中每个节点有具有唯一标识信息,进而避免标识重复而导致页面渲染失败或出错的问题,并且所述唯一标识信息是在文档对象模型中自动生成,无需人为定义,进一步避免现有diff算法中key出现重复的情况,并且提高开发效率。

需要说明的是,本申请提供的文档对象模型中节点的处理方法适用于任何一种需要对节点进行处理的应用场景,而并非仅限于react前端框架下。

为更好的了解本申请提供的文档对象模型中节点的处理方法,采用所述步骤s103中的评述数据对应用场景进行概述,基于上述确定的唯一标识信息后,需要对网页上评论数据内容采用diff算法进行更新渲染时,例如:现有评论数据为100条或者100个评论段落,基于现有100个段落的评论增加了一个新的评论段落,即第101个段落,且能够确定101个段落的唯一标识信息,在需要对页面进行更新渲染时,由于100个评论段落相同,所以更新渲染时仅需要对101个段落增加一个节点即可,且该节点与之前的100个段落具有不同的标识信息,进而使得渲染更新不会存在错误,并且能够提高渲染更新的效率。

以上是对本申请提供一种文档对象模型中节点的处理方法实施例的说明,与前述为文档对象模型中节点的处理方法实施例相对应,本申请还公开一种文档对象模型中节点的处理装置,请参看图3,由于装置实施例基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

如图3所示,图3是本申请提供的一种文档对象模型中节点的处理装置的结构示意图。

本申请提供的一种文档对象模型中节点的处理装置包括:

节点确定单元301,用于确定文档对象模型中的节点。

所述节点确定单元301可以包括:

虚拟dom创建单元,用于根据所述文档对象模型创建不同状态的虚拟文档对象模型;

虚拟节点确定单元,用于分别确定不同状态下的所述虚拟文档对象模型中的节点,所述节点为虚拟节点。

第一标识生成单元302,用于为所述节点生成第一标识信息;

所述第一标识生成单元302包括:编译id生成单元或静态id生成单元;

所述编译id生成单元,用于在所述文档对象模型进行编译后且非发布的状态下,为所述节点生成编译期的唯一编译id,作为所述第一标识信息;

所述静态id生成单元,用于在所述文档对象模型进行编译后且运行的状态下,为所述节点生成表征静态内容的唯一静态id,作为所述第一标识信息。所述第一标识信息包括:标识位数据信息;所述第一标识信息还可以包括:分隔符信息,即第一标识分隔符,例如:#、空格、制表符、逗号或分号等等。

所述第一标识生成单元302中的所述第一标识信息的标识位数据信息的计算方式具体为:

在完成对所述节点编译后,所述标识位数据信息进行加1处理,即:

f’=f+1

其中,f’为编译后的所述标识位信息,f为编译前的所述标识位信息,f为大于等于零的整数。

第二标识生成单元303,用于在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息。

所述第二标识生成单元303可以包括:

动态内容获取单元,用于获取所述节点的数据信息中的动态内容;

唯一生成单元,用于根据所述第一标识信息和所述动态内容生成所述节点的唯一第二标识信息。

所述唯一生成单元可以包括:计算单元,用于计算所述动态内容的哈希值。

所述唯一生成单元具体用于根据所述第一标识信息和所述动态内容的哈希值生成所述节点的唯一第二标识信息。

当所述第二标识生成单元303中所述节点的动态内容为多个时,所述唯一第二标识信息包括:

所述第一标识信息和所述节点的动态内容1哈希值+……+所述节点的动态内容n的哈希值,其中,所述n为正整数,也就是,所述唯一第二标识信息生成方式是:第一标识分隔符+第一标识信息的标识位+所述节点的动态内容1哈希值+……+所述节点的动态内容n的哈希值,即:所述唯一第二标识信息为:所述第一标识信息和所述节点的多个动态内容的哈希值之和。

为使得所述唯一第二标识信息与第一标识信息之间能够区分,所述唯一第二标识信息中还可以包括分隔符,即:第二标识分隔符,所述第二标识分隔符可以与所述第一标识信息分隔符采用相同的形式内容,也可以采用不同的形式内容。

因此,所述唯一第二标识信息的生成方式还可以是:

唯一第二标识信息=第一标识分隔符+第一标识信息的标识位+第二标识分隔符+所述节点的动态内容1哈希值+……+所述节点的动态内容n的哈希值。

确定单元304,将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

所述确定单元304具体实现过程可以是将所述唯一第二标识信息作为所述节点的数据信息的一部分进行存储。

基于上述内容,在确定所述唯一标识信息后还可以包括:操作单元103所述操作单元305,用于根据所述唯一标识信息,对所述节点进行dom操作。所述操作单元305的具体操作过程可以参考图4所示,图4是本申请提供的一种文档对象模型中节点的处理装置第一实施中对节点进行dom操作的结构示意图。

所述操作单元305包括:

遍历比较单元401,用于根据所述唯一标识信息,遍历并比较状态变化前后的所述虚拟文档对象模型中的所述节点;

应用单元402,用于根据比较结果获取发生状态变化的所述节点的数据信息,并将状态变化的所述节点的数据信息通过所述dom操作应用至所述文档对象模型中对应的真实节点上。

以上是本申请提供的一种文档对象模型中节点的处理装置实施例的说明,基于上述本申请提供的一种文档对象模型中节点的处理方法和装置,本申请还提供一种电子设备,包括:

处理器;

存储器,用于存储对网络平台产生的数据进行处理的程序,所述程序在被所述处理器读取执行时,执行如下操作:

确定文档对象模型中的节点;

为所述节点生成第一标识信息;

在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

基于上述本申请还提供一种存储设备存储网络平台产生数据,以及对应所述网络平台产生数据进行处理的程序;

所述程序在被所述处理器读取执行时,执行如下操作:

确定文档对象模型中的节点;

为所述节点生成第一标识信息;

在所述文档对象模型加载运行状态下,根据所述第一标识信息和所述节点的数据信息,生成所述节点的唯一第二标识信息;

将所述唯一第二标识信息确定为所述节点在所述文档对象模型中的唯一标识信息。

本申请虽然以较佳实施例公开如上,但其并不是用来限定本申请,任何本领域技术人员在不脱离本申请的精神和范围内,都可以做出可能的变动和修改,因此本申请的保护范围应当以本申请权利要求所界定的范围为准。

在一个典型的配置中,计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(ram)和/或非易失性内存等形式,如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitorymedia),如调制的数据信号和载波。

2、本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1