作为曾经的 Web 开发“王者”，jQuery 的传奇怎么续写？

作为世界上使用最广泛的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 = null;// 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函数：

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

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

// jQuery
const fooDivs = $('.foo div');// native
const fooDivs = document.querySelectorAll('.foo div');

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

// jQuery
$('#warning').toggleClass('visible');// native
document.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 翻译，转载请注明来源出处。

【END】

Python的前景怎么样？就业薪资高吗？

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

热文 推荐

☞

点击阅读原文，即刻阅读《程序员大本营》最新期刊。

你点的每个“在看”，我都认真当成了喜欢

作为曾经的 Web 开发“王者”，jQuery 的传奇怎么续写？相关推荐

几款web开发常用jquery特效代码
特效网: http://www.xwcms.net 1.图片拖动特效 http://www.xwcms.net/js/tpdm/32946.html 2.弹出层焦点图特效: http://www.x ...
web开发：jquery之DOM
一.文档结构二.文档操作三.文档操作案例四.form表单五.正则六.form案例一.文档结构 ```js var $sup = $('.sup'); console.log($sup.ch ...
走进移动web开发的四大框架
伴随着智能手机的发展,电子商务的下一个金矿将是移动互联网,移动web开发也必将成为一个趋势. 目前,各种移动web开发的框架也纷纷到来,相信您也会很快投入其中!下面简单介绍一下各种框架. iUI: 它 ...
HTML5移动Web开发指南
HTML5移动Web开发指南唐俊开著 ISBN 978-7-121-16083-7 2012年3月出版定价:59.00元 16开 384页宣传语绝无仅有的HTML5移动Web开发专著 jQu ...
分享2011年10月网上随机搜集的超酷超有趣的web开发和Javascript代码
日期:2011/10/26 来源:jquery4u.com 编译:GBin1.com 2011年10月份就快结束了,web开发世界也发生了很多有趣的事情.下面是GBin1编译的201 ...
移动端--web开发
最近看到群里对关于移动端 web开发很是感兴趣,决定写一个关于移动端的web开发概念或框架(宝庆对此很是纠结).也是因为自己一直从事pc 浏览器 web一直对移动端的不是很重视,所以趁此机会也 ...
Web开发技术的演变
原文出处: WildFly 欢迎分享原创到伯乐头条受到好文<Web开发的发展史>(英文)激发的灵感,写下我对web开发技术的认识. 1. 静态页面时代大学时候,上机还得换卡穿拖鞋, ...
Web开发的发展史---Web开发技术的演变
在接下来的几个月时间里,我打算写一系列关于完整web开发的文章.这第一篇文章虽然有所粗略,但也能够充分概括了在之前15年或者更久的时间里web应用程序如何进行演变.并且最后我会囊括下这段时间内所写的相 ...
高性能WEB开发(6) - web性能测试工具推荐
Posted on 2010-04-28 12:57 BearRui(AK-47) 阅读(9341) 评论(14) 编辑收藏所属分类: 高性能WEB开发本来这篇文章应该在写在前面的,因本人写 ...

作为曾经的 Web 开发“王者”，jQuery 的传奇怎么续写？

作为曾经的 Web 开发“王者”，jQuery 的传奇怎么续写？相关推荐

最新文章

热门文章