jQuery -
但近年来,它作为网络开发首要工具的地位已经被削弱。 让我们看看为什么 jQuery 变得流行,为什么它不再流行,以及在什么情况下仍然建议使用它来创建现代网站。
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');
随着时间的推移,选择机制变成了一个单独的库
该库的第二个优点是它抽象了浏览器之间的差异。 在那些年里,编写能够在所有浏览器中可靠运行的代码是很困难的。
缺乏标准化意味着开发人员需要考虑浏览器和边缘情况之间的众多差异。 看一眼
// 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)的实现变得更加容易。 该库实际上已成为网站的标准依赖项。 如今,它为互联网的很大一部分提供了动力。 W3Techs 认为
对 jQuery 开发的控制也变得更加正式。 2011年团队
2015 年,jQuery 基金会与 Dojo 基金会合并,
环境的变化
然而,近年来 jQuery
浏览器
由于多种原因,浏览器的差异和限制已经变得不那么重要了。 一是标准化程度有所提高。 主要浏览器开发商(Apple、Google、Microsoft 和 Mozilla)正在共同开发
尽管浏览器在许多重要方面仍然存在差异,但供应商至少有一种方法来搜索和创建通用数据库,而不是
// 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);
});
方法
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');
您现在可以使用操作元素类
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');
该网站
使用本机功能可以提高页面性能。 许多
第二个原因是浏览器的更新速度比以前快得多。 他们大多数都使用
这意味着新的浏览器功能和错误修复的分发速度要快得多,开发人员不必等到发布
第三个原因是 Internet Explorer 正接近完全无关紧要的状态。 IE 长期以来一直是世界各地 Web 开发的祸根。 它的错误很普遍,而且由于 IE 在 2000 年代占据主导地位并且没有使用常青更新策略,因此旧版本仍然很常见。
2016年,微软加速了IE的退役,
甚至 jQuery 也从 IE 8 开始停止支持 IE XNUMX 及以下版本
新框架
自从 jQuery 出现以来,已经创建了许多框架,包括现代的领导者
首先,它们使将用户界面分离为组件变得容易。 框架旨在处理页面呈现和更新。 而 jQuery 通常只用于更新,将提供初始页面的任务留给服务器。
另一方面,React、Angular 和 Vue 组件允许您紧密耦合 HTML、代码甚至 CSS。 正如我们将代码库划分为许多独立的函数和类一样,将界面划分为可重用组件的能力使得构建和维护复杂站点变得更加容易。
第二个优点是,最近的框架遵循声明性范例,其中开发人员描述界面应该是什么样子,并将其留给框架进行所有必要的更改以实现所需的效果。 这种方法与 jQuery 代码的命令式方法相反。
在 jQuery 中,您明确地写下进行任何更改的步骤。 在声明式框架中,您会说:“根据这些数据,界面应该如下所示。” 这可以使编写无错误的代码变得更加容易。
开发人员采用了新的网站开发方法,这就是 jQuery 受欢迎程度下降的原因。
何时使用 jQuery?
所以当 应该 使用 jQuery?
如果项目的复杂性增加,那么最好从另一个允许您有效管理复杂性的库或框架开始。 例如,将界面划分为组件。 在此类网站上使用 jQuery 起初可能看起来不错,但它很快就会导致意大利面条式代码,您不确定哪个片段影响页面的哪个部分。
我曾经遇到过这样的情况,当我试图做出任何改变时,感觉就像是一项艰巨的任务。 您不能确定不会破坏任何内容,因为 jQuery 选择器依赖于服务器生成的 HTML 结构。
另一方面是简单的网站,只需要一点交互性或动态内容。 在这些情况下我也不会默认使用 jQuery,因为您可以使用本机 API 做更多事情。
即使我需要更强大的东西,我也会寻找专门的库,例如
我认为使用 jQuery 的最佳理由是它为网站前端提供了全面的功能。 您无需学习各种本机 API 或专用库,只需阅读 jQuery 文档即可立即提高工作效率。
命令式方法的扩展性不好,但它比其他库的声明式方法更容易学习。 对于功能明显有限的站点,最好使用 jQuery 并冷静地工作:该库不需要复杂的组装或编译。
此外,如果您确信您的网站不会随着时间的推移而变得复杂,并且您不关心本机功能(这肯定需要编写比 jQuery 更多的代码),那么 jQuery 是不错的选择。
如果您需要支持旧版本的 IE,也可以使用此库。 然后 jQuery 将为您提供服务,就像 IE 是最流行的浏览器时代一样。
勘探
jQuery 不会很快消失。 她
除非 jQuery 的功能发生重大变化,否则该库的使用量在未来几年内可能会继续缓慢但稳定地下降。 新网站往往从一开始就使用更现代的框架来构建,适合 jQuery 的用例变得越来越少。
有些人不喜欢网络开发工具过时的速度,但对我来说,这是快速进步的证据。 jQuery 使我们能够把很多事情做得更好。 她的继任者也是如此。
来源: habr.com