我使用了太多的 jQuery 吗？我什么时候越界？答案

【问题标题】：Am I using too much jQuery? When am I crossing the line?我使用了太多的 jQuery 吗？我什么时候越界？
【发布时间】：2010-05-13 12:42:38
【问题描述】：

最近我发现自己经常使用 jQuery 和 JavaScript，经常做与使用 CSS 之前相同的事情。

例如，我使用 JavaScript/jQuery 交替表格行颜色或创建按钮和链接悬停效果。这可以接受吗？或者我应该继续为这些事情使用 CSS 吗？

所以真正的问题是：当我使用太多 jQuery 时？当我越界时如何理解？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

如果您使用jQuery to do things that can be done easily without jQuery，您将越界。 jQuery 的目的是让生活更轻松，但不应以牺牲兼容性或可用性为代价。

jQuery 绝对不应该用作 CSS 的替代品——想想那些禁用了 JavaScript 的用户。

我知道这张图片被过度使用了，但有人不得不把它扔在这里：

Image Credit - bobince.

【讨论】：

哈哈哈，第一次看到这张图。这是纯金
-1，因为他敢于嘲笑伟大而强大的 jQuery！
更正之前的评论，我没注意到右边的“相关”部分也是纯金的“我的腿在哪里？”是新的赢家。
@sibidiba - 在 jQuery（或任何框架）的防御中，如果浏览器一开始没有以如此不同的方式实现事物，它们就不会被创建......或者至少不会'看不到他们目前的使用情况。是的，我正在关注你 Internet Explorer 团队。
@Chris S：哈哈。 @Nick Craver：当我看到这些相关问题时，我仍然会感到震惊。

【解决方案2】：

我不认为这里有一条“线”，我认为那里有一些简单的东西和一些灰色区域，你必须平衡你想要的东西。高级功能、性能、兼容性，想想这些是一个三角形，很难同时做到所有 3 个尽可能好。

如果 CSS 可以做到，当然可以在 CSS 中做到。如果不能在 CSS 中完成，请使用 jQuery，但不要在不需要开销的地方使用 jQuery，例如$(this).attr("id") 通常可以是 this.id，很多东西都可以在 DOM 上使用，并且仍然可以跨浏览器的方式使用。

你什么时候用的太多了？当它不是需要时，有时您需要 jQuery 来实现跨浏览器 CCS3 选择器，有时您使用的是已经可用的 CSS 选择器将它放在样式表中。还有一百个其他示例，但是如果您可以在没有它的情况下以跨浏览器干净的方式通过，那么就没有必要了，像褪色这样的事情并非易事。如果你完全需要包含 jQuery，没有理由不使用 .fadeIn() （代码已经包含，为什么要复制它？）

JavaScript 与无 JavaScript

正如 cmets here 中所说，您的网站应该提供所有基本功能，无需 javascript，这通常不是问题，例如捕获点击并通过 AJAX 加载内容...如果您不捕获它，他们会重新加载整个页面，这是对标准行为的简单回退。然而，所有的“花里胡哨”？这肯定是固执己见，但我认为您不应该在没有 JavaScript 的情况下提供所有功能。用户将其关闭，他们没有得到花哨的东西，这很好...以 SO 为例，禁用 javascript 会禁用许多 非必要功能，您可以浏览一下很好，但是评论、投票，主要是actions，如果没有 JavaScript，就不一定可用。

【讨论】：

