都9102年了,还需要用到 jQuery 吗?[每日前端夜话0xB4]
疯狂的技术宅 前端先锋
每日前端夜话0xB4 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:3348 字 预计阅读时间:13 分钟 作者:Anjolaoluwa Adebayo-Oyetoro 翻译:疯狂的技术宅 来源:logrocket
介绍
关于 jQuery 这个流行的 JavaScript 库如何死亡的问题一直在不断的被讨论。
随着现代库和框架的出现,浏览器 API 的标准化以及需要 jQuery 技能的职位减少,开发人员仍然需要继续学习 jQuery 吗。
在本文中,我将介绍 jQuery 的历史、优点、缺点以及为什么你仍要用它。
什么是jQuery?
根据 jQuery 的官方文档:
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过易于使用的API在大量浏览器中运行,使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 变得更加简单。通过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。
基本上它是一个 JavaScript 库,它使在访问 DOM 的同时对 DOM 操作成为可能,并能在旧浏览器中用 JavaScript 执行某些几乎不可能做到的操作。它使编写 JavaScript 和 HTML 变得更容易,更简单。
在2008年9月微软和诺基亚宣布公众对它的支持时【https://blog.jquery.com/2008/09/28/jquery-microsoft-nokia/】,库的流行度有所提高,直到现在,它仍然在开发者的 JavaScript 库和框架中保持领先地位。许多著名的公司和库使用 jQuery 作为依赖(GitHub,Bootstrap 5)。
jQuery 能够提供什么?
- 遍历 DOM - jQuery 使遍历 DOM 变得更容易(因为没有标准的方法)。在旧浏览器中遍历 DOM 是一件复杂的事情。
- 操作DOM元素 - jQuery 通过使用选择器引用目标元素并包含应用所需更改的方法,可以更轻松地更改元素的样式和行为。
- 动画元素 - 动画页面内容是 jQuery 的主要卖点之一。
- 更好的HTTP请求 - jQuery 的 AJAX 方法 能够轻松处理HTTP请求,这获得了许多粉丝。在 JavaScript 中发出 HTTP 请求的旧方法 —— 使用XMLHttpRequest(XHR) 是一个繁琐的过程。
- 跨浏览器兼容性问题的解决方案 - jQuery 的主要卖点是其跨浏览器兼容性问题的解决方案。旧浏览器的工作方式是完全不同的,因为没有标准的处理方式,开发人员必须进行多次检查以确保 JavaScript 在IE、Firefox、Opera、Safari 和 Chrome 中正确运行。jQuery 确保无论用户使用哪种浏览器都能正确呈现网页。
- 大量的文档 - jQuery的文档,资源及其生态系统可以帮助开发人员从新手很快升级到专家。jQuery 是开源的(任何人都可以贡献、修改代码或建议更新的功能),它在互联网上有一个非常大的用户社区【https://forum.jquery.com/】。
为什么开发人员仍然使用jQuery?
它有一些很好的功能,人们觉得有用。其中包括:
- jQuery 有一个可扩展的插件系统 - jQuery 有一个即插即用插件系统。你所需要做的就是下载插件并使用或自定义它们来满足你的需求。
- “Write less, do more“ - 正如其标语中所述,使用 jQuery,你可以用更少的代码行完成更多工作。各种复杂的操作都很容易完成,它鼓励编写模块化代码。
- jQuery提供简单性 - jQuery 不需要学习任何依赖知识。它具有较低的学习曲线,并且比较容易让人在很短的时间内学会并成为它的专家。它满足了开发人员和设计人员的需求,因为它大大减少了构建时间。
- 跨浏览器兼容性 - jQuery 支持旧浏览器,它们与现代工具、框架或库不相容。jQuery 驱动的应用适用于所有浏览器。
- jQuery 是稳定的 - 它是稳定的,因为有一个专门团队,他们自愿将该工具保持在最佳状态生态系统。
开发人员对 jQuery 的吐槽
使用 jQuery 需要付出一定的成本:
- 渲染性能 - jQuery 为了实现大量很棒的功能牺牲了性能。它使网站变得更慢,因为它不断地直接操作 DOM ,并在处理我们的代码之前加载整个库,这通常会导致延迟。在一些简单的或普通的网站中,性能缓慢几乎不会引起注意,并且可能是为了更多功能所做的折衷,但是在每一毫秒都很重要的大型复杂网站中,jQuery 一般会降低此类网站的性能。
- 相对易用性 - jQuery 的一个缺点是很容易写出面条代码。由于对 jQuery 的选择链使用不当,使用非描述性变量名并尝试编写复杂函数时,jQuery 可能会导致写出最终无法维护的代码。
- 增加了包大小 - 当被压缩时,其大小为 86.1 Kb 或 28 kb,jQuery 为你的网站增加了更多的大小,即使大多数情况下只需要其中一部分功能。
- 现代浏览器和不断发展的 Web 趋势 - 尽管 jQuery 解决了大量跨浏览器兼容性问题以及标准化问题,但是因为对 Web 浏览器进行了改进,现在大部分已经没有必要了。最引人注目的是 ECMAScript 2015 (即ES6)的引入,新框架和专用库的创建,这些都使 jQuery 严重过时。
jQuery 死了吗?
根据 BuiltWith 的数据显示,jQuery 为世界上前 100 万个网站中的79%提供了支持,而且有65% 的 JavaScript 库依赖它【https://trends.builtwith.com/websitelist/jQuery】。
它仍受欢迎的一个原因是许多项目仍然依赖它(例如:Bootstrap 4.0 及以下版本,大量的 WordPress 插件和主题都是使用 jQuery 构建的)并且还有许多依赖 jQuery 的遗留代码库。
jQuery 函数的现代替代品
下面是一些 jQuery 流行函数的替代品。
DOM 选择
要在 jQuery 中选择一些东西,我们通常会这样做:
1// The selector name can be replaced with either an ID, a Class name or tag name
2$("selectorName") // #selectorName or .selectorName
这可以通过使用 HTML5 DOM API 来实现:
1document.querySelector("selectorName") //gets a single item
或者
1document.querySelectorAll("selectorName") //gets a group of items
DOM 操作
.append() 方法将括号内的内容插入到选择器指定的元素的末尾。
1$("selectorName").append( "Your content goes here")
与它等价的原生 js 代码可以像这样:
1let element = document.querySelector('selectorName');
2let text = document.createTextNode("your content");
3element.appendChild(text);
.addClass()方法把指定的类添加到由选择器指定的元素集中的每个元素。
1$('selectorName').addClass('className');
与它等价的原生 js 代码:
1let element = document.querySelector("selectorName");
2element.classList.add('className')
Events
侦听 click 事件:
1$('selectorName').on('click',function(e) {
2 //do something
3});
与它等价的原生 js 代码:
1let clickedMe = document.querySelector('button');
2
3clickedMe.addEventListener('click', (e) => {
4 //do something
5})
HTTP 请求
jQuery Ajax HTTP 请求是这样的:
1$.ajax({
2 url: 'http://example.com/movies.json',
3 type: 'GET'
4 success: (response) => {
5 console.log(response)
6 }
7 error: (errors) => {
8 console.log(error)
9 }
10})
这可以用 JavaScript fetch API 替换,该 API 允许你发出异步请求。它将数据作为“Promise”返回。
Fetch
1fetch('http://example.com/movies.json',
2 {method: 'GET',
3 headers: {'Content-Type': 'application/json'},
4 }){
5 .then(response => response.json())
6 .catch(error => console.log(error))
7 }
虽然 Fetch 比 AJAX 更好,但它们是不一样的,因为 Fetch 使用 promise,并且返回的 promise 不会拒绝 HTTP 状态错误。Fetch 也不会从服务器发送或接收 cookie。
HTTP 请求也可以使用像 axios 这样的专用库来实现。
Axios 是一个基于 Promise 的开源库,用于发出 HTTP 请求。
要使用 axios,你可以通过 npm 安装:
1npm install axios --save-dev
然后你可以在自己的文件中导入它,如下所示:
1import axios from 'axios'
你也可以使用 axios 的 CDN 。
1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
实现
1axios({
2 method: 'get',
3 url: 'http://example.com/movies.json',
4 responseType: 'json'
5})
6 .then(function (response) {
7 });
浏览器支持和兼容性
要想在不同浏览器中支持你的应用或网站,以及在旧版浏览器上工作,可以使用转换工具,例如Babel 将 ES6 代码转换为与浏览器兼容的代码,可以在 polyfills 的帮助下通过浏览器了解特定功能以及其他工具,如 Autoprefixer 、PostCSS 等。
动画
jQuery 中的动画是通过 .animate 方法实现的。
1$(selectorName).animate(
2 {parameters},
3 speed,
4 callback
5);
通过使用 CSS 动画可以实现网站上的动画内容。
@keyframes 是一个用于动画内容的重要工具,用来定义要在舞台上应用的样式以及 animation 属性或其子属性,它被绑定到选择器,指定如何用关键帧样式及其应用的时机。
1p{
2 animation-name: animated;
3 animation-duration: ;
4}
5
6@keyframes animated{
7 0% {
8 opacity: 0;
9 }
10
11 50% {
12 opacity: 1;
13 }
14 100% {
15 opacity: 0;
16 }
17}
也可以使用 animate.css 之类的库来实现动画。
jQuery 与现代前端库和框架进行比较
jQuery 被较少使用的一个主要原因是 JavaScript 库和框架(例如ReactJS、AngularJS 和 VueJS)的兴起,在本节中我们将看看它们的区别。
为什么在2019年你可能仍会使用 jQuery
- 在设计原型产品时 - 由于 jQuery 有助于快速制作原型并立即完成新功能,因此你无需对其进行深入了解即可完成任务。通过使用文档【https://learn.jquery.com/】就可以立即获得工作原型。
- 用原生 js 制作动画内容仍然比较困难。如果你的项目需要大量动画,jQuery 可能是一个合适的选项,因为有大量可自定义的插件能够帮助补充易于使用的 .animate 方法。
- 为多个浏览器构建。如果你正在构建一个可以无缝地在多个浏览器上运行的网站或 Web 应用,那么 jQuery 可能最适合你的需求。它支持所有现代浏览器并在解叉兼容性问题方面做得更好,它还解决了 IE6 等旧浏览器的问题。
- bootstrap 小项目和不需要框架的简单站点。
- 使用 jQuery 构建的遗留代码库时。
如何在2019年使用jQuery
要在项目中使用jQuery,有几种方法可以入门。
在撰写本文时的最新版本是 3.4.1 压缩的生产版本或未压缩的开发版本。
你可以将它包含在项目中,如下所示:
1<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
作为替代方案,你可以使用包管理器:
1npm install jquery
2或者
3yarn add jquery
并像这样导入:
1import * as jQuery from 'jquery';
或者在项目中使用 CDN版本:
Google CDN
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Microsoft CDN
1<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"> </script>
结论
虽然趋势显示了开发人员从 jQuery 迁移到更新的库和框架的转变,但是它仍然非常活跃并且被积极使用,因为它与原生方法相比更容易实现你所要的功能。
技能需求率低也表明用更新的库或框架可能会更好,因为有更多的就业机会。
我建议学习 jQuery 以及在项目中用它实现一些基本的功能(技多不压身)。文档能够帮你很快入门。
原文:https://blog.logrocket.com/using-jquery-in-2019/