javascript - 跟踪 Jquery 和 CSS 标识符的最佳方法是什么？

Question

这更多是关于 Jquery 的组织问题。

使用下面的简单示例:

<a href="#" class="click">click me</a>

<script>
$(document).ready(function(){
    $('.click').on('click',function(){
          alert('Clicked!');
    });
});
</script>

现在在您的网站上将其乘以 1000，很快就会变得困惑。您也可以忘记为 Jquery 或 CSS 指定了哪些类。我通常尽量避免混合使用两者，所以我为 CSS 添加我的类，为 Jquery 添加其他类，以防我更改布局或在其他地方使用该部分，...我可以更改 CSS。但是你怎么记得哪一个是用于 CSS 或 Jquery 的呢？您将您的类(class)命名为“JSclassName”还是类似的名称？

如果我不清楚，请告诉我，感谢您的帮助。

Answer 1

• 在大小写和含义方面为您的“部分”制定一致的命名方案
• 保持 CSS 和 JS 的 id 和类名相同，以避免混淆。
• 关于语义代码，您还应该赋予类/id 名称以意义。这有助于您记住要添加代码的目的。不要使用“centeredContainer”或“thisIsClickable”之类的东西。

例子:

<section class="weatherWidget">
    <ul class="forecast">
        <li class="vicinity">
           ...
    <ul class="news">
        <li class="region">
           ...

我还为我的 CSS 和 JS 命名空间以避免冲突。以下代码确保代码仅引用天气小部件内容:

//this click event is only for weatherWidget vicinity
$('.weatherWidget .vicinity').on('click',function{...});

//this CSS is only for weatherWidget regions
.weatherWidget .region{...}

此外，虽然我没有真正使用它们也不赞成使用它们，但 LESS 和 SASS 框架也可以通过使用变量来帮助避免冗余 CSS 代码。