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 回答