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对象中的索引相关联会更好吗？它们将改变与元素对应的JSON对象中的索引，而不是更改元素的Html控件。什么是更好的？如果我只关注评级变量，那么正确的方法是否会有所不同？

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

Answer 1

没有＆＃34;对＆＃34;回答这里。

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

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

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

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

我不知道你究竟听到了什么＆＃34;在DOM中存储和更改信息效率低下＆＃34;。这完全取决于您正在做什么以及您正在改变哪种类型的数据以及性能在多大程度上至关重要。以一种导致重新布局和重新绘制的方式修改DOM绝对是很慢的。但是，从DOM中的HTML对象读取一段元数据不会导致重新布局或重新绘制。

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

P.S。您没有恰当地使用JSON这个术语。我认为你所问的是一个＆＃34; Javascript对象＆＃34;或＆＃34; Javascript literal＆＃34;这是你在javascript代码中静态声明javascript变量的方式。 JSON是一种文本格式，用于以纯字符串格式指定或交换javascript数据。必须解析JSON以将其转换为实际的javascript变量。

存储信息我元素，一个好习惯？

1 个答案: