我正在寻找有关将用于浏览器样式的类与用于dom操作的类隔离的最佳实践的建议或指示。
更具体地说，我们正在创建一个单页的backbone.js webapp，它广泛利用jQuery动态更新页面元素（添加，隐藏和向页面添加新内容）。我们遇到的问题似乎源于类属性的重载 - 它用于样式表示，用于通过jQuery识别GUI应用程序逻辑的页面元素。这在修改样式时会产生问题，因为没有明显的方法可以知道底层javascript应用程序是否需要给定的类（或DOM元素）。
换句话说，如果有人天真地更改或删除标签上的类，假设它们只是修改演示文稿，则会破坏应用程序。我正在寻找一种方法来区分这些问题 - 保持用于jQuery选择器的类与用于CSS样式的类分开。我假设这是一个“已解决的问题”，因为我们显然不是第一个编写javascript繁重的webapp的人。有没有一种标准的方法可以解决这个问题？我错过了一些明显的东西吗？
答案 0 :(得分：2)
执行此操作的好方法可能根本不使用css classname来绑定JavaScript逻辑。 HTML5引入了一种为标记添加自定义用户定义属性的方法。要做到这一点，您只需将属性添加到标记，但使用＆＃34;数据启动它的名称 - ＆＃34;字首。例如：
<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
如果您的应用由于某种原因需要使用类名作为指针，那么您可以遵循以下约定：
以＆＃34; js开头的类名 - ＆＃34;前缀仅用于购买脚本以识别html元素，并且您无法使用它们进行样式设置。所以这种方式你的元素将在每个元素上有多个类（一些用于样式，一些用于逻辑）：
<a href="#" class="author js-link-to-author">John Doe</a>
这样可以毫无顾虑地删除没有前缀的类，如果你删除带前缀的类，你可以非常肯定你会破坏它。