专栏首页京程一灯都9102年了,还需要用到 jQuery 吗?[每日前端夜话0xB4]

都9102年了,还需要用到 jQuery 吗?[每日前端夜话0xB4]

介绍

关于 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 中选择一些东西,我们通常会这样做:

// 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 有助于快速制作原型并立即完成新功能,因此你无需对其进行深入了解即可完成任务。通过使用文档【https://learn.jquery.com/】就可以立即获得工作原型。
  • 用原生 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 以及在项目中用它实现一些基本的功能(技多不压身)。文档能够帮你很快入门。

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery导致的XSS跨站漏洞

    昨天早上一看到报的问题就惊呆了,还能好好用JQ吗?今日早读文章由@我是离心授权分享。

    疯狂的技术宅
  • 只会用jQuery前端到底low不low?

    如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读,因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的...

    疯狂的技术宅
  • 使用 TypeScript 和依赖注入实现一个聊天机器人[每日前端夜话0x76]

    类型和可测试代码是避免错误的两种最有效方法,尤其是代码随会时间而变化。我们可以分别通过利用 TypeScript 和依赖注入(DI)将这两种技术应用于JavaS...

    疯狂的技术宅
  • 【深入浅出jQuery】源码浅析--整体架构

    Sb_Coco
  • 强烈推荐:240多个jQuery插件

    概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后...

    hbbliyong
  • 一个小时学会jQuery

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

    张果
  • 前端基础-jQuery简介

    JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

    cwl_java
  • jQuery架构设计与实现(2.1.4版本)

    貟王軍
  • 我们到底需不需要 jQuery

    曾经,在那个 IE6 还是主流浏览器的时代,为了实现稍微复杂一点的功能,也需要很多代码。如果要做到兼容主流浏览器,更需大费周章。当 jQuery 出现后,使用 ...

    用户2930719
  • Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

    2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

    芋道源码

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动