作为团队中的前端开发人员，我发现自己解决了很多重复出现的问题。例如，我们的许多前端javascript代码都是使用jQuery和CSS选择器（主要针对CSS“类”）编写的。问题是，很多其他正在修复某些CSS代码的开发人员将删除一个类或更改DOM元素，将其嵌套在另一个元素下，从而使JS代码中断。
为了防止这种情况，我的想法是对我们要用于Javascript的每个元素使用/添加一个“ data-js”属性。但是我不确定这样编写的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样式分开？
在CSS的可伸缩和模块化体系结构（SMACSS）中，乔纳森·斯努克（Jonathan Snook）教导说，“状态”类（例如您建议的类）.js-link是最好的方法。
有关讨论在“国家规则”部分中：
子模块样式在渲染时应用于元素，然后再也不会更改。但是，将状态样式应用于元素以指示页面仍在客户端计算机上运行时的状态变化。
例如，单击选项卡将激活该选项卡。因此，一个is-active或is-tab-active类是合适的。单击对话框关闭按钮将隐藏对话框。因此，隐藏类是合适的。
这与两位评论者所说的相矛盾。CSS代码和类应该灵活；CSS开发人员应该能够重构和改进代码，而不必担心破坏与表示无关的功能。
@ArunPJohny提出的观点支持状态类方法。不幸的是，引擎在识别data-属性方面并没有经过优化，而不是在识别任意的自定义属性（例如）方面没有进行优化foo-。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句