我正在寻找建议或指向最佳实践的建议,以便将用于浏览器样式的类与用于dom操作的类隔离开来.

更具体地说,我们正在创建一个单页的backbone.js webapp,它广泛利用jQuery动态更新页面元素(添加,隐藏和向页面添加新内容).我们遇到的问题似乎源于类属性的重载 – 它用于样式表示,用于通过jQuery识别GUI应用程序逻辑的页面元素.这在修改样式时会产生问题,因为没有明显的方法可以知道底层javascript应用程序是否需要给定的类(或DOM元素).

换句话说,如果有人天真地更改或删除标签上的类,假设它们只是修改演示文稿,则会破坏应用程序.我正在寻找一种方法来区分这些问题 – 保持用于jQuery选择器的类与用于CSS样式的类分开.我假设这是一个“已解决的问题”,因为我们显然不是第一个编写javascript繁重的webapp的人.有没有一种标准的方法可以解决这个问题？我错过了一些明显的东西吗

最佳答案 这样做的好方法可能根本就是不使用css classname来绑定
JavaScript逻辑. HTML5引入了一种为标记添加自定义用户定义属性的方法.要做到这一点,您只需将属性添加到标记,但使用“data-”前缀启动它的名称.例如：

<a href="#" data-role="link-to-author" data-value="John Doe">John Doe</a>

从1.4.3开始,jQuery具有使用.data()函数处理这些属性的内置方法.您可以在此处详细了解它：http://api.jquery.com/data/#data-html5

如果您的应用程序由于某种原因需要使用类名作为指针,那么您可以遵循以下约定：

以“js-”前缀开头的类名仅用于购买脚本以识别html元素,并且您不能将它们用于样式.所以这种方式你的元素将在每个元素上有多个类(一些用于样式,一些用于逻辑)：

<a href="#" class="author js-link-to-author">John Doe</a>

这样就可以毫无顾虑地删除没有前缀的类,如果删除带前缀的类,你可以非常肯定会破坏某些东西.