我正在寻找有关将用于浏览器样式的类与用于 dom 操作的类隔离的最佳实践的建议或指针。
更具体地说，我们正在创建一个单页 backbone.js 网络应用程序，它广泛利用 jQuery 来动态更新页面元素(添加、隐藏和附加新内容到页面)。我们遇到的问题似乎起源于类属性的重载——它用于样式表示，以及通过 jQuery 为 GUI 应用程序逻辑识别页面元素。这在修改样式时会导致问题，因为没有明显的方法可以知道底层 javascript 应用程序是否需要给定类(或 DOM 元素)。
换句话说，如果有人天真地更改或删除标签上的类，假设他们只是修改表示，它会破坏应用程序。我正在寻找一种方法来分离这些问题 - 将用于 jQuery 选择器的类与用于 CSS 样式的类分开。我假设这是一个“已解决的问题”，因为我们显然不是第一个编写大量 javascript webapp 的人。有没有标准的方法来处理这个问题？我是否遗漏了一些明显的东西？
最佳答案
最好的方法可能是根本不使用 css 类名来绑定(bind) 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>
通过这种方式可以毫无顾虑地删除没有前缀的类，并且您可以非常确定如果删除带有前缀的类会破坏某些东西。
关于css - 将样式与 dom 操作分离的策略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10838364/