数据集对象和数据属性背后的想法是什么？

问题描述：

使用dataset对象和data-属性的好处是什么？我觉得可以通过扩展HTML DOM对象并向它们添加属性来完成同样的事情。（我知道这个代码并不完全合理，只是一个简单的例子）。数据集对象和数据属性背后的想法是什么？

在将API对象添加到data-后面肯定有一些想法。还有一个反对向DOM对象添加属性的约定，还是这两个方法同样可以接受？如果这是有争议的，每种方法的优缺点是什么？

存在涉及jQuery的版本数据对象类似的问题，但我假设。数据（）操作有点不同，也许有不同的优点和与之相关联的缺点。

//dataset 
 
let input = document.getElementById("userData"); 
 

 
input.addEventListener("change", function() { 
 
    let value = input.value; 
 
    input.dataset.value = value; 
 
    console.log("input.dataset.value:" + input.dataset.value); 
 
}); 
 

 
//dom objects extending 
 
let input = document.getElementById("userData"); 
 

 
input.addEventListener("change", function() { 
 
    let value = input.value; 
 
    input.Val = value; //adds properties refering to html object state 
 
    console.log("input.val:" + input.val); 
 
});

<div class="userInput"> 
 
    <label for="userData">Type Something:</label><input type="text" id="userData"> 
 
</div>

因为你无法预测未来，无法知道某些财产何时会用于其他事情。 – Xufox

[将数据存储到DOM - 元素值与数据属性]（https：// stackoverflow。com/questions/23976440/stored-data-to-dom-element-value-vs-data-attribute） – Xufox

[“HTML5的设计考虑了可扩展性，用于与特定元素关联的数据，但不需要定义data- *属性允许我们在标准语义HTML元素上存储额外信息，而无需其他攻击，如非标准属性，DOM上的额外属性或Node.setUserData（）。“]（https：//developer.mozilla .ORG/EN-US /文档/学习/ HTML/HOWTO/Use_data_attributes） – epascarello

答

你是如何打算扩展DOM对象？
你会把它们延伸到什么属性？
你多久需要回去添加一些新的扩展？
你将如何跟踪所有的扩展？

这些问题的答案应该清楚，通过使用data-*属性，然后访问这些属性值与dataset使DOM的自定义扩展对象是不必要的。

顺便说一下，修改任何本地对象/元素的底层API通常被认为是不好的做法。

答

这个想法是，你可以安全地扩展任何HTML元素，而不知道100％的现在，过去和未来的HTML属性。

这也让HTML代码更易于阅读，因为看到

<input sync>

我可能会去搜索，这是什么新的同步属性之后？

然而

<input data-sync="true">

非常清楚它从何而来（自定义属性在JS后用于添加行为或风格）

然后，您可以使用DOM数据集API或的getAttribute检索值。

它还可以很容易地包含数据与基于模板的语言，如PHP。

在纯javascript设置中，我不会使用数据属性。 WeakMaps允许您安全地扩展DOM，或者您可以直接在DOM对象上设置键值对。

数据集对象和数据属性背后的想法是什么？

相关推荐