jQuery的历史和传承


jQuery是世界上最受欢迎的 JavaScript库。 Web开发人员社区在2000年代后期创建了它,导致出现了在后台使用jQuery的丰富的站点,插件和框架生态系统。

但是近年来,它作为Web开发的主要工具的地位已经动摇。 让我们看看为什么jQuery变得流行起来,为什么它已经过时,以及在什么情况下仍建议使用它来创建现代网站。

jQuery的简要历史


John Resig于2005年创建了该库的第一个版本,并于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 used if ( 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.readyState is valid jQuery.safariTimer = setInterval(function(){ // loaded and complete are both valid states if ( document.readyState == "loaded" || document.readyState == "complete" ) { // If either one are found, remove the timer clearInterval( jQuery.safariTimer ); jQuery.safariTimer = null; // and execute any waiting functions jQuery.ready(); } }, 10); } 

多亏了jQuery,开发人员可以将所有这些陷阱的关注转移到库开发团队的肩上。

后来,JQuery促进了更复杂技术的实现,例如动画和Ajax。 该库实际上已变成标准的网站依赖项。 如今,它提供了大量Internet工作。 W3Techs估计, 如今74%的网站使用jQuery

对jQuery开发的控制也变得更加形式化。 在2011年,该团队创建了jQuery Board 。 2012年,jQuery董事会转变为jQuery Foundation

2015年,jQuery基金会与Dojo基金会一起创建了JS基金会 ,然后在2019年与Node.js基金会合作创建了OpenJS基金会 ,其中jQuery是“ 棘手的项目之一

情况变化


但是,近年来jQuery 越来越流行 。 GitHub 从其站点的前端删除了该库 。 Bootstrap v5将摆脱jQuery,因为它是“ 常规JavaScript的最大客户端依赖项 ”(目前为30 Kb,已缩小并打包)。 Web开发中的几种趋势削弱了jQuery作为必要工具的地位。

浏览器


由于多种原因,浏览器的差异和限制已变得不那么重要。 首先,标准化程度有所提高。 主要的浏览器开发人员(Apple,Google,Microsoft和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); }); 

querySelectorquerySelectorAll方法复制了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'); 

您可能不需要jQuery”网站列出了更多情况,您可以用本机代码替换jQuery代码。 一些开发人员始终坚持使用jQuery,因为他们只是不了解新的API,但是一旦发现,他们就会开始较少地使用该库。

使用本机功能可以提高页面性能。 现在,许多jQuery动画效果都可以使用CSS 更加有效地实现。

第二个原因是因为浏览器的更新速度比以前快得多。 除Apple Safari之外,大多数其他产品都有“常绿”更新策略 。 它们可以在没有用户参与的情况下在后台进行更新,并且与操作系统更新无关。

这意味着新的浏览器功能和错误修复正在以更快的速度传播,并且开发人员无需等到“ 我可以使用”共享达到可接受的水平。 他们可以放心使用新功能和API,而无需加载jQuery或多文件。

第三个原因是Internet Explorer处于完全不相关的状态。 IE长期以来一直是世界各地Web开发的祸害。 它的典型错误很普遍,并且由于IE在2000年代占据主导地位并且没有使用“常绿”更新策略,因此其旧版本仍然很常见。

2016年,Microsoft通过停止对第十个或更早版本的支持,从而限制了对IE 11的支持,从而加速了IE的退役。并且,越来越多的Web开发人员可以无视IE的兼容性。

自2013年发布2.0版本以来,甚至jQuery也不再支持IE 8和更低版本 。 而且,尽管在某些情况下,例如在较旧的站点上仍需要对IE的支持,但是这些情况越来越少。

新框架


自从jQuery问世以来,已经创建了许多框架,包括ReactAngularVue的现代领导者。 与jQuery相比,它们具有两个重要优势。

首先,它们使将用户界面拆分为组件变得容易。 该框架旨在处理渲染和页面刷新。 jQuery通常仅用于更新,将提供起始页面的任务委托给服务器。

另一方面,React,Angular和Vue组件使您可以紧密链接HTML,代码甚至CSS。 当我们将代码库分为许多独立的函数和类时,将接口拆分为可重用组件的能力简化了复杂站点的组装和维护。

第二个优点是,较新的框架遵循声明性范式,在该范式中,开发人员描述了界面的外观,并委托框架进行所有必要的更改以实现所需的框架。 这种方法与jQuery代码的命令式方法特性背道而驰。

在jQuery中,您明确规定了进行任何更改的步骤。 然后在声明性框架中说:“根据这些数据,接口应如下所示。” 这可以极大地方便编写没有错误的代码。

开发人员已经采用了新的网站开发方法,这就是jQuery流行度下降的原因。

何时使用jQuery?


那么什么时候应该使用 jQuery呢?

如果项目的复杂性会增加,最好从另一个库或框架开始,该库或框架可以使您有意义地管理复杂性。 例如,将接口划分为组件。 刚开始在此类站点中使用jQuery看起来可以接受,但是当您不确定哪个片段会影响页面的哪一部分时,它将很快导致产生意大利面条代码。

我一直处在这样的情况下,当我尝试进行任何更改时,都会感到很难完成任务。 您无法确定不会破坏任何内容,因为jQuery选择器取决于服务器创建的HTML结构。

规模的另一端是简单的站点,只需要一点交互性或动态内容。 在这种情况下,默认情况下我不会使用jQuery,因为使用本机API可以完成更多工作。

即使我需要更强大的功能,我也会寻找专门的库,例如axios用于Ajax或Animate.css用于动画。 这比加载所有jQuery的一些功能要容易得多。

我认为使用jQuery的最佳理由是它为前端站点提供了全面的功能。 无需学习各种本机API或专用库,您只需阅读jQuery文档,您将立即开始工作。

命令式方法不能很好地扩展,但是比其他库的声明式方法更易于学习。 对于功能明显受限的网站,最好使用jQuery并安静地工作:该库不需要复杂的汇编或编译。

另外,如果您确定站点不会随着时间的推移而变得复杂,并且如果您不关心本机功能,那么jQuery很有用。当然,本机功能比jQuery需要编写更多的代码。

如果需要支持IE的较早版本,也可以使用此库。 然后jQuery将在IE是最受欢迎的浏览器的时代为您服务。

展望未来


jQuery不会很快消失。 它正在积极地进行开发 ,并且即使具有本机方法的可用性,许多开发人员仍喜欢使用其API。 该库帮助整个开发人员创建了可在任何浏览器上运行的网站。 尽管jQuery在许多方面已被新的库,框架和范例所取代,但jQuery在创建现代Web方面发挥了巨大的积极作用。

如果jQuery的功能没有显着变化,则在未来几年内,该库的使用可能会继续缓慢但稳步下降。 新网站通常是从一开始就使用更现代的框架创建的,适合的jQuery使用场景正变得越来越少。

有人不喜欢Web开发工具的过时强度,但是对我来说,这是快速发展的证据。 jQuery使我们可以做得更好。 她的继任者也是如此。

Source: https://habr.com/ru/post/zh-CN468169/


All Articles