我知道在DOM中存储数据很糟糕,但为什么呢？

Question

我一遍又一遍地听说"将DOM用作数据库是不好的做法".

虽然我大多同意这种观点,但这个问题更多的是黑白情况.记住jQuery .data()方法和HTML5数据属性规范的最新版本,为方便起见,将一些数据粘贴到DOM中真的很糟糕吗？

例如,我最近通过执行以下操作在一个充满输入的表上实现了"实时"计算功能:

<table>
  <tr>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
  </tr>
</table>

jQuery的:

$('table').bind('calculate',function(){
  var total = 0;
  $(this).find('tr').each(function(){
    total += $(this).data('value');
  });
  // display total
});

$('table input').bind('change keyup',function(){
  $(this).closest('tr').data('value',$(this).val());
  $(this).closest('table').trigger('calculate');
});

这是一个过于简化的示例,因为我可以跳过调用.data()并直接转到输入值,但让我们想象一个稍微复杂的场景,其中输入以外的元素会影响行值.

在这种情况下使用DOM存储简单数据是错误的吗？

Answer 1

将数据存储在DOM对象中是很好的.由于您的问题是针对jQuery的数据API的,因此了解dataAPI的工作原理非常重要.我写了一个答案,一段时间后解释了它的内部运作.数据API仅保留对DOM对象的引用以及数据,并且不在DOM对象本身内存储任何内容.所有数据都存储在普通的旧JavaScript对象中.

这是好的还是坏的问题是个人品味的问题.约翰Resig的,jQuery的创造者,给于Tech4Africa的演讲在2010年,他谈到了这个确切的问题,并建议废除单独的存储区,并使用该数据API的DOM链接的一切.您可以在YouTube上看到该演讲(感谢@ tine2k提供链接).如果你听完整个演讲,你会发现一些很好的例子,说明为什么这种方法有意义并保持简单.

我相信可以为频谱的另一端做出类似的论证 - 让你的数据整齐地隐藏在对象和类中,并与视图本身分开.这种想法来自传统的体系结构,如MVC.

我说可以采用任何一种方法 - 使用DOM存储数据,或使用经典方法.只是不要混淆两者,因为那时你的应用模型到处洒.

Answer 2

有一些基本论点反对使用DOM来存储数据:

1. DOM应该是数据视图.DOM元素的属性应该是元素本身的元数据,而不是模型中的数据.

2. 您不应该将随机属性添加到宿主对象,因为您不知道他们可能会对它们执行什么操作.

3. 您遇到与全局变量相同的问题 - 如果它成为常见做法,您将不得不采用一种方案来避免名称冲突.

还有一个论点,即DOM是一个非常普通的数据存储,带有索引的对象结构对于除了琐碎的数据需求之外的任何东西都会更有效.

如果您只有少量数据并且可以完全控制页面,那么请继续将数据放入数据属性和属性中.但是不要存放大块或复杂的结构.

哦,我不认为有任何性能问题 - 访问一个元素,它的属性在DOM中很可能没有更快或大于访问的对象结构的某些部分比较慢,但我敢肯定有更快的速度较慢方式做两件事.

Answer 3

我不认为在DOM中存储数据有什么问题,但我认为问题在于在DOM中存储大量数据.浏览器确实不得不混淆DOM来输出我们看到的页面,并且那里的数据越多,它就越需要排序.

我相信还有其他原因,这只是我的推论.