首先,我已经对此进行了广泛的研究,使用了我认为可以应用的不同名称,例如“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();
但是我怀疑在某些情况下他们需要像我需要的那样经常刷新。有这方面的前期工作吗?我错过了什么吗?非常感谢!