jquery的历史和遗产

jquery的历史和遗产

jquery是世界上使用最广泛的javascript库。web开发社区在21世纪末兴起了jquery,创建了一个由网站、插件和框架组成的丰富的生态系统,这些系统在幕后使用jquery。

但在过去几年中,jquery作为web开发的头号工具的地位已经降低。让我们来看看jquery为什么变得流行,为什么它又失宠,什么场景下它仍然是一个现代网站的好选择。

query简史

john resig在2005年开发了jquery的初始版本,并在2006年发布了它。在最初的jquery网站上,他写道:

jquery是一个javascript库,它把这句格言放在心上:编写javascript代码应该很有趣。jquery通过执行常见的、重复的任务,去掉所有不必要的标记,使它们简短、智能、易懂,从而实现了这一目标。

jquery有两个主要的价值主张。第一个是提供一个便于操作网页的api。特别是,它提供了强大元素选择器。

除了只根据元素的id或类选择元素之外,jquery还允许复杂的表达式,比如根据元素间的关系选择元素:

// 选择列表中的每个li

$('#contactsul.people li');

第二个卖点是它消除了浏览器之间的差异。在当时,浏览器的兼容性是非常糟糕的。

缺乏标准化意味着开发人员必须考虑许多不同的浏览器兼容性。只要看看这个早期的jquery源代码,然后搜索jquery.browser以查看一些示例。这里有一个:

//IfMozillaisusedif( jQuery.browser =="mozilla"|| jQuery.browser =="opera"){        // Use the handyevent callback        jQuery.event.add(document,"DOMContentLoaded", jQuery.ready );// If IE isused, use the excellent hack by Matthias Miller//https://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited}elseif( jQuery.browser =="msie"){        // Only works ifyou document.write() it        document.write("<scr"+"iptid=__ie_init defer=true "+                "src=javascript:void(0)></script>");        // Use the deferscript hack        var script =document.getElementById("__ie_init");        script.onreadystatechange=function(){                if(this.readyState =="complete")                        jQuery.ready();        };        // Clear frommemory        script =null;// IfSafari  is used}elseif( jQuery.browser =="safari"){        // Continuallycheck to see if the document.readyState is valid        jQuery.safariTimer = setInterval(function(){                // loaded andcomplete are both valid states                if(document.readyState =="loaded"||                        document.readyState =="complete"){                        // If either oneare found, remove the timer                        clearInterval( jQuery.safariTimer );                        jQuery.safariTimer =null;                        // and executeany waiting functions                        jQuery.ready();                }        },10);}

通过使用jquery,开发人员可以忽略浏览器间的兼容性。

后来,jquery支持更强大的功能,比如动画和ajax。jquery实际上成了网站的标准依赖项。今天,它继续为互联网的很大一部分提供动力。w3techs估计,大约74%的网站使用jquery。

jquery的管理也变得更加正式。2011年,jquery团队正式创建了jquery委员会。在2012中,JQuery委员会形成了JQuery基金会。

在2015中,jQuery基金会合并了“基金会”基金会,成立了JS基金会,然后在2019与基金会合并,形成了基金会基金会,并将jQuery作为其“影响项目”之一。

不断变化的环境

然而,近年来jquery的受欢迎程度有所下降。github从他们的网站前端删除了jquery,bootstrap v5将删除jquery,因为它是bootstrap的“常规javascript最大的客户端依赖项”(目前是30kb,已缩小并gzip)。web开发的几个趋势削弱了jquery作为一个必须使用的工具的地位。

浏览器

由于几个原因,浏览器的差异和限制变得不那么重要。一是标准化水平提高。主要的浏览器供应商(苹果、谷歌、微软和mozilla)通过web超文本应用技术工作组就web标准进行协作。

虽然浏览器在很大程度上仍然存在差异,但厂商至少有办法找到并开发共同点,而不是彼此之间展开不间断的战争。因此,浏览器api变得更加强大。例如,fetch api可以替代jquery的ajax函数:

// jQuery$.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');

他可能不需要jquery网站列出更多的jquery代码可以替换为本机代码的情况。有些开发人员总是使用jquery,因为他们不知道这些api是可用的,但是随着开发人员对它们的了解,他们对jquery的依赖性降低了。

使用本机功能还可以提高网页的性能。许多jquery动画效果现在可以用css更有效地实现。

第二个原因是浏览器更新的速度比过去快。

