Question

我们说我们有一个系列：

var model = new Model([1,2,3,4,5])我们用一些javascript应用程序框架来渲染它，比如backbone，react，ember，angular，vue等等，所以最终结果如下：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

现在我们在开头添加一个项目：

model.unshift(0)

这会以某种方式自动重绘集合，所以它看起来像这样：

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

现在，我很好奇的部分是这些框架如何检测到它只是<div>0</div>的新内容并将其添加到集合视图中，而不是认为它与＆＃＃39;一个全新的集合（因为所有项目索引都已更改）并重新绘制整个内容？

我很好奇他们是否使用了一些常用的逻辑，以及什么是最佳实践＆＃34;如今。谢谢！

Answer 1

我不能代表所有框架，但我可以使用AngularJS和KnockoutJS提供一个示例。

AngularJS（1.x）使用称为脏检查的方法。虽然它们的实现有点复杂，但脏检查本身是一个非常简单的概念。

AngularJS有一个称为摘要周期的概念。在此摘要周期中，AngularJS在其应用程序模型上查看称为$scope的对象。它基本上看起来并且说：“好吧，这个对象改变了吗？确实如此。好吧，让我们更新视图。这个对象改变了吗？不，好吧，我会继续检查下一个对象”。

虽然这在大多数应用程序中运行良好，但您可以看到在我们向应用程序模型添加越来越多的对象时性能会受到什么影响。

另一种常见的方法是KnockoutJS之类的JavaScript框架只通过Observer pattern更新所需的内容。在KnockoutJS中，这是有效的，因为视图模型上的所有对象都被声明为observables。因此，当视图模型（主题）上的对象发生更改时，它会向其“观察者”发出事件通知，该观察者以更新视图的结果结束。

虽然这在大多数应用程序中也很有效，但在这种情况下性能也会受到影响。由于您基本上使用observable将每个对象包装在视图模型上，因此所有对象现在都有更多的开销。

回答你的主要问题，对于JavaScript框架如何选择这样做，确实没有“最佳实践”。与软件世界中的大多数事物一样，任何一种选择都需要权衡。

Javascript应用程序框架如何仅重绘已修改的元素？

1 个答案: