javascript - 存储信息元素，一个好的做法吗？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 9 年前。

Improve this question

假设我有一个电影列表，我可以使用 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 中存储和更改信息效率很低。

Answer 1

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

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

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

使用预构建的 JavaScript 对象的优点是:

1. 性能可能会更快(尽管尚不清楚此处的性能差异是否明显)。
2. 在 JavaScript 对象中从 JavaScript 代码修改数据可能会更简单。

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

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

<小时/>

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