jquery - 将文本附加到类名称的末尾，以表明 jQuery 正在利用这些类

Question

在使用 jQuery 开发设计时，我偶然发现了一个问题。无需查看 javascript，我如何知道 jQuery 是否没有在我的 HTML 中的类上执行选择器？也就是说，如果我想将类更改为其他类，我无法知道该类是否在其他地方使用，因此这使得我很难轻松地更新设计。

所以，我的想法是复制一个类名并将文本(例如“-jquery”)附加到它的末尾(如果正在使用它)。这样，如果我将来想要更改设计，我可以自由地进行，并且我会立即知道我的 javascript 中使用了页面上的哪些元素。

例如，假设我有一个带有类的简单 div:

<div class="header">This is a test</div>

以及对 div 执行某些操作的 javascript:

$(".header").click(function() { 
     $(this).slideUp();
});

我的想法是改成这样:

<div class="header header-jquery">This is a test</div>

$(".header-jquery").click(function() { 
     $(this).slideUp();
});

从而分离我的 CSS 和 jQuery 类，更容易识别 jQuery 使用的元素，并允许我在需要时更新该类，而不影响我的 javascript。当然，代码看起来有点困惑，但我不介意。

问题:

1. 这是一种常见做法吗？
2. 我应该这样做吗？
3. 有更好的方法来实现我想要的吗？

编辑:

最后一个问题:

也许有一个 Visual Studio 插件可以帮我完成这个任务吗？也就是说，如果它注意到我正在编辑 jQuery 中使用的元素的类，它会警告我吗？或者甚至可以对类名进行颜色编码，让我知道它正在被使用。 IDE 中的此类功能将是 killer 级的...

巴拉

Answer 1

我明白你在说什么以及你想提供什么帮助。基本上，您希望向原始 HTML 添加一个类(不是动态地)，这样您就知道将来是否要更改它，因为 jQuery 正在使用它。

1. Is this a common practice at all?

不，或者至少我没见过。看起来它只会让你的代码变得困惑。

更新:但是，正如您在评论中提到的，在您的 HTML 编码器无法使用 jQuery 的环境中，它会提醒他们在编辑该类时可能会破坏它。然而说实话，与大多数 jQuery 代码一样，如果他触及该元素内的任何 HTML，他就有可能破坏代码，而不仅仅是破坏类。

2. Should I do this?

我个人不会。如果有的话，您可以添加 rel 标记，因为它在任何元素上都有效:

<div class="header" rel="jquery"></div>

但即便如此，这也是对 rel 属性的“不正确使用”。

3. Is there a better way of achieving what I want?

是的!在 Web 元素的主 JavaScript 文件的顶部放置以下内容:

/************ Classes and Selectors In Use **************

   .header
   form .special
   #footer p

*********************************************************/

当您要更改元素时，只需快速扫描该文件的顶部即可。此外，如果您正在缩小 JS 以用于生产(您应该这样做)，那么所有这些都将被删除，这样就不会增加文件大小。

正确的方法？

可能需要额外工作的最佳方法是进行自动化测试，但并不是我建议的解决方案的所有记录保存。因此，如果您不小心更改了一个类，那么当您运行测试时，它们将在之前通过的地方失败。

您可以在这里阅读:Automated Unit Testing with JavaScript <-- 我个人认为已接受答案下方的答案有更多内容