大多数浏览器现在都有一个自动更新策略,苹果的Safari是主要的例外。它们可以在无需用户干预的情况下自动更新自己,并且不受操作系统更新的限制。

这意味着新的浏览器功能和bug修复程序可以更快地被用户采用,开发人员不必等待我使用百分比达到可接受的水平。他们可以放心地使用特性和api,而不必加载jquery或polyfill。

第三个原因是internet explorer用户量越来越少。ie一直是世界各地web开发人员的祸根。IE特有的漏洞是出了名的普遍,而且由于IE是21世纪的主流浏览器,并且缺乏永久性的更新,旧版本顽固地挂在那里。

微软加快了IE的速度,在2016年结束了对IE 10及以下版本的支持,将IE 11作为最后一个支持版本。越来越普遍的是,web开发人员有幸忽视了ie的兼容性。

甚至jquery在2013年2.0版发布时也放弃了对ie 8及其以下版本的支持。虽然像传统网站这样的特殊情况仍然需要IE,但这种情况越来越少见。

新框架

自jquery发布以来,出现了大量的web框架,其中一些当前的领先者是react、angular和vue。与jquery相比,这些框架有两个显著的优势。

首先,它们可以很容易地将ui分解为组件。它们被设计用来处理页面的呈现和更新。jquery通常只用于更新页面,依赖服务器提供初始页面。

另一方面,react、angular和vue组件允许html、代码甚至css之间的紧密耦合。同样,我们可以将一个代码库分解为多个自包含的函数和类,将一个ui分解为可重用的组件使得构建和维护一个复杂的网站更加容易。

第二个优点是,较新的框架鼓励声明式规范,在这种规范中,开发人员描述ui应该是什么样的,并将其留给框架来进行必要的更改。这种方法与以jquery代码为特征的命令式方法相反。

使用jquery,您可以显式地编写进行任何更改的步骤。对于声明性框架,你可以说,“基于这些数据,这就是ui应该呈现的样子。”这可以显著减少编写多余的代码。

开发人员采用了这些新的方法来构建网站,降低了jquery的相关性。

何时使用jquery

那么我们什么时候应该选择使用jquery呢?

如果所讨论的项目预计会变得越来越复杂,那么最好选择一个不同的库或框架开始,它将允许您从容地处理这种复杂性,例如将ui分解为组件。对这样一个网站使用jquery一开始可以很好,但它可以很快变的越来越复杂,在这里您不确定什么代码会影响页面的哪些部分。

我以前处理过这个问题,每当你想改变的时候,这种情况就会产生一种不安的感觉。很难确定没有中断任何内容,因为jquery选择器依赖于服务器生成的html结构。

另一方面,你有一个简单的网站,只需要少量的交互性或动态内容。对于这些情况,我仍然建议不使用jquery,因为我们现在可以使用本机api做更多的事情。

即使我确实需要更强大的功能,我也会为这个用例寻找一个特定的库,比如Axios forAJAX或animate.css for animations。使用这样的库通常比为jquery的一点功能加载整个jquery更轻量级。

我认为使用jquery的最好理由是它提供了为网站前端提供便捷的全面功能。不必学习所有各种本地api或特殊用途的库,只需阅读jquery文档,就可以立即提高工作效率。

它的命令式方法不能很好地扩展,但是它比其他库的声明式方法更容易学习。对于一个范围明显有限的网站来说,加入jquery并继续前进是合理的;它不需要任何复杂的构建或编译过程。

那么,jquery是一个很好的选择,因为您有理由相信网站不会变得更加复杂,而且您不想使用本机功能,因为本机功能肯定比同等的jquery代码更加冗长。

当你必须支持旧版本的ie时,在这种情况下,jquery是明智的选择。

期待

jquery不会很快离开。它正在进行积极的开发,很多开发人员甚至在有本机方法可用时也喜欢使用它的api。

它帮助一代开发人员创建了可以在每个浏览器上工作的网站。尽管jquery在许多方面被新的库、框架和范例所取代,但它在web发展方面发挥了巨大的积极作用。

除非jquery功能发生重大变化,否则jquery在未来几年中的使用率会继续缓慢而稳定地下降。新的网站往往从一开始就使用更现代的框架来构建,jquery的使用场景会变得越来越少。

有些人对web开发工具的流失率感到不满,但对我来说,这是一个快速进步的迹象。jquery给了我们更好的做事方法。它的继任者也这样做了。

原文链接:

https://blog.logrocket.com/the-history-and-legacy-of-jquery/