可以使用数据属性来存储Javascript'状态'

Is it okay to use data-attributes to store Javascript 'state'

本文关键字：状态 Javascript 存储数据属性可以使更新时间：2023-09-26

我经常使用数据属性来存储无法进行语义标记的配置，这样JS就会以某种方式对这些元素进行操作。现在，对于服务器渲染（尽职尽责地填写数据属性）的页面来说，这是可以的。

然而，我看到过javascript编写数据属性以保存以后可能需要的数据的例子。例如，将一些数据发布到服务器。如果发送失败，则将数据存储在数据属性中并提供重试按钮。单击重试按钮后，它会找到相应的数据属性并重试。

对我来说，这感觉既肮脏又昂贵，因为我必须深入研究DOM才能挖掘出这部分数据，但这对我来说也很容易做到

我可以看到两种替代方法：

一种方法是利用匿名Javascript函数的作用域来保持对原始数据的处理，尽管这可能不可能，而且可能会导致太多的"魔力"。

第二，放置一个物体来跟踪这些东西。我只是查询我的对象，而不是向DOM询问某个数据属性的内容。

我想我的假设是DOM不应该用于存储任意的状态位，相反，我们应该使用具有单一目的的更简单的对象。除此之外，我认为访问DOM比使用更简单但特定的对象来跟踪事情更昂贵。

其他人对性能、清晰度和易执行性有何看法？

您的假设非常好！尽管它是允许的并且完全有效，但在DOM中存储数据不是一个好的做法。当然，如果您只有一个输入字段也没问题，但是，随着应用程序的发展，您最终会发现到处都是混乱的数据。。。正如您所提到的，DOM是SLOW。

应用程序越大，分离你的兴趣就越重要：

DOM事件->触发JS函数->访问数据（JS对象、JS API或AJAX API）->处理结果（API调用或DOM更改）

我非常喜欢创建一个API来访问JS数据，这样你也可以在添加、删除、获取、更改时触发新事件。