我是否应该将我的数据保存在Javascript数据结构中？或只是在DOM？

Question

我是Javascript和Jquery的新手,所以我为这个初学者的问题道歉.

在一个简单的ajax web应用程序中,我正在创建一个主要是一个大表的HTML页面.该表中的每一行都描述了一个事件(派对,表演等).我的页面不仅显示此信息,还意味着让用户使用它做一些事情,特别是根据各种标准动态搜索和过滤表格.

首先是一个抽象的初学者的问题:在这种广泛的情况下(我的意思是你希望你的javascript代码对你从网络服务器检索的信息运行一系列操作)你会使用DOM作为数据结构吗？人们可以轻松地搜索和操作它(使用Jquery),这是一种可能性.(例如,"找到描述日期列= 2010-01-01和事件类型列='私人聚会'的事件的表行.)或者您是否将相同的信息保存在传统的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包装器中.