存储信息 i 元素，一个好的做法？ [关闭]答案

【问题标题】：Store info i element, a good practice? [closed]存储信息 i 元素，一个好的做法？ [关闭]
【发布时间】：2014-06-14 10:13:34
【问题描述】：

假设我有一个电影列表，我使用 Javascript 和 Jquery 可以通过 html 控件更改电影的标题、评级和成本。这些变量的原始值将在页面加载时给出。截至目前，我将数据加载到这样的元素中：

    <div class="movie0" data-rating="320" data-name="Movie-Name No. 1" data-cost="26>
            <img src="movie1.png"/>
    </div>
    <div class="movie1" data-rating="110" data-name="Movie-Name No. 2" data-cost="18">
            <img src="movie2.png"/>
    </div>
    <div class="movie2" data-rating="315" data-name="Movie-Name No. 3" data-cost="25">
            <img src="movie3.png"/>
    </div>

html 控件使用 JQuery 的 .data() 函数更改数据。

现在回答问题。将信息加载到 JSON 对象中，然后使用 ID（或数据属性）与 JSON 对象中的索引相关联会更好吗？它们不会更改 Html 控件更改元素，而是更改与该元素对应的 JSON 对象中的索引。什么是更好的？如果我只关心评级变量，正确的方法会有所不同吗？

编辑：我问这个问题是因为我已经阅读并听说在 DOM 中存储和更改信息效率低下。

【问题讨论】：

在哪个方面更好？更适合什么？
我问这个问题是因为我已经阅读并听说在 DOM 中存储和更改信息效率低下。
但这在很大程度上取决于数据量和变化频率。
对于这样的 3 条数据，我会说数据属性还可以，任何更复杂的都可以，我可能只需要一个 data-movieid 并让服务器端将 JSON 转储到 JavaScript 中（使其成为对象/数组字面量）。

标签： javascript jquery json dom attributes

【解决方案1】：

这里没有“正确”的答案。

在 HTML 对象上使用元数据的优点是：

非开发人员只需修改 HTML 上的属性即可维护数据。
非开发人员只需更改 HTML 即可添加、删除或编辑项目。
单个电影项目在一个地方进行自我描述。您不必同时维护 HTML 和相应的代码。

使用预构建的 javascript 对象的优点是：

可能更快的性能（虽然尚不清楚此处的性能差异是否会显着）。
在 javascript 对象中从 javascript 代码修改数据可能更简单。

我不知道您究竟听说过“在 DOM 中存储和更改信息效率低下”的具体内容。这完全取决于您在做什么、您正在更改什么类型的数据以及性能在任何方面的重要性。以导致重新布局和重绘的方式修改 DOM 绝对是缓慢的。但是，从 DOM 中的 HTML 对象中读取一段元数据不会导致重新布局或重绘。

如果您有一个对性能极为敏感的紧密循环，那么您可能应该使用 javascript 对象中的数据，而不是 DOM 对象上的属性。但是，读取 DOM 属性的性能通常不是一个值得注意的问题，因此可读性和可维护性等问题通常更重要，并且会推动决策。

附：您没有正确使用 JSON 一词。我认为您要问的是“Javascript 对象”或“Javascript 文字”，这是您在 javascript 代码中静态声明 javascript 变量的方式。 JSON 是一种文本格式，用于以纯字符串格式指定或交换 javascript 数据。必须解析 JSON 才能将其转换为实际的 javascript 变量。

【讨论】：