都9102年了，还需要用到 jQuery 吗？

作者：Anjolaoluwa Adebayo-Oyetoro

翻译：疯狂的技术宅

原文：blog.logrocket.com/using-jquer…

未经允许严禁转载

介绍

关于 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;
  }
}

也可以使用 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 以及在项目中用它实现一些基本的功能（技多不压身）。 文档能够帮你很快入门。

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。