1

首先,我已经对此进行了广泛的研究,使用了我认为可以应用的不同名称,例如“Javascript 差异模板”、“Javascript 更新 DOM 而无需重新解析”、“Javascript 使用 deltas 渲染 UI”和其他变体。如果我错过了涵盖我的问题的现有线程,请原谅我。

本质上,我首先想知道浏览器中的大多数 DOM 解析器是否已经执行以下操作,即使我很确定答案是否定的:它们是否以差异方式更新 DOM(即只有从最后一次更新)何时修改节点?就像我说的,我认为答案是否定的,他们实际上重新解析并重新渲染更新的节点及其树中的所有内容。

这让我想到了我的问题:是否有任何 Javascript 库可以管理对数据模型和 DOM 的差异更新?

我意识到我可能不太清楚这一点,所以我将提供一些代码来解释我的意思:http: //jsfiddle.net/btZ3e/6/

在该示例中,我有一个“事件队列”(实际上是一个时间线),其中包含事件。UserEvents 都有一个唯一的 ID。它现在的工作方式是 UserEvents 可以执行()和撤消(),在前者他们修改内存中的数据(myAppManager.dataModel)并在 DOM 中附加一个 <p>,而在后者他们撤消这些更改。(每个 UserEvent 的 undo() 都在同一个 UserEvent 的 execute() 中定义,以提供更大的灵活性,可以考虑独立移动事件)

然后,有 myAppManager.render() :

 var myAppManager = new function () {
     this.dataModel = {
         someValue: 0,
         disableButton: false
     };

     this.render = function () {
         $('#displaysomevalue').text(this.dataModel.someValue);
         $('#go').prop('disabled', this.dataModel.disableButton)
     }
 }

myAppManager.render() 怎么可能(真的吗?)只更新自上次更新以来发生的变化?我认为这意味着我的数据模型中也必须有某种差异化系统。最终我想知道这一点,因为我将通过 websockets 每秒接收多个新的 UserEvents(假设最坏的情况是每秒 20-30 个?),我想知道我是否需要为每一个新的部分重新渲染我的整个 UI我得到的数据。我调查了 Javascript 模板,看看他们是如何做到的,似乎他们都走这条路:

document.getElementById('someTemplateContainer').innerHTML = someTemplateEngine.getHtmlOutput();

但是我怀疑在某些情况下他们需要像我需要的那样经常刷新。有这方面的前期工作吗?我错过了什么吗?非常感谢!

4

1 回答 1

1

例如,Backbone.js 这样做的方式是模型(基本上是名称:值对)由视图/模板支持,并且模型具有与它们相关联的事件,例如change. 假设您有一个<ul>其中每个<li>都是一个 Backbone 视图,由模型支持。

您可以绑定每个模型的change事件以重新渲染它自己的视图(并且只渲染它自己的视图)。因此,当 5th<li>更改名称时,它将仅重新渲染 that 的内容<li>,而其余的<ul>则不受干扰。

这使得只有新的或更新的模型才能触摸和更新它们的 DOM 节点。

不同之处在于您不需要知道“整体的哪些部分发生了<ul>变化,只需渲染那些部分”,因为您实际上已经将问题分解为一系列较小的问题,每个较小的部分负责自己的渲染和更新逻辑。(我相信其他框架也有类似的模式,毫无疑问,你也可以在 vanilla JS 中做到这一点)

于 2013-06-25T19:41:32.783 回答