我知道在DOM中存储数据的不好，但为什么？ [英] I know its bad to store data in the DOM, but why?

问题描述

我已经一再听到将DOM用作数据库是不好的做法。

I've heard over and over again that it is bad practice to "use the DOM as a database."

虽然我大多同意这种看法，问题更多的是黑白案例。记住jQuery的 .data（）方法和HTML5数据属性规范的最新修订，是否为了在DOM中粘贴一些数据真的很糟糕方便吗？

While I mostly agree with that sentiment, this question is more about the less black and white cases. Keeping in mind the latest revisions to jQuery's .data() methods and the HTML5 data-attribute spec, is it really so bad to stick some data in the DOM for the sake of convenience?

例如，我最近通过执行以下操作在一个充满投入的表上实施了一个live计算功能：

For example, I recently implemented a "live" calculation feature on a table full of inputs by doing something like this:

<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（）并直接输入输入值，但让我们想象一下稍微更复杂的情况，其中除输入之外的元素影响行值。

This is an over-simplified example because I could skip the calls to .data() and go straight to the input values, but let's imagine a slightly more complex scenario where elements other than inputs are affecting the row values.

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

推荐答案

在DOM对象中存储数据是很好的。而且由于您的问题是特定于jQuery的数据API，因此请务必了解数据 API的工作原理。我写了一个回答解释其内部工作一段时间。数据API只保留对DOM对象以及数据的引用，并且不会在DOM对象本身内存储任何内容。所有数据都存储在普通的旧的JavaScript对象中。

It's fine to store data in DOM objects. And since your question is specific to jQuery's data API, it's important to understand how the data API works. I wrote an answer explaining its inner workings a while back. The data API only keeps a reference to the DOM objects along with the data, and doesn't store anything inside the DOM objects themselves. All data is stored in plain old JavaScript objects.

这个问题是一个好的或坏的方法是个人品味的问题。 jQuery的创始人John Resig在2010年在Tech4Africa上发表了一个演讲，他谈到了这个确切的问题，并建议您取消单独的存储区域，并使用数据API将所有内容与DOM进行链接。您可以在 YouTube 上查看演讲（感谢@ tine2k提供链接）。如果你听整个演讲，你会发现一些很好的例子，说明为什么这种方法是有意义的，并且保持简单。

The issue of whether that is a good or a bad approach is a matter of personal taste. John Resig, the creator of jQuery, gave a talk at Tech4Africa in 2010 where he talks about this exact issue, and proposes to do away with a separate storage area and link everything with the DOM using the data API. You can see the talk on YouTube (thanks to @tine2k for providing the link). If you listen to the entire talk, you'll find some good examples of why this approach makes sense and keeps things simple.

我相信可以为光谱的另一端 - 将数据整齐地卷起物体和类，并与视图本身分开。这种想法来自传统的体系结构，如MVC。

I believe similar arguments can be made for the other end of the spectrum - to have your data in neatly tucked away objects, and classes, and be separate from the view itself. That sort of thinking comes from traditional architectures such as MVC.

我说可以使用任何一种方法 - 使用DOM存储数据，或使用古典方法。只要不要混合两个，因为你的应用程序模型无处不在。

I say it's fine to go with either approach - using the DOM to store data, or using a classical approach. Just don't mix the two, cause then you application model is sprinkled everywhere.

这篇关于我知道在DOM中存储数据的不好，但为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！