Question

我有一个数据数组，作为JSON响应返回。数据将定期更新，并且也会经常访问。

数据包含显示的每首歌曲的评论/回复列表，当用户将鼠标悬停在特定元素上时会被访问，然后特定的评论/回复会呈现给模板。

歌曲列表也是动态可过滤的，因此阵列将不断更新。

鉴于此数据的频繁访问和更新，以下哪项将被视为最佳实践： -

一个。将整个数组存储在一个全局变量中，并不断地操作它/访问它。

或

B中。使用jQuery的$ .data方法将数组存储在DOM中，并以这种方式访问它。

哪个最好，为什么......如果选项A请记住，变量需要在整个用户会话中保存在内存中。还有什么我需要注意的潜在内存泄漏等？

编辑：只是为了提供更多信息：平均而言，我希望在任何给定时间数据都在2-5kb之间。

Answer 1

A）将是我的首选，因为你应该尽量避免不断扩大dom。

Direct DOM manipulation is rather slow，所以尽量避免使用它。

Answer 2

我将不得不在这里说选项B 。虽然操作纯数组的性能优势听起来很有吸引力，但听起来，使用数据类需要将数据与它们所适用的各个DOM元素相关联。

使用$.data，您将数据附加到它们所属的元素。想象一下hover事件的工作流程：

// with option A
$('.song').mouseover(function (e) {
    // read the relevant index value of the data from this element
    // (probably through some attribute?)

    // get the data from the global array

    // show that data on hover
});

// with option B
$('.song').mouseover(function (e) {
    // show the $(this).data() on hover
});

它当然更清晰，我无法想象你是如何使你的DOM元素在全局数组中记住它们的相关数据，除了通过属性将它插入DOM元素本身，或者在某处有一个对象引用。

其次，全球物体是邪恶的。对于一些重要的，容易引发争论和辩论的火炬程度。

第三，听起来你的歌曲元素正在对DOM本身进行排序和过滤。如果您通过$.data附加数据，那么这些数据会与DOM元素一起进行排序和过滤，而无需任何其他跟踪。歌曲元素必须从DOM中删除？只需在其上调用.remove() - 关联也会被删除。免费功能！

最后，$.data也进行了优化，以防止循环引用和内存泄漏（如果我误解了那个，请纠正我。）

此外，2-5kb的数据听起来不是很多。

只是我的两分钱。

Answer 3

IMO取决于你的JS / JQ代码。如果它是组件化的，那么使用.data将每个组件的数据保持在本地是更清晰的。如果不是，它可能无关紧要，但将其保存在一个位置可能会使事情变得更容易。我没有使用很多.data个附件来解决具体问题，但我可能很幸运。

您是否确定始终将数据保留在页面上是绝对必要的？与添加/删除大块相比，页面存储的任意，无限增加会让我有点紧张，评论树可以将其转入。

哪种方法被认为是最佳做法？

3 个答案: