Question

首先，我已经对此进行了广泛的研究，我认为可以应用不同的名称，例如“Javascript差异模板”，“没有重新分析的Javascript更新DOM”，“使用增量的Javascript渲染UI”和其他变体。如果我错过了一个涵盖我问题的现有主题，请原谅我。

基本上，我首先想知道浏览器中的大多数DOM解析器是否已经执行以下操作，即使我非常确定答案是否定的：它们是否以差异方式更新DOM（即只有已更改的节点）当一个节点被修改时，自上次更新以来的同一棵树？就像我说的那样，我认为答案是否定的，他们实际上重新解析并重新渲染了更新的节点及其树中的所有内容。

这让我想到了一个问题：是否有任何Javascript库允许管理数据模型和DOM的差异更新？

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

在该示例中，我有一个“事件队列”（实际上是一个时间轴），其中包含事件。 UserEvents都具有唯一ID。它现在的工作方式是UserEvents可以执行（）和undo（），在前者中它们修改内存中的数据（myAppManager.dataModel）并追加＆lt; p＆gt;在DOM中，而后者则撤消这些更改。（每个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();

我怀疑他们需要在某些情况下经常刷新。以前的工作有没有？我错过了什么吗？非常感谢你！

Answer 1

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

您可以绑定每个模型的change事件，以重新呈现自己的视图（并且只能查看自己的视图）。因此，当第5个<li>更改其名称时，它将仅重新呈现<li>的内容，而<ul>的其余部分不会受到干扰。

只允许新模型或更新模型触及和更新其DOM节点。

不同之处在于你不需要知道'整个<ul>的哪些部分已经改变并只是渲染那些'，因为你实际上已经将问题分解为一系列较小的问题，每一个都是它们负责自己的渲染和更新逻辑。（我确信其他框架也有类似的模式，你可以毫无疑问地在vanilla JS中做到这一点）

DOM可以进行差异更新吗？

1 个答案: