JavaScript元素选择器/非CSS选择器

Question

作为一名前端开发人员，在团队中工作时，我发现自己多次解决了一个问题。例如，我们的大部分前端javascript代码都是使用jQuery和CSS选择器编写的（主要针对CSS“class”）。问题是，许多时候修复CSS代码的另一个开发人员会删除一个class或将DOM元素嵌套在另一个元素下面，从而使JS代码出现问题。

为了防止这种情况，我的想法是为每个要用于Javascript的元素使用/添加一个"data-js"属性。然而，我不确定像这样编写的jQuery选择器的性能如何：

$('[data-js="my_js_selector"]').click();

我有另一个想法，就是给由JavaScript控制的DOM元素添加一个特定于JS的类：

<a href="lol.com" class="js-link">link</a>

然后只需使用$('.js-link').click()简单调用即可。

如果您仅查看HTML，就可以知道某个元素具有一些附加的Javascript操作，而无需实际查看JS代码，这将非常方便。

这是一个好的想法吗？还是有其他最佳实践来将JS触发与CSS样式分离？

- Max101

---

请看这里关于性能方面的问题：https://dev59.com/-mw15IYBdhLWcg3wkMjz - SW4

如果您没有选择，可以使用像js-classname这样的前缀类名，但这会对性能有所影响。 - Arun P Johny

请查看 http://jsperf.com/id-vs-class-vs-tag-selectors/2。 - Arun P Johny

不应该让他们更改您指定的类。使用jQuery，类也成为标记，因此它们就像变量中预期的值一样。一个好的做法是尊重并强制执行所使用的类及其目的。使用独特和奇怪的类名，例如“.wierdClass”选择器来定义您的功能，并且如果他们不尊重您的类，则要打击他们。网站中的类必须是事先定义的约定。 - Luis Masuelli

嗨，David。没有人天生就拥有无限的知识。如果我知道答案，我就不会问这个问题了。没有任何东西让我认为 data-js 是一个 JavaScript 选择器，正如我所说，这只是一个想法，而“对主题的错误理解”正是我提出这个问题的原因。 - Max101

Answer 1

在可扩展和模块化的CSS架构（SMACSS）中，Jonathan Snook教授称，“状态”类（例如您提议使用的.js-link）是最佳方法。

相关讨论在状态规则部分：

子模块样式在呈现时应用于元素，然后不再更改。但是，状态样式应用于元素以指示页面仍在客户端计算机上运行时的状态更改。

例如，单击选项卡将激活该选项卡。因此，适用is-active或is-tab-active类。单击对话框关闭按钮将隐藏对话框。因此，适用is-hidden类。

这与两位评论者所说的相矛盾。CSS代码和类应具有灵活性；CSS开发人员应能够重构和改进代码，而不必担心与演示无关的功能出现问题。

@ArunPJohny所提出的观点支持使用state class方法。引擎不幸的是并没有优化识别data-属性，就像它们识别任意自定义属性一样，例如foo-。

- cantera

---

很棒的回答！谢谢，我会查看文章以了解更多 :) - Max101