作者:Anjolaoluwa Adebayo-Oyetoro
翻译:疯狂的技术宅
原文:https://blog.logrocket.com/us…
未经允许严禁转载
介绍
关于 jQuery 这个流行的 JavaScript 库如何死亡的问题一直在不断的被讨论。
随着现代库和框架的出现,浏览器 API 的标准化以及需要 jQuery 技能的职位减少,开发人员仍然需要继续学习 jQuery 吗。
在本文中,我将介绍 jQuery 的历史、优点、缺点以及为什么你仍要用它。
什么是 jQuery?
根据 jQuery 的官方文档:
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过易于使用的 API 在大量浏览器中运行,使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 变得更加简单。通过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。
基本上它是一个 JavaScript 库,它使在访问 DOM 的同时对 DOM 操作成为可能,并能在旧浏览器中用 JavaScript 执行某些几乎不可能做到的操作。它使编写 JavaScript 和 HTML 变得更容易,更简单。
在 2008 年 9 月微软和诺基亚宣布公众对它的支持时,库的流行度有所提高,直到现在,它仍然在开发者的 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 是开源的(任何人都可以贡献、修改代码或建议更新的功能),它在互联网上有一个非常大的用户社区。
为什么开发人员仍然使用 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 库依赖它。
它仍受欢迎的一个原因是许多项目仍然依赖它(例如:Bootstrap 4.0 及以下版本,大量的 WordPress 插件和主题都是使用 jQuery 构建的)并且还有许多依赖 jQuery 的遗留代码库。
jQuery 函数的现代替代品
下面是一些 jQuery 流行函数的替代品。
DOM 选择
要在 jQuery 中选择一些东西,我们通常会这样做:
// The selector name can be replaced with either an ID, a Class name or tag name
$("selectorName") // #selectorName or .selectorName
这可以通过使用 HTML5 DOM API 来实现:
document.querySelector("selectorName") //gets a single item
或者
document.querySelectorAll("selectorName") //gets a group of items
DOM 操作
.append()
方法将括号内的内容插入到选择器指定的元素的末尾。
$("selectorName").append("Your content goes here")
与它等价的原生 js 代码可以像这样:
let element = document.querySelector('selectorName');
let text = document.createTextNode("your content");
element.appendChild(text);
.addClass()
方法把指定的类添加到由选择器指定的元素集中的每个元素。
$('selectorName').addClass('className');
与它等价的原生 js 代码:
let element = document.querySelector("selectorName");
element.classList.add('className')
Events
侦听 click
事件:
$('selectorName').on('click',function(e) {//do something});
与它等价的原生 js 代码:
let clickedMe = document.querySelector('button');
clickedMe.addEventListener('click', (e) => {//do something})
HTTP 请求
jQuery Ajax HTTP 请求是这样的:
$.ajax({
url: 'http://example.com/movies.json',
type: 'GET'
success: (response) => {console.log(response)
}
error: (errors) => {console.log(error)
}
})
这可以用 JavaScript fetch
API 替换,该 API 允许你发出异步请求。它将数据作为“Promise”返回。
Fetch
fetch('http://example.com/movies.json',
{method: 'GET',
headers: {'Content-Type': 'application/json'},
}){.then(response => response.json())
.catch(error => console.log(error))
}
虽然 Fetch 比 AJAX 更好,但它们是不一样的,因为 Fetch 使用 promise,并且返回的 promise 不会拒绝 HTTP 状态错误。Fetch 也不会从服务器发送或接收 cookie。
HTTP 请求也可以使用像 axios
这样的专用库来实现。
Axios 是一个基于 Promise 的开源库,用于发出 HTTP 请求。
要使用 axios,你可以通过 npm 安装:
npm install axios --save-dev
然后你可以在自己的文件中导入它,如下所示:
import axios from 'axios'
你也可以使用 axios 的 CDN。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
实现
axios({
method: 'get',
url: 'http://example.com/movies.json',
responseType: 'json'
})
.then(function (response) {});
浏览器支持和兼容性
要想在不同浏览器中支持你的应用或网站,以及在旧版浏览器上工作,可以使用转换工具,例如 Babel 将 ES6 代码转换为与浏览器兼容的代码,可以在 polyfills 的帮助下通过浏览器了解特定功能以及其他工具, 如 Autoprefixer、PostCSS 等。
动画
jQuery 中的动画是通过 .animate
方法实现的。
$(selectorName).animate({parameters},
speed,
callback
);
通过使用 CSS 动画可以实现网站上的动画内容。
@keyframes
是一个用于动画内容的重要工具,用来定义要在舞台上应用的样式以及 animation
属性或其子属性,它被绑定到选择器,指定如何用关键帧样式及其应用的时机。
p{
animation-name: animated;
animation-duration: ;
}
@keyframes animated{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
<iframe name=”cp_embed_1″ src=”https://codepen.io/jola_adeba…;amp;theme-id=0&default-tab=result&user=jola_adebayor&slug-hash=OeGpNE&pen-title=OeGpNE&name=cp_embed_1″ scrolling=”no” frameborder=”0″ height=”344″ allowtransparency=”true” allowfullscreen=”true” allowpaymentrequest=”true” title=”OeGpNE” class=”cp_embed_iframe ” id=”cp_embed_OeGpNE” style=”box-sizing: inherit; max-width: 100%; width: 730px; overflow: hidden; display: block;”></iframe>
也可以使用 animate.css
之类的库来实现动画。
jQuery 与现代前端库和框架进行比较
jQuery 被较少使用的一个主要原因是 JavaScript 库和框架(例如 ReactJS、AngularJS 和 VueJS)的兴起,在本节中我们将看看它们的区别。
jQuery | React JS | Angular JS | Vue JS | |
---|---|---|---|---|
类型 | 库 | UI 库 | 全功能框架 | 在库和功能齐全的框架之间进行扩展。 |
结构体系 | 模块化 | 基于组件的库,仅处理应用的View | 完善的基于组件的 MVC 框架 | 基于组件,侧重于 MVVM 模式的 ViewModel 层 |
DOM 交互 | 直接更新 DOM | 使用与真实 DOM 连接的虚拟 DOM | 直接更新 DOM | 使用与真实 DOM 连接的虚拟 DOM |
数据绑定 | 带插件的数据绑定方法实现双向数据流 | 单向数据流 | 用 ngModel 可以实现双向数据绑定 | 响应式数据绑定系统可以使用 V-model 实现双向数据 |
状态管理 | 可以使用专门的库来实现 | Context API,Redux | 第三方库,如 NGRX,NGXS 等 | Vuex |
模板 | JavaScript | JavaScript(JSX) | TypeScript 和 Angular 指令 | HTML,CSS,JavaScript 和 Vue 指令 |
学习曲线 | 低 | 低,但需要较高水平的 JavaScript 知识 | 高 | 仅需要 JavaScript 的基础知识即可入门 |
为什么在 2019 年你可能仍会使用 jQuery
- 在设计原型产品时 – 由于 jQuery 有助于快速制作原型并立即完成新功能,因此你无需对其进行深入了解即可完成任务。通过使用文档就可以立即获得工作原型。
- 用原生 js 制作动画内容仍然比较困难。如果你的项目需要大量动画,jQuery 可能是一个合适的选项,因为有大量可自定义的插件能够帮助补充易于使用的
.animate
方法。 - 为多个浏览器构建。如果你正在构建一个可以无缝地在多个浏览器上运行的网站或 Web 应用,那么 jQuery 可能最适合你的需求。它支持所有现代浏览器并在解叉兼容性问题方面做得更好,它还解决了 IE6 等旧浏览器的问题。
- bootstrap 小项目和不需要框架的简单站点。
- 使用 jQuery 构建的遗留代码库时。
如何在 2019 年使用 jQuery
要在项目中使用 jQuery,有几种方法可以入门。
在撰写本文时的最新版本是 3.4.1 压缩的生产版本或未压缩的开发版本。
你可以将它包含在项目中,如下所示:
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
作为替代方案,你可以使用 包管理器:
npm install jquery
或者
yarn add jquery
并像这样导入:
import * as jQuery from 'jquery';
或者在项目中使用 CDN 版本:
Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Microsoft CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"> </script>
结论
虽然趋势显示了开发人员从 jQuery 迁移到更新的库和框架的转变,但是它仍然非常活跃并且被积极使用,因为它与原生方法相比更容易实现你所要的功能。
技能需求率低也表明用更新的库或框架可能会更好,因为有更多的就业机会。
我建议学习 jQuery 以及在项目中用它实现一些基本的功能(技多不压身)。文档能够帮你很快入门。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你提高开发效率的现代 CSS 框架
- 快速上手 BootstrapVue
- JavaScript 引擎是如何工作的?从调用栈到 Promise 你需要知道的一切
- WebSocket 实战:在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么?
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K,该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把 HTML 转成 PDF 的 4 个方案及实现
- 更多文章 …