jQuery：曾经的Web开发王者，如何延续传奇？

作为世界上使用最广泛的JavaScript库，jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站，可以说，Web开发之所以能有今天，jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现，jQuery作为Web开发首选工具的地位已经逐渐不保......任何事物都有其自身发展的兴盛与衰落，短期内jQuery并不会消失，但是对于其来说，又该如何维稳逆袭呢？

作者 | Danny Guo

译者 | 弯月，责编 | 刘静

出品 | CSDN（ID：CSDNnews）

以下为译文：

jQuery是世界上使用最广泛的JavaScript库。2000年末的时候，Web开发社区大力推崇jQuery，他们利用jQuery打造了由大量网站、插件和框架组成的生态系统。

但在过去的几年中，jQuery作为Web开发首选工具的地位已经不保。在本文中，让我们一起来看看为什么jQuery流行了起来，后来又是什么原因导致它有点失宠，以及我们何时仍然应该选择jQuery创建现代网站。

jQuery的发展简史

2005年，John Resig开发了第一版的jQuery，并于2006年在一次名为BarCampNYC的活动中发布。他曾在最早的jQuery网站上写道：

jQuery是一个Javascript库，它永远铭记自己的使命：编写Javascript代码是一件有趣的事情。为了实现这个目标，jQuery剥离了所有不必要的标记，通过简化、聪明且易于理解的方式来执行常见的重复性任务。

jQuery有两个主要的价值主张：第一，提供高效的API方便操作网页。特别是，它提供了强大的选择元素的方法。

除了通过id或类选择元素之外，jQuery还允许使用复杂的表达式，例如根据它们与其他元素的关系选择元素：

// Select every item within the list of people within the contacts element$('#contacts ul.people li');

这个选择引擎最终单独抽象成了一个名为Sizzle的库。

第二个卖点是，浏览器之间差异的抽象。当时，很难编写出可以在所有浏览器上稳健运行的代码。

由于缺乏标准化，开发人员必须考虑许多不同的浏览器行为和边缘情况。只需看看早期的jQuery源代码，然后搜索jQuery.browser就可以看到这类的例子，如下所示：

// If Mozilla is usedif ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) { // Use the handy event callback jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );// If IE is used, use the excellent hack by Matthias Miller// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited} else if ( jQuery.browser == "msie" ) {
 // Only works if you document.write it document.write("<scr" + "ipt id=__ie_init defer=true " +  "src=javascript:void(0)></script>");
 // Use the defer script hack var script = document.getElementById("__ie_init"); script.onreadystatechange = function { if ( this.readyState == "complete" ) jQuery.ready; };
 // Clear from memory script = ;// If Safari is used} else if ( jQuery.browser == "safari" ) { // Continually check to see if the document.readySt

jQuery出现以后，开发人员就可以依赖jQuery团队来处理这些陷阱。

后来，开发人员在jQuery的帮助下，可以更容易地采用更复杂的技术，比如动画和Ajax。逐渐地， jQuery成为了各个网站的标准依赖。时至今日， 互联网的很大一部分依然构建在jQuery上。根据 W3Techs的估计，大约有74%的网站仍在使用jQuery。

jQuery的管理工作也越来与正规。2011年，jQuery团队正式创建了jQuery委员会。2012年， jQuery委员会成立了jQuery基金会。

2015年，jQuery基金会与Dojo基金会合并，组建了JS基金会。后来，2019年又与Node.js 基金会合并，组建了OpenJS基金会——jQuery是其“最具影响力的项目”之一。

事态变化

然而，近年来jQuery的受欢迎程度有所下降。GitHub的网站前端不再使用jQuery，而Bootstrap v5也放弃了jQuery，因为它是Bootstrap“客户端常规JavaScript最大的依赖”（目前压缩后是30KB）。Web开发的一些趋势削弱了jQuery作为必选工具的地位。

浏览器

由于多种原因，浏览器差异和限制也没有那么显著了。首先是标准化有所改进。主流浏览器供应商（苹果、谷歌、微软和Mozilla）成立了Web超文本应用技术工作组，并合作开发了Web标准。

虽然浏览器在很多重要方面仍然存在差异，但各家供应商总有办法共同发展，避免无休止的战争。因此，浏览器的API日益强大。例如，Fetch API可以取代jQuery的Ajax函数：

$.getJSON('https://api.com/songs.json') .done(function (songs) { console.log(songs); })
// nativefetch('https://api.com/songs.json') .then(function (response) { return response.json; }) .then(function (songs) { console.log(songs); });

querySelector和querySelectorAll方法也可以取代jQuery的选择功能：

// jQueryconst fooDivs = $('.foo div');
// nativeconst fooDivs = document.querySelectorAll('.foo div');

如今我们还可以使用classList操作元素的类：

// jQuery$('#warning').toggleClass('visible');
// nativedocument.querySelector('#warning').classList.toggle('visible');

这个网站（
http://youmightnotneedjquery.com/）列出了几种可以用原生代码替换jQuery代码的情况。有些开发人员还是喜欢使用jQuery，因为他们不知道可以利用哪些API，但是随着开发人员对API越来越熟悉，他们对jQuery的依赖性就会降低。

