元素的Javascript选择器/非CSS选择器[关闭]

Posted 2021-04-18

作为一个团队中的前端开发人员，我发现自己多次解决一个反复出现的问题。例如，我们的许多前端javascript代码是使用jQuery和CSS选择器编写的（主要针对CSS“类”）。问题是，很多时候修复一些CSS代码的另一个开发人员将删除一个类，或者将DOM元素嵌套在另一个元素下，使JS代码中断。

为了防止这种情况，我的想法是使用/添加“data-js”属性到我们想要用于Javascript的每个元素。但是我不确定这样编写的jQuery选择器的性能：

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

我的另一个想法是将一个特定于js的类添加到以某种方式由Javascript操纵的dom元素：

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

然后用$('.js-link').click()简单地调用它

非常好的是，您只能查看html并告诉某些元素附加了一些Javascript操作而不实际查看JS代码。

这是一个好主意吗？或者是否有一些其他最佳实践将JS触发与CSS样式分开？

答案

在Scalable and Modular Architecture for CSS（SMACSS）中，Jonathan Snook教导说，像.js-link提议的“州”类是最好的方法。

相关讨论见State Rules部分：

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

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

这与两位评论者所说的相矛盾。 CSS代码和类应该是灵活的; CSS开发人员应该能够重构和改进代码，而不必担心破坏与表示无关的功能。

@ArunPJohny提出的观点支持州级方法。遗憾的是，引擎不能优化识别data-属性，而不是识别任意自定义属性，例如foo-。