Javascript 使用CSS类作为编程逻辑的一部分来实现业务规则是否不好？

我在页面上有多个用户可以选择的

DIV

项，我在JavaScript代码中实现的是，当一个项被选中时，我向它添加了一个CSS类来标记它是一个选中的项，然后使用它来应用围绕它的业务规则逻辑

这只是一个例子，但总的来说，我想知道我是否应该以这种方式使用这个类，因为这个类本身并没有以任何方式改变页面的表示，CSS类的意图是为了表示。这样做是不是混合了表示和业务逻辑，这被认为不是一个好的设计模式

此外，在添加类时，它可能会触发浏览器执行一些表示处理开销，并可能降低速度

---

我想知道我是否应该改为将状态信息作为自定义属性添加到

DOM

元素？

不，这很好。如今，类不仅用于CSS样式，还用于指示元素所扮演的行为角色。如果您使用一个类“selected”来表示一个通常不可选择的元素当前是用户的选择元素，这与其他人现在在web上所做的事情非常一致

---

只要确保为类命名space，就不会与依赖相同泛型名称的外部JS库发生冲突。“selected”是一个可怕的名称，可能与一百万个库发生冲突。另一方面，“XOLUIselected”将非常可靠。

一般来说，这样做没有错。jQuery等框架是围绕类属性的使用而构建的

然而，对于HTML5，在大多数情况下有一个更优雅的解决方案，即所谓的数据属性

如果在HTML标记前面加上

data-

，则可以将任意属性添加到HTML标记中

例如：

<div data-value="3">Amount: $3.00</div>

金额：$3.00

我不知道向元素添加类时会发生什么，我现在找不到任何相关信息，但是我希望在幕后做一些工作来检查是否存在与特定类相关联的任何样式，因此我不建议这样做，因为这样做毫无意义，因为

data-*

属性就是为此而设计的

我相信使用

data-*

属性来存储数据比使用类更具语法性

所以你有两个选择，分别是

使用

类

，该类设计用于将样式应用于元素，还可能在后台运行一些不必要的代码以检查样式

或者使用一个

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？如果你有，那么我有一些令人兴奋的消息给你如果您还没有，并且正在思考，哇，这是个好主意！我恳求你立即摆脱这种想法，继续阅读

---

来源：

根本问题是将数据存储在DOM中，而不是存储在JavaScript数据结构中。对于您的实现，这可能不是一个坏主意。性能损失可以忽略不计，因此没有太多理由使用数组或对象等JavaScript数据结构

现在，假设您正在构建一个包含1000行和30列的电子表格应用程序。每次更改单元格时查询DOM都会使应用程序感觉迟钝，因此显然需要想出更好的方法

---

所以回答你的问题：不，这不好，但可能没关系。更好的解决方案是将您的演示文稿与业务逻辑分离，并根据底层JavaScript对象的更改对DOM进行更改。

现在在web上做其他人都在做的事情好吗？很难从人群中脱颖而出，但这几乎总是一个不错的选择。随机猜测一下标准是如何产生的（但暗示是“因为每个人都在这样做”=）。使用类来表示用户体验行为角色目前是一种标准做法。好的，我现在结束这个讨论：），但我会说，我不会做任何事情，因为其他人都在做。类从来不仅仅是用于样式，这正是它们主要的用途。@Pinocchio:在HTML 4中，class属性用作在HTML5中，“作为样式表选择器”以及“用于用户代理的一般用途处理”（），甚至那些对它们应该用于什么的松散“限制”也被删除了（），没有所谓的“CSS类”。类是HTML的一部分，而不是CSS。