仅使用属性来标记 html 元素是一种好习惯吗？

Question

我对使用 Javascript 编写 HTML 的良好做法存有疑问。

我想出了一个想法（可能不是第一个，但找不到明确的参考资料）将一些元素标记为候选，以便在数据可用时（在一些用户交互之后）加载一些数据。让我举例说明：

假设我有一个返回以下内容的请求：

GET    /animals/dog

{
  name: "Gutemberg",
  race: "doberman",
  age: "2y"
}

我编写的代码将响应中的字段绑定到作为加载此类值的候选元素的元素。例如：对于上面的请求，我可以使用以下标签：

<input name="dog-name-field" data-load-dog-name type="text"/>
<input name="dog-age-hid" data-load-dog-age type="hidden"/>

每个标签都会收到属性值，因为它被标记为这样做的候选者 -dog-name-field当一切都执行时将具有“Gutemberg”的值。每次重新加载请求时都会发生这种情况。现在，我只获取我搜索过的数据类型（“ dog ”），将它与属性“ name/age ”连接起来以形成属性，data-load-type-property并为具有此类属性的每个人设置一个值。

我有一种感觉，属性不应该像那样使用，但我不知道这样做有任何真正的缺点。由于我找不到这种方法的明确名称，因此我需要一些指导。

这种技术有名字吗？这是一种不好的做法吗？如果是这样，为什么？

PS：为了遵守如此良好的做法，我希望答案以参考为指导，而不仅仅是基于意见。如果没有提供参考，请让我们提供一个可靠的、描述良好的示例。

Answer 1

我有一种感觉，属性不应该这样使用

让我们看看自定义数据属性的用途：

自定义数据属性旨在存储页面或应用程序私有的自定义数据，对此没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。

（来自w3.org）

因此，在您的情况下使用是否data-attributes“合适”取决于您的需求：如果 DOM API 没有提供更好的属性来做到这一点，那么它是合适的。

如果您只需要选择一些元素来更改，textContent那么您有两个更合适/更简单的选项：

1)id如果您的元素在文档中是唯一的，则使用该属性

全局id属性定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式设置（使用 CSS）时识别元素。

（来自MDN 上的id）

2)class如果您的元素将在文档中的多个实例中使用，请使用该属性

全局class属性是元素类的空格分隔列表。类允许 CSS 和 Javascript 通过类选择器或函数（如 DOM 方法 document.getElementsByClassName）选择和访问特定元素。

（来自MDN 上的课程）

正如 @Supr 在他的回答中所说，您正在做的是data-binding的一个非常简单的实现。数据绑定可能比您目前正在做的事情复杂得多；例如您可能想要：

• 使您的 UI 与代表您的业务模型的 Javascript 对象保持同步，而不是直接注入来自 Ajax 调用的数据，

• 更新其他属性（值、样式），而不仅仅是innerHTML 或textContent，

• 更新您的业务模型以响应 UI 上的更改（双向数据绑定）

要实现所有这些功能，简单的id选择class器是不够的，这就是为什么实现数据绑定的框架（如 KnockoutJS 或 AngularJS）使用更灵活的data-*属性（AngularJS 实际上使用自己的ng-*属性，但允许使用替代方法）data-ng-*使用 HTML 验证工具的语法）。

数据属性允许描述更复杂的绑定：

<input data-bind="visible: editing, value: name, hasFocus: editing" />

查看KnockoutJS文档了解上面代码的含义，它与本示例无关，但想象一下用classes或ids来描述，会不会很方便。

长话短说

如果您不打算实现更复杂的功能，您可能需要使用classandid来代替。