我正在寻找将用于浏览器样式的类与用于 dom 操作的类分离的最佳实践的建议或指针。
更具体地说，我们正在创建一个单页的backbone.js webapp，它广泛利用jQuery 来动态更新页面元素（添加、隐藏和附加新内容到页面）。我们遇到的问题似乎源于类属性的重载——它用于样式表示，并用于通过 jQuery 识别 GUI 应用程序逻辑的页面元素。这在修改样式时会导致问题，因为没有明显的方法可以知道底层 javascript 应用程序是否需要给定的类（或 DOM 元素）。
换句话说，如果有人天真地更改或删除标签上的类，假设他们只是修改表示，它会破坏应用程序。我正在寻找一种方法来分离这些问题 - 将用于 jQuery 选择器的类与用于 CSS 样式的类分开。我假设这是一个“已解决的问题”，因为我们显然不是第一个编写 javascript 繁重的 web 应用程序的人。有没有标准的方法来处理这个？我错过了一些明显的东西吗？
这样做的好方法可能根本不使用 css 类名来绑定 JavaScript 逻辑。HTML5 引入了一种为标签添加自定义用户定义属性的方法。为此，您只需将属性添加到标签，但以“data-”前缀开始它的名称。例如：
<a href="#" data-role="link-to-author" data-value="John Doe">John Doe</a>
jQuery 从 1.4.3 开始，具有使用 .data() 函数处理此类属性的内置方法。您可以在此处详细了解它：http: //api.jquery.com/data/#data-html5
如果您的应用程序出于某种原因需要使用类名作为指针，那么您可以进行以下约定：
以“js-”前缀开头的类名仅用于标识html元素，不能用于样式。所以这样你的元素将在每个元素上有多个类（一些用于样式，一些用于逻辑）：
<a href="#" class="author js-link-to-author">John Doe</a>
这样就可以毫无顾虑地删除没有前缀的类，而且你可以很确定如果你删除带前缀的类，你会破坏一些东西。