CN111913705B

CN111913705B - 一种基于差异更新算法的JavaScript模板实现方法

Info

Publication number: CN111913705B
Application number: CN202010468558.8A
Authority: CN
Inventors: 王一军; 刘倩倩; 张航; 刘彦; 彭思皓
Original assignee: Central South University
Current assignee: Central South University
Priority date: 2020-05-28
Filing date: 2020-05-28
Publication date: 2023-07-25
Anticipated expiration: 2040-05-28
Also published as: CN111913705A

Abstract

本发明公开了一种基于差异更新算法的JavaScript模板实现方法。当传入对应的JSON数据时，将当前输入参数与缓存中的输入参数进行比较，以决定是否使用缓存的HTML结构字符串；得到HTML结构字符串后，再通过HTML解析器，将这段HTML结构字符串解析成规定结构的Virtual DOM Tree；之后再判断这次渲染是否是首次渲染；如果是，则直接通过Virtual DOM Tree来创建实体节点，并且注入到浏览器中的HTML文档；如果之前已经被渲染过，则将新生成的Virtual DOM Tree与之前的Virtual DOM Tree进行深度对比，生成一个差异更新补丁列表，再将列表中的补丁逐个应用到HTML文档里。使用此模板引擎能有效的提高代码的可读性、可重用性与可扩展性，降低维护成本与开发成本，从而提高页面响应效率，实现良好的用户体验。

Description

一种基于差异更新算法的JavaScript模板实现方法

技术领域

本发明涉及一种前端开发技术，尤其涉及一种在视图分块的开发模式中，基于差异更新算法的JavaScript模板实现方法。

背景技术

现如今网站前端部分的规模不断扩大，越来越多的前端脚本代码增加到应用系统中，前端开发出现了代码规模大、代码重用性低、扩展性差、组织维护困难等问题。在前端开发中，前端的模板引擎在分离视图与MVC模式中是至关重要的，所以一个高效、功能齐全、使用便捷的模板引擎在前端发展技术中具有深远意义。

传统的模板引擎一般是在JavaScript中编写指定语法规则的HTML模板，通过模板引擎执行编译，然后将一段JSON数据注入到编译好的函数中执行，从而得到一段完整的HTML结构字符串，但是这种传统的模板引擎存在以下几点不足：

1.在传入相同数据时，编译函数永远是重新执行一次完整的渲染计算，而没有缓存渲染结果

2.在更新HTML时会执行覆盖式更新，已经绑定在指定DOM元素上的事件会随着新HTML结构的覆盖而被移除，且无法在模板中定义refs，从而不能直接在JavaScript代码中获取到渲染后的实体节点，执行效率低，用户体验不好。

传统的模板引擎仅仅适用于一些较为简单的场景，不能很好地应用于一些大型的项目，因此本文提出了一种带差异更新算法的JavaScript模板引擎，以解决上述传统模板引擎的不足。

发明内容

鉴于常规模板引擎存在的不足，本发明提供一种带差异更新算法的JavaScript模板引擎，使用此模板引擎能有效的提高代码的可读性、可重用性与可扩展性，降低维护成本与开发成本，从而提高页面响应效率，实现良好的用户体验。

为实现上述目的，本发明采用的技术方案是：

一种基于差异更新算法的JavaScript模板引擎实现方法，包括以下步骤：

步骤一，通过编译引擎对指定规则的HTML模板资源执行编译并输出一个模板函数；

步骤二，当向模板函数首次传入JSON数据作为输入参数时，将输入参数保存，并基于输入参数生成并输出一个完整的HTML结构字符串，同时保存HTML结构字符串；

步骤三，当从第二次向模板函数传入JSON数据作为输入参数起，首先保存当前输入参数，然后将当前输入参数与之前所有保存的输入参数进行比较，如果相等，则使用由保存的输入参数所生成的已保存的HTML结构字符串；否则使函数基于当前的输入参数生成并输出一个完整的HTML结构字符串且同时保存；

步骤四，得到HTML结构字符串后，再通过HTML解析器，将这段HTML结构字符串解析成规定结构的Virtual DOM Tree；

