使用纯JavaScript优于JQuery的优势


86

与仅使用JQuery相比,仅使用Javascript有何优势?

我对JavaScript和JQuery编码的经验有限。我已经在HTML页面中添加了每个代码的片段,但是我主要使用其他语言对服务器端的东西进行了编码。我注意到,虽然理论上您可以使用两种方法中的任何一种来做相同的事情(当然,您甚至可以将它们混合在同一项目中),但似乎总是有从一开始就始终使用JQuery的趋势。没什么,项目需求是什么。

因此,我只是想知道,不使用仅JQuery而是仅使用普通的旧JavaScript有任何准时的好处吗?

我知道这看起来像是一个毫无疑问的问题,因为可以说“没有确定的答案”或“可以永远争论不休”,但是我实际上希望能如“您可以在一种方法,而另一种则不能。”


根据scrwtp的评论,我并不是仅指DOM处理部分。我的问题是:JQuery是一个库。对于Javascript。与该库相对于其他语言的其他库相比,我觉得奇怪的是,在JQyery的情况下,它似乎被设计为能够专门使用它,而无需直接接触Javascript。这与Hibernate和SQL相对,尽管库(或框架,在这种情况下,但我认为类推仍然适用)在很多方面都可以使用,但在使用SQL时仍然可以使用SQL ,至少在某些情况下如此。但是,在JQuery和Javascript的情况下,您可以只使用JQuery来处理Javascript(或者至少对我来说是如此)。


根据Stargazer712的评论:是的,我同意您的意见,这里的问题是,正如您所说的那样,“仅取决于您将如何使用JavaScript”。那就是我真正想问的,但是我做了一些不好的表述。这是另一个比喻:Spring Expression Language。这是一个Java库。没有Java,您将无法使用它,它基于Java,直到您仍然使用Java为止。但是实际上,您可以做的是将该库添加到Java项目中,然后使用Spring EL的表达式语言编写所有代码,这实际上使您的代码根本不类似于Java,甚至发生了范式转换(例如,您不再拥有使用此类型时强类型强制执行)。虽然我确实知道JQuery只是一个JS库,但在我看来,它实际上与Spring EL对于Java具有相同的效果,即,您只能在整个项目中使用它的API,而避免使用JavaScript的API。我想知道这是否是一件好事,可能有什么陷阱等。

