乐趣区

都9102年了还需要用到-jQuery-吗

作者: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&amp;default-tab=result&amp;user=jola_adebayor&amp;slug-hash=OeGpNE&amp;pen-title=OeGpNE&amp;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 个方案及实现

  • 更多文章 …
退出移动版