javascript - 我还应该将我的数据保存在 Javascript 数据结构中吗？或者只是在 DOM 中？

Question

我对 Javascript 和 Jquery 非常陌生，所以我对这个初学者的问题表示歉意。

在一个简单的ajax Web应用程序中，我正在创建一个HTML页面，它主要是一个大表。该表中的每一行描述一个事件(聚会、表演等)。我的页面不仅显示此信息，而且旨在让用户用它做很多事情，特别是根据各种条件动态搜索和过滤表。

首先是一个抽象的初学者问题:在这种广泛的情况下(我的意思是你希望你的 javascript 代码对从网络服务器检索的信息运行一系列操作)你会使用 DOM 作为数据结构吗？人们可以轻松地搜索和操作它(使用 Jquery)，这使得这种可能性成为可能。 (例如，“找到描述事件的表行，其中日期列 = 2010-01-01，事件类型列 = '私有(private)聚会'。)或者您会在传统的 Javascript 数据结构中保留相同的信息，搜索/过滤/操作使用纯 JavaScript 代码，然后相应地更新 DOM 以向用户显示结果？

(作为新手，我认为第一种纯 DOM 方法会比较慢，而后者会占用大量内存。对吗？错了？)

假设第二种策略是合理的(是吗？)，那么一个实际的问题是:我可以简单地在我的 Javascript 对象中存储一个指向相应 Jquery 对象的指针吗？例如，我可以做吗

var events = new Array();
// ....
var event3094 = new Event('party','2010-01-01' /*, ... */);
event3094.domElement = $("#correctIdOfTheEventRowInMyTable");

events.push(event3094)

这是否仅存储对每个 Event 对象中的 Jquery 对象的引用(指针？)，还是创建 Jquery 对象的新副本？

我只是想知道“专业人士”是如何做到的。 :)

感谢您的建议和见解。

干杯

拉拉

Answer 1

有很多方法可以做到这一点，但 DOM 操作几乎总是比 JS 操作慢。

为了回答您的问题，每当您使用 $(selector) 时，都会创建一个新的 jQuery 对象，并执行查找元素的匹配。

我推荐两种方法:

第一个选项

1. 在普通 HTML 表格中加载数据
2. 读取各行，然后仅将数据(每个单元格的内容)存储在类似于代码示例的数组中。
3. 在该对象中存储对 tr 的引用。
4. 然后您可以处理过滤器等，并且仅根据需要对 DOM 应用更改和搜索。

第二个选项

1. 加载页面不表格
2. 从服务器加载 JSON 格式的数据，并根据数据生成表格
3. 存储对 tr 元素的引用

基本上，您不想执行 $(selector) 1000 次。这个概念是这样的:

var $rows = $("table tr");

// ...

event.domElement = $rows[0]; // Stores reference to existing DOM node, not a new jQuery object.

然后，当您需要在对象上使用 jQuery 方法时，您可以使用 $(yourEvent.domElement) 将其包装在 jQuery 包装器中。