(是的,在阅读了每个人的答案后,我确实了解到:

一种。我的问题在某种程度上有点荒谬

b。即使该问题完全正确,其答案也将是“不,您不能一直只使用JQuery”


25
说“仅使用JQuery”是不正确的_ JQuery是JavaScript库。
superM 2012年

4
没有for或while循环,没有变量,没有函数?所有这些就是JavaScript。
superM 2012年

2
“普通的JavaScript”可能是指JavaScript DOM API。您可能需要检查一下并编辑问题,以避免混淆。
scrwtp 2012年

4
跨浏览器兼容性不够吗?
西蒙·怀特海德2012年

10
“它(jquery)似乎被设计为能够专门使用它,而无需直接接触Javascript”。那实际上是不正确的。jQuery只是JavaScript函数的集合(尽管名称很奇怪,例如“ $”)。理解jQuery的重要部分之一就是这种实现。它只是处理DOM操作和循环的额外功能。
格雷厄姆

Answers:


113

首先-仅使用jQuery是不可能的,jQuery所做的就是在全局范围内添加$对象,其中包含一堆方法。像原型之类的更多操作性库也无法替代 javascript,它们是解决常见问题的工具。

将jQuery添加到工具栏中的主要优点是:

  • 浏览器兼容性-像.attr()这样的操作比本机替代方法要容易得多,并且不会在浏览器之间中断。
  • 简化通常复杂的操作-如果您希望看到一个编写良好的跨浏览器兼容的XHR方法版本,请查看$ .ajax的源代码-仅此方法就值得jQ的开销。
  • DOM选择-绑定事件和选择DOM元素之类的简单事情可能很复杂,并且每个浏览器都不同。没有大量的知识,它们也可能很容易写得很差,并降低您的页面速度。
  • 访问将来的功能-.indexOf和.bind之类的内容是本机javascript,但尚未被许多浏览器支持。但是,使用这些方法的jQuery版本将允许您跨浏览器支持它们。

JavaScript不再只是一种客户端语言,而且由于jQuery非常依赖DOM,因此迁移到服务器是一个很糟糕的选择。我强烈建议您花一些时间来理解为什么要使用jQuery(问这个问题是一个很好的第一步!),并在必要时进行评估。jQuery可能很危险,其中一些主要危险是:

  • 代码质量-jQuery具有庞大的社区和较低的学习曲线。对于许多写得不好的开源插件来说,这是一场完美的风暴。
  • 效率低下-jQuery很容易效率低下。例如,不需要使用jQuery的each而不是for循环,并且在某些情况下可能会对性能产生影响。在JSPerf上有很多关于这些东西的好信息
  • 膨胀-jQuery是一个巨大的库。在很多时候,您将使用其功能的一小部分,并获取整个库。有一些很棒的替代方法可以为您提供功能的子集,例如zepto.js和underscore.js-根据您的情况,可以通过选择适合您需要的库来节省一些字节。

最终,如果使用得当,jQuery是一个非常有用和有用的库。但是,它不是 javascript的替代方法。它是一个库,就像zepto.jsYUIDojoMooToolsPrototype一样 -对于您当前的项目,其中一个可能是更好的选择。

Javascript是一种被误解的语言,直到最近才被大多数人视为比脚本语言更多的东西。我真的建议您多读一些,这里是一些不错的起点:

编辑07/2014-我注意到这篇文章仍然受到关注,因此我添加了很多链接。这些没有特别的顺序,但应该会有所帮助。

  • Ben Alman的博客 -这里有许多最佳的最佳做法。我不同意所有这些,但是我一直都在他的博客中学习新知识。
  • 代码学院 -基本的javascript和jQuery培训。有时回到基础知识会有所帮助。
  • Javascript Garden-有关JavaScript的更多技巧性或误解性的文章。不时阅读本文,直到一切都变得有意义为止。
  • Bocoup-这些是培训班。如果您附近一个,去吧。许多优秀的JS讲者和老师都在教这些。
  • 保罗·爱尔兰(Paul Irish)的博客 -严格来说不是JS,但是这里有许多最佳实践。他和Ben的twitter提要都非常值得关注。
  • Javascript:好的部分 -通常被称为“ The Javascript Bible”,这本书由Douglas Crockford撰写,是开始理解javascript的绝佳地方。
  • Isaac Schlueter的博客-Isaac是npm的创建者,并且在节点核心上工作。他写了很多关于javascript社区的文章,而不是关于代码约定的文章,但是如果您真的喜欢js,那么这是一本好书。
  • Douglas Crockford的Javascript-如果Brendan Eich是javascript的父亲,那么Douglas是javascript直言不讳的叔叔。他是JSON规范,JavaScript圣经的作者,以及有关javascript的怪癖和飞速崛起的许多精彩文章。
  • 布伦丹·艾希(Brendan Eich)的博客 -布伦丹(Brendan)是javascript的创建者–他在自己的博客上写了各种愚蠢的东西,尽管他有自己的过错,但他的javascript帖子很有价值。
  • James Halliday的博客(@substack) -Substack可以说是社区中最重要的node.js开发人员-拥有大约400个(并且每天都在增长)npm模块和微小的类unix模块的指导思想,他编写的一切都值得读。
  • Max Ogden的博客 Max Ogden是另一个多产的node.js作者,并且擅长写一些可以教您一些知识的博客文章。他还是猫用JavaScript的作者(我相信还有其他人)。
  • 猫的Javascript-这是一个简短的教程,它从猫的角度带您了解javascript的基础知识。如果您是初学者,请通读此内容。这很有趣,并且可以在一小时内教多少本书需要数周的时间进行交流。
  • Nicholas Zakas的博客 Nicholas是几本很棒的javascript书的作者:Java中的面向对象编程,可维护的Javascript面向Web开发人员的专业Javascript高性能Javascript。他主要专注于客户,但是拥有大量的最佳实践和性能提示。
  • Guillermo Rauch的博客 -Guillermo是另一个多产的node.js开发人员,主要以Socket.io和Mongoose闻名。他的博客(以及他的新书Smashing Node.js都是不错的资源。

我敢肯定,我没有想到或不知道的更多资源,其他回答者应该随时添加到该列表中。


3
+1对JS的评论不再只是一种客户端语言,而是JQuery如何适应所有这些。
Shivan Dragon 2012年

1
请注意,所有函数都是对象,但是JavaScript中的所有内容也是如此。$可以更好地描述为具有“类级”属性的函数,例如($.ajax)吐出DOM元素的包装对象集,通过使其更加简洁,具有方法,通常使DOM方法比PITA少得多。只要有意义,就会自动循环遍历dom对象集,并在浏览器之间共享一个通用的,可预测的API(这是IE <= 8的问题)。
Erik Reppen

1
这是一篇很棒的文章,但我想谈一点-“巨大的库...使用Zepto / Undercore”-首先,Underscore是一种完全不同的库类型-主要用于处理数组/对象-还要使用LoDash相反,它更快。其次,Zepto较小,因为它没有涵盖jQuery的功能。这可能会导致jQuery将修复的错误。最后,jQuery不再是巨大的/单一的,一次压缩后大约为30Kb,您可以通过减少1张图像来保存它。对我而言,获得的开发效率值得这些字节。
LocalPCGuy 2014年

1
@LocalPCGuy绝对有一些优点。这篇文章(恰好是!)是2年前的,从那时起,js生态系统中的情况肯定发生了变化。例如,我个人使用browserify和小型模块,而不使用任何全局命名空间的库。但是,我认为基本前提仍然是正确的,这是因为在很多(大多数情况下)情况下,很少需要厨房水槽库。我已将其交给大多数开发人员,以确保他们在决定使用它之前合理地证明了库的大小成本,这仅仅是因为它比具体说明所需的内容容易。
杰西2014年

1
反应所有事情,我是对的!?!?!/ sarcasm-如何为工作@Andy选择合适的工具,而且它并不总是React。我认为React在做一些好事,但不要假装它是JavaScript世界的全部治愈方法。
LocalPCGuy

17

有优点,但是它们是否真正胜过缺点尚待商bat。

主要的一点是节省带宽并获得更快的响应。jQuery在您的响应中又增加了约30kb。在某些网络(和某些国家)中,这可能意味着几毫秒。但是,另一方面,您可以使用Web服务器轻松地为其设置缓存(或如Xion所说,可以从Google的网站上使用它,这样它就不会影响您自己的缓存,并且仍然可以缓存)。

第二件事是,您可能只需要一些非常简单的功能,并且仅下载和设置jQuery可能会比简单地实现所需的时间花费更多的时间。

最后,您可能想构建自己的框架,这通常是一个坏主意,但有些人有其理由。

但是如果您只是因为对学习曲线感到恐惧而放弃了jQuery,则应该重新考虑。特别是因为它相当温柔。


同意,特别是关于带宽部分。JQuery 1.8.2在最小化/模糊化版本中具有92Kb。也同意这些不是使用JQuery的强烈理由。谢谢!
Shivan Dragon 2012年

1
@ ShivanDragon:你忘了gzip。这使得很多小。
ThiefMaster 2012年

@ThiefMaster:的确如此,感谢您指出。
席文·龙

10
如果您使用CDN(例如Google的CDN)中的jQuery,则很有可能用户会通过访问其他站点来预加载它。因此,对您的平均(尽管不是最大)响应时间的影响会较小。
Xion 2012年

1
@Phil为什么还要使用它?!?!jQuery从未如此,也不再需要。这是纯粹的撒旦邪恶(连同其他恶魔团伙:ReactJS,Underscore,LoDash,Modernizr,CommonJS,Angular,Google Analytics(尤其是AMD等))。就个人而言,我从来没有包含过一个完整的库(尽管我很少从库中提取和优化所需的特定功能),我也永远不会包含一个完整的库,并且我创建的几乎每个网页在拨号上网时加载的时间都少于11帧(1/59秒)。
杰克·吉芬

14

据我所知,与使用JQueryMooTools等库相比,使用原始javascript 实际上只有两个优点。

  • 库的有效负载消耗带宽。但是正如人们已经在其他答案中指出的那样,您可以通过gzipping和缓存来限制它。如果只需要jQuery的子集,则可以使用SizzleJS和MooTools进行选择,可以选择与Modernizr相同的方式选择所需的功能集
  • 图书馆很大,需要一些时间来学习。再说一遍,这是对开发人员的一次性投资...而且您的履历表很不错,因为它知道javascript库。
  • (奖金)图书馆不是万能的,因此,如果您想重新发明轮子,那绝对是可行的方法。

值得指出为什么要使用javascript库,为此,有很多内容:

  • 您不需要编写自己的框架来支持您的开发。如果您对事情的运行方式感到好奇,则可以查看代码,因为它是开源的。
  • 这些库解决了浏览器兼容性。DOM和javascript在浏览器之间都有一些差异。相信我,如果您必须自己修改,这是一个巨大的时间浪费。
  • 使用javascript库是事实上的互联网标准,现在大多数文档已被很好地记录下来,并且大多数网络开发人员(懂JavaScript)都知道如何使用它们。
  • 使用库时,您不会真正放弃javascript。您仍然需要了解Javascript及其类型,对象,闭包的工作方式等。
  • 大多数库是模块化的,不需要花费很长的时间编写插件或使用requireAMD模式
  • CSS从DOM中选择元素是一个巨大的帮助。
  • (奖励)您也可以将它们与CoffeeScript一起使用。

我曾经在一家网店工作,该网店坚持使用香草javascript,因为jQuery又大又吓人。这个决定主要受一个单独的“ javascript开发人员”的影响,是许多浏览器错误和缓慢开发的根源,而尝试进入他的代码库则是一次令人毛骨悚然的经历。编写自己的框架似乎是一个好主意,但是如果您想雇用新的开发人员,那么他们将无法迅速介入并提供帮助。然后还有要考虑的总线因素的问题。

正如我所说的,我曾经在那里工作过……其他地方有更绿色的牧场。:^)


10

我碰巧混合使用了很多。这样做的最大原因是,对于某些应用程序(例如chrome扩展程序),您不需要跨浏览器支持。这意味着我可以利用css3之类的新功能,而与之类似的转换功能则可以比使用jquery简化您的代码。

而且我经常做一些习惯。一定要像其他人所说的那样,你不应该重新发明轮子。但是,当您要求执行一些疯狂的功能时,我常常会发现自己编写它要容易得多,然后尝试破解一些接近但并非完美匹配的jquery插件。

我还与仅使用jquery的开发人员合作。而且,我不得不说,如果找不到找不到符合他们要求的jquery插件,那么他们对功能的折衷就更多了。

在Web开发的某个时候,系统会要求您执行未预包装在库中的操作。因此,此时最好确保您了解基本语言的实际功能。

所以TLDC:两者都使用,如果仅使用香草,则处于劣势,如果您不了解香草的内在和外在,并坚持始终使用jquery,则处于劣势。


3
纯香草js是必经之路!
marko 2012年

Ryan几乎不知道jQuery会秘密地document.querySelectorAll在幕后滥用。
杰克·吉芬

6

我唯一想到的就是如果没有JQuery,您将无法使用JQuery插件。即使这样,您也可以编写自己的JS库,以提供插件所需的内容。

这样思考:JQuery是一个用Javascript编写的开源Javascript库。您可以查看源代码,从而学习如何做所有它要做的事情。

不使用简单的旧Javascript,就无法使用JQuery。您可能不会使用document.getElementById,但仍将以标准Javascript方式定义函数和变量;您甚至可以编写一个标准for循环。

使用JQuery的主要好处与使用任何语言的任何其他第三方库几乎相同:您无需编写太多代码即可实现特定于应用程序的逻辑。

不要让大小吓到你了。该CDN版本是〜33K的下载,这将通过用户的浏览器的第一页命中后进行缓存。


6

如果您担心性能,则应尽可能尝试使用Vanilla js 。框架不仅增加带宽开销,而且增加处理开销。jQuery还具有与相当老的浏览器兼容的浏览器。

如果您正在开发移动应用程序或游戏(或两者结合使用),则首先需要性能和资源效率。

jQuery和插件可能会加快您的开发速度,但是特别是如果您依赖于第三方jquery插件,则应该知道它们在内部做什么。其中许多是代码质量和效率的不良示例。

jQuery比本地JavaScript慢2至10倍。而且,它很容易鼓励开发人员不正确地设计其接口,并过多地依赖jQuery选择器,这比本机要慢得多。


+1,出于性能方面的考虑,我同意您制作游戏是放弃JQuery转向使用Vanilla JS的一个很好的理由。对于大多数语言来说,与他们一起做游戏几乎是正确的。例如,谷歌团队的人不仅在其Android文档中建议在制作游戏时抛弃库(在Java中,对于Android),而且还抛弃某些良好的编码习惯以提高速度。
Shivan Dragon 2012年

...如果您和编写jQuery的人一样了解有效的DOM操作,是的。
Erik Reppen 2013年

@ErikReppen请实际调查“编写jQuery的人”的真实源代码。在前23行中看到的恐怖使我失明了近一个月。
杰克·吉芬

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.