在html标签中添加html数据属性的标准方法？

Question

我正在添加 HTML 数据属性，但我对数据属性名称的标准转换感到困惑。我了解单字数据属性（data-name=""或data-id=""）等，但是如果我在数据属性名称中使用多个单词，那么约定是什么？我是否将两个单词 ( data-product_id="" or data-product-id="") 或某种形式的驼峰式命名法分开，例如：data-productID=""？

Answer 1

数据属性可能应该使用连字符分隔的单词，例如data-product-id. 这使得它们在 Javascript 中访问它们时可以自动转换为驼峰命名法dataset（因为大多数 Javascript 变量通常应该采用驼峰命名法）：

const div = document.querySelector('div');
console.log(div.dataset.productId);

<div data-product-id=5></div>

使用大写字母来表示单词分隔并不是一个好主意，因为在检查 时它会丢失dataset，当属性很长时，这会严重损害多个单词的可读性：

const div = document.querySelector('div');
console.log(div.dataset);

<div data-productID=5></div>

在 data 属性中使用下划线会导致数据集属性也有下划线，这有点奇怪，因为之后您可能必须将其转换为驼峰命名法以符合变量命名约定：

const [div1, div2] = document.querySelectorAll('div');

(() => {
  // a bit verbose:
  const productId = div1.dataset.product_id;
  console.log(productId);
})();
(() => {
  // more consise and consistent
  // when the variable name is the same as the property name:
  const { productId } = div2.dataset;
  console.log(productId);
})();

<div data-product_id=5></div>
<div data-product-id=6></div>