步骤五，判断这次渲染是否是首次渲染；如果是首次渲染，则直接通过新生成的Virtual DOM Tree来创建实体节点，并且注入到浏览器中的HTML文档；如果之前已经被渲染过，则将新生成的Virtual DOM Tree与之前的Virtual DOM Tree进行深度对比，生成一个差异更新补丁列表，再将列表中的补丁逐个应用到HTML文档里，返回步骤三循环执行直至完成所有渲染。

所述的一种基于差异更新算法的JavaScript模板实现方法，在所述通过编译引擎对指定规则的HTML模板资源执行编译并输出一个模板函数的步骤之前，还包括：

根据需要实现的功能来自行定义JavaScript模板引擎的语法规则，然后根据语法规则编写对应的HTML模板字符串作为HTML模板资源；

将HTML模板资源注入到模板引擎中。

所述的一种基于差异更新算法的JavaScript模板引擎实现方法，所述的步骤一中，所输出的模板函数，是使用JS中的eval方法动态解析字符串成为一个可执行的模板函数，以使在传入JSON数据时支持多参数输入。

所述的一种基于差异更新算法的JavaScript模板引擎实现方法，所述的步骤三中，在将当前输入参数与之前所有保存的输入参数进行比较时，是对两个作为输入参数的JSON数据进行对比，如果完全一致的话，则认为两个JSON数据相等，否则认为不等。

所述的一种基于差异更新算法的JavaScript模板引擎实现方法，在编写HTML模板资源时，给需要获取的实体节点所对应的虚拟节点标记refs属性，并在所述的步骤四中，当通过HTML解析器将HTML结构字符串解析成规定结构的Virtual DOM Tree时，如果解析到某个虚拟节点上有refs属性，则将该虚拟节点作标记，在创建实体节点时，同时创建一个DOM的映射与视图关系进行绑定。

所述的一种基于差异更新算法的JavaScript模板引擎实现方法，所述的步骤五中，判断这次渲染是否为首次渲染，是在模板函数上预设一个变量，当未渲染时，该变量为第一预设值，执行渲染后同时将该变量改为第二预设值，在每次渲染之前都检查该变量，即判断出是否为首次渲染。

所述的一种基于差异更新算法的JavaScript模板引擎实现方法，所述的步骤五中，所述将新生成的Virtual DOM Tree与之前的Virtual DOM Tree进行深度对比，是通过差异对比算法对Virtual DOM Tree结构的同级、同一位置的节点的类型、属性进行深度比较，得到具体差异后，列出差异更新补丁列表，并根据列表执行差异更新，达到HTML视图结构局部更新的目的。

一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如前任一所述的方法。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如前任一所述的方法。

采用上述方案后，本发明通过对VirtualDOM tree结构执行差异更新，在计算出差异的情况下，只更新局部的DOM节点，减少了繁琐的DOM操作，从而大幅度地节省了浏览器的内存空间，最大程度上降低了浏览器重绘、回流的风险，不会造成浏览器视图的“抖动”或“闪屏”。对于开发人员来说，使用此模板引擎有效的提高了代码的可读性、可重用性与可扩展性，降低了维护成本与开发成本。对于用户来说，这种方式提高了页面响应效率，实现了良好的用户体验。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例中所需使用的附图作简单的介绍，在附图中：

图1为本发明所述的带差异更新算法的JavaScript模板引擎执行流程图。

图2为本发明中HTML结构字符串通过HTML解析器解析后所生成的VDOM的树形结构图。

具体实施方式

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

如图1所示，本实施例提出的带差异更新算法的JavaScript模板引擎实现方法，包括以下步骤：

步骤S110，通过编译引擎对指定规则的HTML模板资源执行编译并输出一个模板函数。

具体的，本发明提供的模板引擎通过正则表达式将HTML模板资源中约定的模板表达式，解析成对应的JavaScript代码，生成一个支持多参数执行的模板函数。这里所输出的模板函数，是使用JS中的eval方法动态解析字符串成为一个可执行的模板函数，以使在传入JSON数据时支持多参数输入。在实际的代码运用中，支持多参数输入有利于代码的解耦和提高编写模板资源代码的可读性，更有效的减小代码的体积；不支持多参数输入的模板引擎，如模板函数function(data){…},通常会把数据都集中到一个变量data中，获取所需要的数据时需要访问data的属性，渲染时取数写法为data.abc,data.cba，甚至在处理循环逻辑时也需要带上data的前缀，多参数则可以定义更清晰的变量名称，例如支持多参数的函数模板function(abc,cba){…},模板中取数写法是直接访问abc,cba等参数既可，使得模板代码易读，且体积更小，编译效率更高，提高代码的执行速度。

