我DIV在页面上有多个用户可以选择的项目，我在 JavaScript 代码中实现的是，当一个项目被选中时，我向它添加了一个 CSS 类来标记它是一个选定的项目，然后使用它来围绕它应用业务规则逻辑。
这只是一个例子，但总的来说，我想知道我是否应该以这种方式使用该类，因为该类本身不会以任何方式改变页面的呈现方式，而 CSS 类的目的是为了呈现目的。这样做是不是混合了表示和业务逻辑，这被认为不是一个好的设计模式？
此外，它可能会在添加类时触发浏览器执行一些表示处理开销，并可能减慢速度。
我想知道我应该做的是将状态信息作为自定义属性添加到DOM元素吗？
一般来说，这样做并没有错。像 jQuery 这样的框架是围绕类属性的使用而构建的。
然而，从 HTML5 开始，对于大多数情况，有一个更优雅的解决方案，即所谓的数据属性。
这允许您在 HTML 标记中添加任意属性（如果您在其前面加上data-.
一个例子是：
<div data-value="3">Amount: $3.00</div>
不，这很好。这些天来，类不仅用于 CSS 样式，还用于指示元素所扮演的行为角色。如果您使用“已选择”类来指示通常不可选择的元素当前是用户的选择元素，那么这与其他人现在在网络上所做的几乎一致。
只要您确保对您的类进行命名空间，这样它就不会与当然依赖于相同通用名称的外部 JS 库冲突。“selected”是一个可怕的名字，很可能与一百万个图书馆发生冲突。另一方面，“xol-ui-selected”会非常可靠。
根本问题是将数据存储在 DOM 而不是 JavaScript 数据结构中。对于您的实施，这可能不是一个坏主意。性能损失可以忽略不计，因此没有太多理由使用 JavaScript 数据结构，如数组或对象。
现在假设您正在构建一个包含 1000 行和 30 列的电子表格应用程序。每次更改单元格时都查询 DOM 会使您的应用程序感觉迟钝，因此显然您需要想出更好的方法。
所以回答你的问题：不，这不好，但可能没关系。更好的解决方案是将演示与业务逻辑分开，并更改 DOM 以响应对底层 JavaScript 对象的更改。
我不知道将类添加到元素时会发生什么，我现在找不到任何相关信息，但我希望在幕后完成一些工作以检查是否没有任何关联的样式使用那个特定的类，所以我不建议这样做，因为这没有任何意义，因为这是该data-*属性的设计目的。
我敢肯定，使用data-*属性存储数据也比使用类更符合语法。
所以你有两个选择。
使用class为元素应用样式而设计的，也可能在后台运行一些不必要的代码来检查样式。
或者使用data-*旨在将此类数据存储在特定元素上的属性，并且可能不会在后台运行任何不必要的代码。
我确定我会选择选项 2。
更新
你可能会看到一些 JavaScript 框架在类中使用了一些数据，这些数据实际上并不应用任何样式，例如 angular.js，它们使用ng-binding&ng-scope类。但我很确定他们为这些数据使用一个类的唯一原因是，他们可以使用getElementsByClassName.
您还可以使用 javascript 对象来跟踪此类内容，这是一个跟踪已单击元素的示例。
var clickedElements = [];
forEach -- allElements -- .addEventListener('click', function() {
clickedElements.push(this);
});
// ^ Here you would actually have to loop through the elements
// To apply the event Listener.
这样您就可以轻松地遍历所有元素，并且不会影响您的 DOM 内容。
这是不久前阅读的一篇文章的一小部分。
您是否曾经发现自己使用元素类名称或 rel 属性来存储任意元数据片段，其唯一目的是让您的 JavaScript 更简单？如果你有，那么我有一些令人兴奋的消息要告诉你！如果你还没有，并且你在想，哇，这真是个好主意！我恳请您立即摆脱这种想法并继续阅读。