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

What is the best way keep track of your identifiers for your Jquery and CSS?

本文关键字：最佳 方法 是什么 标识符 Jquery CSS 跟踪      更新时间：2023-09-26

这更像是一个关于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呢？你把你的类命名为"JSclassName"还是类似的东西？

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

  • 在大小写和含义方面为您的"部分"提供一致的命名方案
  • 对于 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 代码。

首先，为您的标识符提供更有意义的名称。在我看来，click不是一个理想的选择。按钮是可点击的，锚点也是可点击的，甚至是div元素。

其次，如果你有数百个标识符，请尝试使用命名空间来区分 CSS/JavaScript 标识符。但我认为这不是必需的，在您的 JavaScript 中使用 CSS 标识符是很自然的，一个有意义的名称位于第一个位置。

<style>
    .ui-cart-button{ };
</style>
<a href="#" class="js-add-to-cart ui-cart-button">Buy</a>

命名空间是让你的代码更清晰、更具可读性的好方法，我建议你看看 jQueryUI 的源代码。

这是我的建议;

  • 始终使用唯一的 ID。ID 应该是唯一的，仅提供给特定元素或选择器，而类可以提供给多个选择器。
  • 无需对 JavaScript 和 CSS 使用相同的类，因为可以将多个类分配给选择器，例如<div class="class1 class2">
  • 对出现在多个页面中的常见项目使用样式表附件，以限制嵌入样式和内联样式。

下面的链接将为您建议一些准则。

30 个适合初学者
的 CSS 最佳实践15 个最佳 CSS 实践，让您的生活更轻松
改进代码的 10 个最佳 CSS 实践

以上所有给定的信息都是为了让您了解使用 CSS。从所有这些信息中，您可以制定出最适合您需求的最佳选择。

相关文章：