在步骤S110通过编译引擎对指定规则的HTML模板资源执行编译并输出一个模板函数的步骤之前，还包括：

步骤S202，根据需要实现的功能来自行定义JavaScript模板引擎的语法规则，然后根据语法规则编写对应的HTML模板字符串作为HTML模板资源。即预先定义模板的语法规则，包括表达式解析语法、变量输出解析语法、转义输出解析语法以及内置语法表达式，基于这些规则，编写对应的HTML模板字符串。

在编写HTML模板资源时，同时给需要获取的实体节点所对应的虚拟节点标记refs属性，并在步骤130中，当通过HTML解析器将HTML结构字符串解析成规定结构的VirtualDOM Tree时，如果解析到某个虚拟节点上有refs属性，则将该虚拟节点作标记，在创建实体节点时，同时创建一个DOM的映射与视图关系进行绑定。即在编写HTML模板资源时，给需要获取的节点标记一个refs＝“xxx”的属性，例如<div refs＝“xxx”>abc</div>，在解析这段模板字符串转化为Virtual DOM Tree时，亦会解析标签上的refs＝“xxx”属性，将它写入树节点的refs属性中。通过Virtual DOM Tree来创建实体的DOM节点时，如果发现该节点具有属性refs＝“xxx”，则在创建实体DOM节点的同时，将“xxx＝该节点”写入到视图实例的属性中，那么视图在渲染完成后，就可以通过xxx来直接读取到该实体节点，而无需重新在浏览器的DOM树中进行搜索查找。

步骤S204，将HTML模板资源注入到模板引擎中。

步骤S120，当传入对应的JSON数据时，编译好的函数会生成、输出一个完整的HTML结构字符串并缓存。在这个过程中，如果之前已经有缓存过的作为输入参数的JSON数据，则将当前输入参数与缓存中的输入参数进行比较，以决定是否使用缓存的HTML结构字符串。即对两个作为输入参数的JSON数据进行对比，如果完全一致的话，则认为两个JSON数据相等，否则认为不等。如果相等，则使用由保存的输入参数所生成的已缓存的HTML结构字符串；否则使函数基于当前的输入参数生成并输出一个完整的HTML结构字符串且同时缓存。

具体的，将模板函数用memorize技术包装一次，即能实现缓存HTML结构字符串的目的。只要函数在当前参数下执行过一次，执行结果就会被缓存到函数内部，下次传入参数时，将传入参数与之前缓存过的执行参数进行比较，一旦发现相同，就直接调用之前已经缓存的执行结果，而不用再一次执行函数计算，这样的函数执行效率极高。

步骤S130，得到HTML结构字符串后，再通过HTML解析器，将这段HTML结构字符串解析成规定结构的Virtual DOM Tree。

具体的，通过正则表达式全局解析HTML字符串，对其进行深度递归形式的扫描，每次扫描到HTML结构字符串时都会将它转化成一个JavaScript对象，对其匹配的子元素同样进行转化，最终形成一个如图2所示的用于描述HTML字符串的完整的树形对象。

步骤S140，之后再判断这次渲染是否是首次渲染。即通过预先在模板函数上预设一个变量，当未渲染时，该变量为第一预设值，执行渲染后同时将该变量改为第二预设值，在每次渲染之前都检查该变量，即判断出是否为首次渲染。

步骤S150，如果是，则直接通过Virtual DOM Tree来创建实体节点，并且注入到浏览器中的HTML文档。

步骤S160，如果之前已经被渲染过，则将新生成的Virtual DOM Tree与之前的Virtual DOM Tree进行深度对比，生成一个差异更新补丁列表，再将列表中的补丁逐个应用到HTML文档里。

具体的，如果不是首次渲染，则应用差异对比算法，对Virtual DOM Tree结构的同级、同一位置的节点的类型、属性进行深度比较，递归正序对比结束后，将所有的补丁收集起来，根据DOM树状结构的特性，通过动态规划算法进一步对差异对比算法进行优化，得到更新补丁列表，并将补丁列表按照顺序执行更新。

