Question

因此我使用的任何自定义数据属性都应以“data - ”开头：

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我忽略这一点，会发生什么不好的事吗？即：

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一件坏事是我的自定义属性可能与具有特殊含义的HTML属性冲突（例如name），但除此之外，仅仅编写“example_text”而不是“data”是否存在问题-example_text“？（它不会验证，但谁在乎呢？）

Answer 1

保持自定义属性前缀数据有几个好处 - *。

它保证在将来的版本中不会与HTML扩展发生任何冲突。这是在HTML5中引入的一些新属性已经在某种程度上遇到的问题，其中现有站点使用具有相同名称的属性并期望不同且不兼容的自定义行为。（例如，required元素上的input属性已知在过去的某些热门网站上发生了一些冲突）
有一个方便的DOM API HTMLElement.dataset，用于从脚本访问这些属性。现在是supported in most browsers。
它们清楚地表明哪些属性是自定义属性，哪些是标准化属性。这不仅可以帮助验证器允许它们允许任何带有data- *的属性，同时仍然对其他属性执行有用的错误检查（例如捕获拼写错误），它还有助于使源代码的这一方面更清晰，包括人谁可以在原作者之后在网站上工作。

Answer 2

根据John Resig，将这些自定义数据属性添加到HTML5 sepcs的全部目的是允许在HTML 中嵌入自定义数据，同时仍然有效。

如果您不关心验证（并且正如您所说，您的自定义属性不会与name，id，style等现有HTML属性发生冲突。），那么我猜你不必使用data-前缀。但考虑到编写有效的兼容代码并不是一笔巨大的代价，我不明白为什么你不这样做。

为什么我应该在“data-”前面添加自定义属性？

2 个答案: