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

Question

使用dataset对象和data-属性有什么好处？我觉得通过扩展 HTML DOM 对象并向它们添加属性可以完成同样的事情。 (我知道这段代码并不完全合理；这只是一个简单的例子)。

向 API 添加 data- 对象背后一定有某种想法。另外是否存在禁止向 DOM 对象添加属性的约定，或者这两种方法是否同样可以接受？如果这是有争议的，每种方法的优点和缺点是什么？

有一个涉及 jquery 版本数据对象的类似问题，但我假设 .data() 的操作有点不同，并且可能有不同的优点和缺点。

//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>

Answer 1

这个想法是，您可以安全地扩展任何 html 元素，而无需 100% 知道当前、过去和 future 的 html 属性。

它也使 html 代码更容易阅读，因为看到后

<input sync>

我可以去搜索一下这个新的同步属性是什么？

但是

<input data-sync="true">

非常清楚它来自哪里(自定义属性稍后在js中用于添加行为或样式)

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

它还可以轻松地使用基于模板的语言(例如 PHP)包含数据。

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