其中差异对比算法即通过比较两个节点的差异并生成对应的差异更新补丁。对两棵树进行比较时，从树的根节点一直到各个末端的子节点，得到的差异更新补丁自动排成列表。对两个VDOM树状结构，对比它们同级、同一位置的节点的类型、属性，得到两个节点的属性和类型的异同与差集。得到差异更新补丁的数据结构与具体所使用的VDOM树比较算法有关，一般情况下，两棵VirtualDOMTree进行递归比较可以得到如下几种补丁类型，用于对当前文档中的HTML实体结构进行逐步更新：

-新增节点(同一位置旧树不包含的节点，新树存在)；

-删除节点(同一位置旧树存在节点，新树不存在)；

-修改节点(属性)(同一位置旧树与新树节点类型一致，但属性不相同，修改其属性)

-节点内文本更新(同一位置新树节点内的纯文本与旧树不同)；

-替换节点为另一种节点(同一位置新树节点类型与旧树节点类型完全不同)。

根据本发明的实施例，本发明还提供了一种电子设备和一种计算机可读介质。

其中电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现前述的方法。

具体使用中，用户能够通过作为终端设备的电子设备并基于网络来与同样作为电子设备的服务器进行交互，实现接收或发送消息等功能。终端设备一般是设有显示装置、基于人机界面来使用的各种电子设备，包括但不限于智能手机、平板电脑、笔记本电脑和台式电脑等。其中终端设备上根据需要可安装各种具体的应用软件，包括但不限于编程软件、网页浏览器软件、即时通信软件、社交平台软件、购物软件等。

服务器是用于提供各种服务的网络服务端，如对收到的从终端设备传输过来的JSON数据提供相应计算及渲染服务的后台服务器等。

本实施例所提供的JavaScript模板引擎实现方法可由服务器执行，在实际运用中，在满足必要条件下，终端设备亦可直接执行JavaScript模板引擎实现方法。

类似的，本发明的计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例的一种基于差异更新算法的JavaScript模板引擎实现方法。

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

Claims

1.一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，包括以下步骤：

步骤五，判断这次渲染是否是首次渲染；如果是首次渲染，则直接通过新生成的Virtual DOM Tree来创建实体节点，并且注入到浏览器中的HTML文档；如果之前已经被渲染过，则将新生成的Virtual DOM Tree与之前的Virtual DOM Tree进行深度对比，生成一个差异更新补丁列表，再将列表中的补丁逐个应用到HTML文档里，返回步骤三循环执行直至完成所有渲染；

所述的步骤五中，判断这次渲染是否为首次渲染，是在模板函数上预设一个变量，当未渲染时，该变量为第一预设值，执行渲染后同时将该变量改为第二预设值，在每次渲染之前都检查该变量，即判断出是否为首次渲染。

2.根据权利要求1所述的一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，在所述通过编译引擎对指定规则的HTML模板资源执行编译并输出一个模板函数的步骤之前，还包括：

将HTML模板资源注入到模板引擎中。

3.根据权利要求1所述的一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，所述的步骤一中，所输出的模板函数，是使用JS中的eval方法动态解析字符串成为一个可执行的模板函数，以使在传入JSON数据时支持多参数输入。

4.根据权利要求1所述的一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，所述的步骤三中，在将当前输入参数与之前所有保存的输入参数进行比较时，是对两个作为输入参数的JSON数据进行对比，如果完全一致的话，则认为两个JSON数据相等，否则认为不等。

5.根据权利要求2所述的一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，在编写HTML模板资源时，给需要获取的实体节点所对应的虚拟节点标记refs属性，并在所述的步骤四中，当通过HTML解析器将HTML结构字符串解析成规定结构的VirtualDOM Tree时，如果解析到某个虚拟节点上有refs属性，则将该虚拟节点作标记，在创建实体节点时，同时创建一个DOM的映射与视图关系进行绑定。

6.根据权利要求1所述的一种基于差异更新算法的JavaScript模板引擎实现方法，其特征在于，所述的步骤五中，所述将新生成的Virtual DOM Tree与之前的Virtual DOMTree进行深度对比，是通过差异对比算法对Virtual DOM Tree结构的同级、同一位置的节点的类型、属性进行深度比较，得到具体差异后，列出差异更新补丁列表，并根据列表执行差异更新，达到HTML视图结构局部更新的目的。

7.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

8.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-6中任一所述的方法。