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

时间 2019-11-06

标签 9102年还须用到 jquery 栏目 JQuery 繁體版

原文原文链接

做者：Anjolaoluwa Adebayo-Oyetoro
翻译：疯狂的技术宅javascript

原文：https://blog.logrocket.com/us...css

未经容许严禁转载html

介绍

关于 jQuery 这个流行的 JavaScript 库如何死亡的问题一直在不断的被讨论。前端

随着现代库和框架的出现，浏览器 API 的标准化以及须要 jQuery 技能的职位减小，开发人员仍然须要继续学习 jQuery 吗。java

在本文中，我将介绍 jQuery 的历史、优势、缺点以及为何你仍要用它。jquery

什么是jQuery？

根据 jQuery 的官方文档：ios

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它经过易于使用的API在大量浏览器中运行，使得 HTML 文档遍历和操做、事件处理、动画和 Ajax 变得更加简单。经过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

基本上它是一个 JavaScript 库，它使在访问 DOM 的同时对 DOM 操做成为可能，并能在旧浏览器中用 JavaScript 执行某些几乎不可能作到的操做。它使编写 JavaScript 和 HTML 变得更容易，更简单。git

在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？

它有一些很好的功能，人们以为有用。其中包括：github

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

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

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...