在使用 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。当然,代码看起来有点困惑,但我不介意。
问题:
- 这是一种常见做法吗?
- 我应该这样做吗?
- 有更好的方法来实现我想要的吗?
编辑:
最后一个问题:
- 也许有一个 Visual Studio 插件可以帮我完成这个任务吗?也就是说,如果它注意到我正在编辑 jQuery 中使用的元素的类,它会警告我吗?或者甚至可以对类名进行颜色编码,让我知道它正在被使用。 IDE 中的此类功能将是 killer 级的...
巴拉
最佳答案
我明白你在说什么以及你想提供什么帮助。基本上,您希望向原始 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 <-- 我个人认为已接受答案下方的答案有更多内容
关于jquery - 将文本附加到类名称的末尾,以表明 jQuery 正在利用这些类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2032481/