使用原生功能还可以提高网页的性能。而且如今你还可以使用CSS更有效地实现许多jQuery的动画效果。

第二个原因是浏览器的更新速度比过去更快。如今，除了苹果的Safari之外，大多数浏览器都有"Evergreen"的更新策略。这些浏览器可以在没有用户干预的情况下悄悄更新，而且不依赖于操作系统的更新。

这意味着用户可以更快地获得浏览器的新功能和错误修复，开发人员不必等待Can I Use网站上给出的使用百分比达到可接受的水平。他们可以毫无顾虑地使用新功能和API，而且还无需加载jQuery或polyfill。

第三个原因是Internet Explorer的边缘化。一直以来，Web开发人员都对IE深恶痛绝。有些IE的bug是人尽皆知的，而且因为IE浏览器是2000年的主流浏览器，其缺乏"Evergreen"更新，很多人还在使用旧版本。

而微软的做法更是加快了人们放弃IE的速度，他们于2016年后放弃了对IE 10及以下版本的支持，并将IE 11作为最后一个支持的版本。Web开发人员忽视IE兼容性的现象越来越普遍。

2013年，甚至是jQuery发布的版本2.0时也放弃了对IE 8及以下版本的支持。虽然有些遗留网站等特殊情况仍然需要IE，但使用IE的人越来越少了。

新框架

自jQuery发布以来，Web开发涌现了大量Web框架，目前处于主流地位的是React、Angular和Vue。与jQuery相比，这些框架拥有两大显著优势。

首先，它们可以轻松地将UI分解为组件。这些框架旨在处理页面的呈现以及页面的更新。而 jQuery通常仅用于更新页面，最初的页面则需要服务器提供。

另一方面，React、Angular和Vue组件支持HTML、代码甚至CSS之间的紧密耦合。就像我们将代码库分解成多个独立的函数和类一样，这些框架可以将UI分解为可重用的组件，如此一来构建和维护复杂的网站就更加容易了。

第二个优点是，这些新出现的框架鼓励声明式范例，开发人员只需描述UI应有的样子，至于怎样实现则留给框架去处理。这种方法与jQuery代码中命令式的方法形成鲜明对比。

使用jQuery的时候，你需要明确地编写修改的步骤。但在使用声明式框架时，你只需指明：“利用这些数据，实现这样的用户界面。”这样即使记不住纷繁芜杂的代码也可以写出没有bug的代码了。

开发人员都喜欢通过这些新方法来构建网站，因此对jQuery的关注度就下降了。

何时使用jQuery？

那么，什么时候我们应该选择使用jQuery呢？

如果你估计项目的复杂度会很高，那么最好还是采用其他的库或框架，因为这样更加有助于处理这种复杂性，例如将UI分解成组件等。对于这样的网站来说，刚开始的时候使用jQuery还可以，但是很快就会变得混乱不堪，你甚至不确定哪些代码会影响页面的哪些部分。

我之前就遇到过这样的问题，每当你想修改代码时，心里就会隐隐地不安。由于jQuery选择器依赖于服务器生成的HTML结构，因此很难确定修改代码时不会破坏其他功能。

另一方面，有时候你的网站只需要少量交互或动态的内容。然而，即便是在这些情况下，我仍然不推荐使用jQuery，因为现在我们可以利用原生API实现很多功能。

即便我确实需要更强大的功能，我也会寻找特定的库，例如利用axios实现Ajax，或通过Animate.css实现动画。在这些情况下，使用这样的库通常比加载整个jQuery（只为了一些功能）更轻便。

我认为我们使用jQuery的理由在于，它提供的功能很全面，可以为网站的前端提供全面的支持。你不必学习各种的原生API或专用库，只需阅读jQuery文档就可以立即提高工作效率。

jQuery的命令式方法不利于扩展，但比其他库的声明式方法更直接。对于范围非常有限的网站来说，采用jQuery开发还是很合理的，因为它不需要任何复杂的构建或编译过程。

此外，如果你很确信网站的复杂度不会增加，而且你也不想使用原生功能，那么jQuery是一个不错的选择，因为原生的功能肯定比同等的jQuery代码更冗长。

还有一种情况：你必须支持旧版本的IE。在这种情况下，jQuery可以处理好占主导地位的IE浏览器。

展望未来

短期内jQuery并不会消失。jQuery还在积极地发展中，尽管我们有很多原生方法，而许多开发人员也更喜欢使用原生的API。

jQuery曾经帮助过一代开发人员创建适用于每种浏览器的网站。虽然如今jQuery的很多方面已经被新的库、框架和范例所取代，但Web开发之所以能有今天，jQuery可谓功不可没。

除非jQuery的功能发生重大变化，否则在未来几年内，jQuery的使用率可能会继续缓慢但稳定地下降。新网站都会倾向于采用更现代的框架构建，适合采用jQuery的情况会越来越少。

对有些人来说，Web开发工具的流失率让人有点痛心，但对我来说，这是一个快速进步的标志。jQuery为Web开发带来了更好的方式。而它之后的后起之秀也在朝着这个方向努力。

原文链接：https://blog.logrocket.com
/the-history-and-legacy-of-jquery/

本文为 CSDN 翻译，转载请注明来源出处。