完全正确：引入 jQuery 后就没有“行”了。这就像问“我什么时候有太多 HTML？”您可能拥有低效的代码，但这与您使用的库并没有真正的关系。如果你的代码效率低下，你应该让它更有效率。这可能意味着添加更多 jQuery 并删除一些 HTML/CSS。或者这可能意味着删除一些 JS 并添加更多 CSS。取决于它的效率低下。
StackOverflow 有许多不良做法的例子——如果我想要一个紧凑的 SO 接口，我需要通过浏览器实现以使其完全可用，而不是基于更简单、轻量级的 HTTP+DOM应用。如果这些东西不需要 JS 被解析，这将是一个更好的网站。
为您的网站设计样式，真的不划算。但是，如果您依赖于读取 JSON 来获取数据，并且读取它的唯一方法是通过 Jquery，那么您就有问题了。应该考虑实施，那里可以划线。
你能解释一下它们之间的区别吗？ “$(this).attr("id") 通常可以是 this.id 以及为什么你通常这么说。”我也想知道如果你需要设置 id 会发生什么？你能去 this.id = "newId" 吗？如果是这样，如果您进行链接，是否仍然值得单独执行此操作并链接其余部分？
@chobo2 - 我说“通常”是因为有时你想要一个空字符串而不是未定义的另一个操作。您可以更改链中的 Id，只要您在当前链上进行操作就可以了。 $(#IdSelector) 选择了运行时匹配的元素，这组元素是链中使用的元素，它们可能会更改并且与原始选择器不匹配的事实对于生命来说并不重要链，当你再次使用选择器时，这很重要:)

【解决方案3】：

如果您关闭浏览器上的 java 脚本，并且您的网站/应用程序无法运行或无法正常运行，那么您就有问题了。

JS 很棒，但它永远不会阻止用户使用你构建的东西，如果它被禁用的话。

【讨论】：

我只是部分同意这一点，如果它非常复杂或需要付出更多努力才能使其在没有 javascript 的情况下工作......那么你就不会得到那个功能。例如。尝试在此处关闭 javascript 然后投票，或回复此评论...有些事情在没有 javascript 的情况下是不合理的，用户可以选择关闭它。
一个网站/应用程序应该在没有 JavaScript 的情况下完全可用。 JS 是为了让事情变得更容易和更方便的好功能，但功能应该在没有 JS 的情况下工作。
@Peter - 我强烈不同意“完全”的基本功能是的，绝对...花里胡哨？没有。 JavaScript 是当今使用的每个浏览器的标准部分（有一个 very、very 小部分 1% 的例外），为什么我必须这样做完全忽略它的存在？如果您因为不喜欢鼠标而拔下鼠标，那很好，没有它让应用程序 100% 工作不是我的责任...关闭 javascript 有何不同？
@Peter - 你可以自己找到数字：stackoverflow.com/questions/121108/… 当然，对于你来说什么数字很重要，这取决于你的听众，但这个数字并不是凭空而来的。此外，您对功能的定义非常奇怪，因为大多数人会将其定义为“某事做什么”。都是“功能”，不管是基本功能（例如导航），这才是重点。
我觉得人们说所有功能都必须在关闭 JS 的情况下工作有点自大。谢谢你告诉我如何优化我的工程资源，这样我就可以迎合他们地下室里一直使用没有白名单的 NoScript 扩展程序的两个人，以及一个从 2001 年开始使用手机浏览器的人。

【解决方案4】：

如果它在 CSS 中很容易实现，那么就抛弃 jQuery 并在 CSS 中实现。这样您就不必依赖 javascript 执行来获得应用程序的外观/感觉。

【讨论】：

【解决方案5】：

如果你可以设置一个类属性而不是很多样式属性，你就使用了太多的 jQuery。例如：

/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');

代替：

/** jQuery **/
$('#table').addClass('blueRows');

/** CSS **/
#table tr.blueRows {
    background-color: blue;
}

为避免使用 jQuery 样式，您还可以为 body 设置一个类，以便为支持 Javascript 的浏览器使用 CSS 设置样式：

/** jQuery **/
$(document).addClass('JS-enabled');

/** CSS **/
body #table tr{
    background: #FFF;
}

body.JS-enabled #table tr {
    background: blue;
}

【讨论】：

【解决方案6】：

jQuery 最常在文档加载后应用。我想如果你可以用纯 CSS 实现同样的目标，那么 CSS 就是要走的路。浏览器的负载更少，如果有人没有启用 jQuery，至少还有（一些）样式，因为 CSS。

【讨论】：

【解决方案7】：

例如，我使用 JavaScript/jQuery 交替表格行颜色或创建按钮和链接悬停效果。这可以接受吗？还是我应该继续使用 CSS 来处理这些事情？

真的，这取决于您的浏览器支持。您可以使用以下代码对表格进行斑马条纹处理：

table.classname tr:nth-child(even) td {
  background-color: #ddd;
}

但这在 Internet Explorer 中根本不起作用（尽管它应该在即将发布的版本 9 中）。因此，如果您需要在跨浏览器中显示相同的所有内容，请改用 jQuery。

对于链接悬停效果，假设您的意思是颜色变化等而不是花哨的动画，肯定使用 CSS，因为这在所有地方都受支持。

【讨论】：

【解决方案8】：

好吧，不要将我标记为巨魔......

如果您的网络应用程序无法在没有启用 JavaScript 或与 JQuery 不兼容的环境中运行，那么请使用您最容易管理的方式。如果应用程序实际上根本无法工作，那么为应用程序提供视觉支持是没有任何好处的。

如果你想让它稍后在没有 JavaScript 支持的情况下工作，那么你应该尝试使用 css。但是，如果您不打算支持无 JavaScript 并且它可以工作，那么请选择对您来说最简单的方法

【讨论】：