1. 首页
  2. IT资讯

作为曾经的 Web 开发王者,jQuery 的传奇怎么续写?

“u003Cpu003E作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现,jQuery作为Web开发首选工具的地位已经逐渐不保……任何事物都有其自身发展的兴盛与衰落,短期内jQuery并不会消失,但是对于其来说,又该如何u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003E维稳u003Cu002Fiu003E逆袭呢?u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRccFnD375Xd05K” img_width=”1024″ img_height=”1020″ alt=”作为曾经的 Web 开发王者,jQuery 的传奇怎么续写?” inline=”0″u003Eu003Cpu003E作者 | Danny Guou003Cu002Fpu003Eu003Cpu003E译者 | 弯月,责编 | 刘静u003Cu002Fpu003Eu003Cpu003E出品 | CSDN(ID:CSDNnews)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E以下为译文:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EjQuery是世界上使用最广泛的JavaScript库。2000年末的时候,Web开发社区大力推崇jQuery,他们利用jQuery打造了由大量网站、插件和框架组成的生态系统。u003Cu002Fpu003Eu003Cpu003E但在过去的几年中,jQuery作为Web开发首选工具的地位已经不保。在本文中,让我们一起来看看为什么jQuery流行了起来,后来又是什么原因导致它有点失宠,以及我们何时仍然应该选择jQuery创建现代网站。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EjQuery的发展简史u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E2005年,John Resig开发了第一版的jQuery,并于2006年在一次名为BarCampNYC的活动中发布。他曾在最早的jQuery网站上写道:u003Cu002Fpu003Eu003Cpu003EjQuery是一个Javascript库,它永远铭记自己的使命:编写Javascript代码是一件有趣的事情。为了实现这个目标,jQuery剥离了所有不必要的标记,通过简化、聪明且易于理解的方式来执行常见的重复性任务。u003Cu002Fpu003Eu003Cpu003EjQuery有两个主要的价值主张:第一,提供高效的API方便操作网页。特别是,它提供了强大的选择元素的方法。u003Cu002Fpu003Eu003Cpu003E除了通过id或类选择元素之外,jQuery还允许使用复杂的表达式,例如根据它们与其他元素的关系选择元素:u003Cu002Fpu003Eu003Cpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F Select every item within the list of people within the contacts elementu003Cu002Fcodeu003Eu003Ccodeu003E$(‘#contacts ul.people li’);u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fpreu003Eu003Cpu003E这个选择引擎最终单独抽象成了一个名为Sizzle的库。u003Cu002Fpu003Eu003Cpu003E第二个卖点是,浏览器之间差异的抽象。当时,很难编写出可以在所有浏览器上稳健运行的代码。u003Cu002Fpu003Eu003Cpu003E由于缺乏标准化,开发人员必须考虑许多不同的浏览器行为和边缘情况。只需看看早期的jQuery源代码,然后搜索jQuery.browser就可以看到这类的例子,如下所示:u003Cu002Fpu003Eu003Cpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F If Mozilla is usedif ( jQuery.browser == “mozilla” || jQuery.browser == “opera” ) {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F Use the handy event callbacku003Cu002Fcodeu003Eu003Ccodeu003E jQuery.event.au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003Eddu003Cu002Fiu003E( document, “DOMContentLoaded”, jQuery.ready );u002Fu002F If IE is used, use the excellent hack by Matthias Milleru002Fu002F http:u002Fu002Fu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003Ewwwu003Cu002Fiu003E.outofhanwellu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E.comu003Cu002Fiu003Eu002Fblogu002Findex.php?title=the_window_onload_problem_revisited} else if ( jQuery.browser == “msie” ) {u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E u002Fu002F Only works if you document.write itu003Cu002Fcodeu003Eu003Ccodeu003E document.write(“<scr” + “ipt id=__ie_init defer=true ” + u003Cu002Fcodeu003Eu003Ccodeu003E “src=javascript:void(0)><u002Fscript>”);u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E u002Fu002F Use the defer script hacku003Cu002Fcodeu003Eu003Ccodeu003E var script = document.getElementById(“__ie_init”);u003Cu002Fcodeu003Eu003Ccodeu003E script.onreadystatechange = function {u003Cu002Fcodeu003Eu003Ccodeu003E if ( this.readyState == “complete” )u003Cu002Fcodeu003Eu003Ccodeu003E jQuery.ready;u003Cu002Fcodeu003Eu003Ccodeu003E };u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003E u002Fu002F Clear from memoryu003Cu002Fcodeu003Eu003Ccodeu003E script = ;u002Fu002F If Safari is used} else if ( jQuery.browser == “safari” ) {u003Cu002Fcodeu003Eu003Ccodeu003E u002Fu002F Continually check to see if the document.readyStu003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fpreu003Eu003Cpu003EjQuery出现以后,开发人员就可以依赖jQuery团队来处理这些陷阱。u003Cu002Fpu003Eu003Cpu003E后来,开发人员在jQuery的帮助下,可以更容易地采用更复杂的技术,比如动画和Ajax。逐渐地, jQuery成为了各个网站的标准依赖。时至今日, 互联网的很大一部分依然构建在jQuery上。根据 W3Techs的估计,大约有74%的网站仍在使用jQuery。u003Cu002Fpu003Eu003Cpu003EjQuery的管理工作也越来与正规。2011年,jQuery团队正式创建了jQuery委员会。2012年, jQuery委员会成立了jQuery基金会。u003Cu002Fpu003Eu003Cpu003E2015年,jQuery基金会与Dojo基金会合并,组建了JS基金会。后来,2019年又与Node.js 基金会合并,组建了OpenJS基金会——jQuery是其“最具影响力的项目”之一。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E事态变化u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E然而,近年来jQuery的受欢迎程度有所下降。GitHub的网站前端不再使用jQuery,而Bootstrap v5也放弃了jQuery,因为它是Bootstrap“客户端常规JavaScript最大的依赖”(目前压缩后是30KB)。Web开发的一些趋势削弱了jQuery作为必选工具的地位。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E浏览器u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E由于多种原因,浏览器差异和限制也没有那么显著了。首先是标准化有所改进。主流浏览器供应商(苹果、谷歌、微软和Mozilla)成立了Web超文本应用技术工作组,并合作开发了Web标准。u003Cu002Fpu003Eu003Cpu003E虽然浏览器在很多重要方面仍然存在差异,但各家供应商总有办法共同发展,避免无休止的战争。因此,浏览器的API日益强大。例如,Fetch API可以取代jQuery的Ajax函数:u003Cu002Fpu003Eu003Cpreu003Eu003Cpreu003Eu003Ccodeu003E$.getJSON(‘https:u002Fu002Fapiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E.comu003Cu002Fiu003Eu002Fsongs.json’)u003Cu002Fcodeu003Eu003Ccodeu003E .done(function (songs) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(songs);u003Cu002Fcodeu003Eu003Ccodeu003E })u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Eu002Fu002F nativeu003Cu002Fcodeu003Eu003Ccodeu003Efetch(‘https:u002Fu002Fapiu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E.comu003Cu002Fiu003Eu002Fsongs.json’)u003Cu002Fcodeu003Eu003Ccodeu003E .then(function (response) {u003Cu002Fcodeu003Eu003Ccodeu003E return response.json;u003Cu002Fcodeu003Eu003Ccodeu003E })u003Cu002Fcodeu003Eu003Ccodeu003E .then(function (songs) {u003Cu002Fcodeu003Eu003Ccodeu003E console.log(songs);u003Cu002Fcodeu003Eu003Ccodeu003E });u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fpreu003Eu003Cpu003EquerySelector和querySelectorAll方法也可以取代jQuery的选择功能:u003Cu002Fpu003Eu003Cpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F jQueryu003Cu002Fcodeu003Eu003Ccodeu003Econst fooDivs = $(‘.foo div’);u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Eu002Fu002F nativeu003Cu002Fcodeu003Eu003Ccodeu003Econst fooDivs = document.querySelectorAll(‘.foo div’);u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fpreu003Eu003Cpu003E如今我们还可以使用classList操作元素的类:u003Cu002Fpu003Eu003Cpreu003Eu003Cpreu003Eu003Ccodeu003Eu002Fu002F jQueryu003Cu002Fcodeu003Eu003Ccodeu003E$(‘#warning’).toggleClass(‘visible’);u003Cu002Fcodeu003Eu003Cbru003Eu003Ccodeu003Eu002Fu002F nativeu003Cu002Fcodeu003Eu003Ccodeu003Edocument.querySelector(‘#warning’).classList.toggle(‘visible’);u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fpreu003Eu003Cpu003E这个网站(http:u002Fu002Fyoumightnotneedjqueryu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E.comu003Cu002Fiu003Eu002F)列出了几种可以用原生代码替换jQuery代码的情况。有些开发人员还是喜欢使用jQuery,因为他们不知道可以利用哪些API,但是随着开发人员对API越来越熟悉,他们对jQuery的依赖性就会降低。u003Cu002Fpu003Eu003Cpu003E使用原生功能还可以提高网页的性能。而且如今你还可以使用CSS更有效地实现许多jQuery的动画效果。u003Cu002Fpu003Eu003Cpu003E第二个原因是浏览器的更新速度比过去更快。如今,除了苹果的Safari之外,大多数浏览器都有”Evergreen”的更新策略。这些浏览器可以在没有用户干预的情况下悄悄更新,而且不依赖于操作系统的更新。u003Cu002Fpu003Eu003Cpu003E这意味着用户可以更快地获得浏览器的新功能和错误修复,开发人员不必等待Can I Use网站上给出的使用百分比达到可接受的水平。他们可以毫无顾虑地使用新功能和API,而且还无需加载jQuery或polyfill。u003Cu002Fpu003Eu003Cpu003E第三个原因是Internet Explorer的边缘化。一直以来,Web开发人员都对IE深恶痛绝。有些IE的bug是人尽皆知的,而且因为IE浏览器是2000年的主流浏览器,其缺乏”Evergreen”更新,很多人还在使用旧版本。u003Cu002Fpu003Eu003Cpu003E而微软的做法更是加快了人们放弃IE的速度,他们于2016年后放弃了对IE 10及以下版本的支持,并将IE 11作为最后一个支持的版本。Web开发人员忽视IE兼容性的现象越来越普遍。u003Cu002Fpu003Eu003Cpu003E2013年,甚至是jQuery发布的版本2.0时也放弃了对IE 8及以下版本的支持。虽然有些遗留网站等特殊情况仍然需要IE,但使用IE的人越来越少了。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E新框架u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E自jQuery发布以来,Web开发涌现了大量Web框架,目前处于主流地位的是React、Angular和Vue。与jQuery相比,这些框架拥有两大显著优势。u003Cu002Fpu003Eu003Cpu003E首先,它们可以轻松地将UI分解为组件。这些框架旨在处理页面的呈现以及页面的更新。而 jQuery通常仅用于更新页面,最初的页面则需要服务器提供。u003Cu002Fpu003Eu003Cpu003E另一方面,React、Angular和Vue组件支持HTML、代码甚至CSS之间的紧密耦合。就像我们将代码库分解成多个独立的函数和类一样,这些框架可以将UI分解为可重用的组件,如此一来构建和维护复杂的网站就更加容易了。u003Cu002Fpu003Eu003Cpu003E第二个优点是,这些新出现的框架鼓励声明式范例,开发人员只需描述UI应有的样子,至于怎样实现则留给框架去处理。这种方法与jQuery代码中命令式的方法形成鲜明对比。u003Cu002Fpu003Eu003Cpu003E使用jQuery的时候,你需要明确地编写修改的步骤。但在使用声明式框架时,你只需指明:“利用这些数据,实现这样的用户界面。”这样即使记不住纷繁芜杂的代码也可以写出没有bug的代码了。u003Cu002Fpu003Eu003Cpu003E开发人员都喜欢通过这些新方法来构建网站,因此对jQuery的u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E关注u003Cu002Fiu003E度就下降了。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E何时使用jQuery?u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E那么,什么时候我们应该选择使用jQuery呢?u003Cu002Fpu003Eu003Cpu003E如果你估计项目的复杂度会很高,那么最好还是采用其他的库或框架,因为这样更加有助于处理这种复杂性,例如将UI分解成组件等。对于这样的网站来说,刚开始的时候使用jQuery还可以,但是很快就会变得混乱不堪,你甚至不确定哪些代码会影响页面的哪些部分。u003Cu002Fpu003Eu003Cpu003E我之前就遇到过这样的问题,每当你想修改代码时,心里就会隐隐地不安。由于jQuery选择器依赖于服务器生成的HTML结构,因此很难确定修改代码时不会破坏其他功能。u003Cu002Fpu003Eu003Cpu003E另一方面,有时候你的网站只需要少量交互或动态的内容。然而,即便是在这些情况下,我仍然不推荐使用jQuery,因为现在我们可以利用原生API实现很多功能。u003Cu002Fpu003Eu003Cpu003E即便我确实需要更强大的功能,我也会寻找特定的库,例如利用au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003Exiu003Cu002Fiu003Eos实现Ajax,或通过Animate.css实现动画。在这些情况下,使用这样的库通常比加载整个jQuery(只为了一些功能)更轻便。u003Cu002Fpu003Eu003Cpu003E我认为我们使用jQuery的理由在于,它提供的功能很全面,可以为网站的前端提供全面的支持。你不必学习各种的原生API或专用库,只需阅读jQuery文档就可以立即提高工作效率。u003Cu002Fpu003Eu003Cpu003EjQuery的命令式方法不利于扩展,但比其他库的声明式方法更直接。对于范围非常有限的网站来说,采用jQuery开发还是很合理的,因为它不需要任何复杂的构建或编译过程。u003Cu002Fpu003Eu003Cpu003E此外,如果你很确信网站的复杂度不会增加,而且你也不想使用原生功能,那么jQuery是一个不错的选择,因为原生的功能肯定比同等的jQuery代码更冗长。u003Cu002Fpu003Eu003Cpu003E还有一种情况:你必须支持旧版本的IE。在这种情况下,jQuery可以处理好占主导地位的IE浏览器。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E展望未来u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E短期内jQuery并不会消失。jQuery还在积极地发展中,尽管我们有很多原生方法,而许多开发人员也更喜欢使用原生的API。u003Cu002Fpu003Eu003Cpu003EjQuery曾经帮助过一代开发人员创建适用于每种浏览器的网站。虽然如今jQuery的很多方面已经被新的库、框架和范例所取代,但Web开发之所以能有今天,jQuery可谓功不可没。u003Cu002Fpu003Eu003Cpu003E除非jQuery的功能发生重大变化,否则在未来几年内,jQuery的使用率可能会继续缓慢但稳定地下降。新网站都会倾向于采用更现代的框架构建,适合采用jQuery的情况会越来越少。u003Cu002Fpu003Eu003Cpu003E对有些人来说,Web开发工具的流失率让人有点痛心,但对我来说,这是一个快速进步的标志。jQuery为Web开发带来了更好的方式。而它之后的后起之秀也在朝着这个方向努力。u003Cu002Fpu003Eu003Cpu003E原文链接:https:u002Fu002Fblog.logrocketu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E.comu003Cu002Fiu003Eu002Fthe-history-and-legacy-of-jqueryu002Fu003Cu002Fpu003Eu003Cpu003E本文为 CSDN 翻译,转载请注明来源出处。u003Cu002Fpu003E”

原文始发于:作为曾经的 Web 开发王者,jQuery 的传奇怎么续写?

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/18060.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code