我使用太多的jQuery? 我什么时候过线?

最近我发现自己使用jQuery和JavaScript很多,经常做我以前使用CSS做的事情。

例如,我使用JavaScript / jQueryreplace表格行颜色或创buildbutton并链接hover效果。 这可以接受吗? 还是应该继续使用CSS来处理这些事情?

所以真正的问题是:当我使用太多的jQuery? 当我越过线时我怎么能理解?

如果您正在使用jQuery来完成无需jQuery即可轻松完成的工作,那么您已经越过了这条线。 jQuery的目的是使生活更轻松,但不应以牺牲兼容性或可用性为代价。

jQuery绝对不应该被用作CSS的替代品 – 想想禁用了JavaScript的用户。

我知道这个图像被滥用,但是有人不得不把它扔在这里:

图片信用 – 博比 。

我不认为这里有一个“路线”,我认为有一些简单的事情和一些灰色地带,你必须平衡你想要的。 先进的function,性能,兼容性,想想这些都是三angular形,同时尽可能做到最好 3。

如果CSS能做到的话,当然在CSS中做。 如果不能在CSS中使用jQuery,但不要在不需要开销的情况下使用jQuery,例如$(this).attr("id")通常可以是this.id ,在DOM上,仍然是以一种跨浏览器的方式。

你什么时候使用太多? 当不需要的时候 ,有时候你需要jQuery用于跨浏览器的CCS3select器,有时候你正在使用已经存在的CSSselect器把它放在样式表中 。 还有其他一些例子,但是如果没有它,你可以通过一个跨浏览器的干净的方式来获得,那么就没有必要像淡入淡出这样的事情了。 如果你需要包含jQuery,没有理由不使用.fadeIn()一旦你有(代码被包括,为什么复制它?)

JavaScript与没有JavaScript

正如在这里评论说,你的网站应该提供所有的基本function没有JavaScript ,这通常不是一个问题,例如通过AJAX捕获点击和加载内容…如果你不捕获它,他们做一个完整的页面重新加载,这是标准行为的一个简单回落。 然而,所有的“花里胡哨”呢? 这是肯定的,但我不认为你应该向后弯,提供没有JavaScript的所有function。 用户closures它们,他们没有得到花哨的东西,没关系……看看这样的例子,禁用JavaScript禁用了很多非必要的function ,你可以浏览一切正常,但评论,投票,主要的行动不一定是没有JavaScript的。

如果您在浏览器上closures了Java脚本,并且您的站点/应用程序没有运行,或者在function上看不到它,那么您遇到了问题。

JS是伟大的,但它永远不应该阻止用户使用你已经build立的东西,如果它被禁用。

如果这是在CSS中很容易实现的东西,那就用jQuery来处理,然后用CSS来完成。 这样你就不必依赖于JavaScript执行的应用程序的外观/感觉。

如果您可以设置一个类属性而不是很多样式属性,则可以使用太多的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; } 

在文档加载完成后,jQuery经常被应用。 我猜如果你能用普通的CSS实现同样的事情,那么CSS就是要走的路。 在浏览器上的负载较less,如果有人没有启用jQuery,至less还有(某些)风格,因为CSS。

例如,我使用JavaScript / jQueryreplace表格行颜色或创buildbutton并链接hover效果。 这可以接受吗? 或者我应该继续使用CSS来处理这些事情?

真的,这取决于你的浏览器支持。 你可以用这个代码简单地在表格上做斑马条纹:

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

但是,这在Internet Explorer中根本不起作用(尽pipe它应该在即将到来的版本9中)。 所以,如果你需要一切看起来相同的跨浏览器,使用jQuery。

对于链接hover效果,假设你的意思是颜色的变化等,而不是幻想animation, 绝对使用CSS,因为这是支持无处不在。

好的,不要把我当成一个巨魔…

如果您的networking应用程序不会在没有启用JavaScript或与JQuery不兼容的环境中工作,那么只要使用最简单的方法来pipe理即可。 如果应用程序实际上没有工作,那么对应用程序提供可视化支持没有任何好处。

如果你想在没有JavaScript支持的情况下继续工作,那么你应该尝试使用CSS。 但是,如果你不打算不支持JavaScript,而且工作的话,那么就去做最简单的事情吧