为什么 jQuery 是停止使用 jQuery 的一个很好的提醒

作者：Shalitha Suranga✏️

jQuery 有着悠久且受人尊敬的历史，然而，其新版本的 jQuery v4 beta 已经发布，并没有为现代 Web 开发人员带来任何有趣的功能。现在是停止使用 jQuery 的好时机有几个原因：

1. 现代浏览器和原生 JavaScript API 现在原生支持 jQuery 提供的所有功能，使其变得多余，并且其实用功能已过时
2. 与本机实现相比，使用 jQuery 不必要地增加了 Web 应用程序包的大小并降低了性能
3. jQuery 4 的发布证实了它的过时，缺乏重要的新功能，专注于生存，并强调原生 JavaScript 和现代框架已经超越了它。
4. jQuery 向 ES 模块的迁移以及 jQuery 4 中现代实践的采用，对于 Web 开发人员来说并没有增加任何新内容
5. 将 jQuery 与 React、Vue 和 Angular 等现代前端框架一起使用可能会与其架构和编码建议发生冲突
6. 现代前端框架使用 polyfill 发出生产代码，因此开发人员无需使用 jQuery API 为旧版浏览器创建网页

我们将更详细地探讨这些要点，并通过将其可用功能与本机 JavaScript Web API 进行比较，深入探讨 jQuery v4 为何结束了长达十年的旅程。

v4之前的jQuery黄金时代

从前端 Web 开发开始，开发人员就使用 JavaScript 通过动态更新 HTML 元素来实现用户友好的 Web 前端。

在 2000 年代初期，还没有像 React 这样功能齐全、基于组件的现代前端开发库，浏览器也没有提供动画等高级 CSS 功能和高级、开发人员友好、功能齐全的 CSS 功能。 DOM 操作 API，因此开发人员必须使用现有的 Web API 编写许多代码行来构建 Web 前端 - 他们甚至必须编写代码来解决浏览器与 AJAX 通信 API 的兼容性问题。

jQuery 通过提供 DOM 操作的速记函数和跨浏览器 AJAX API 解决了这些问题，因此每个 Web 开发人员都在他们的 Web 应用程序中包含了 jQuery 脚本。

正如今天每个人都推荐基于组件的前端框架一样，jQuery 是 2000 年代中期创建动态 Web 前端最受推荐的方法，当时 jQuery 的使用在其衰落之前达到了顶峰：

官方 Bootstrap 3.4 网站使用来自官方 CDN 的 jQuery

2000 年代中期，jQuery v1 到 v3 用于：

• 每个流行的网站 HTML 模板，用于实现滑块、图片库等
• 通过 Internet Explorer 支持进行 DOM 操作和进行 HTTP/AJAX 调用的 Web 应用
• Bootstrap 来实现模态框、下拉菜单等组件。
• 用于 DOM 操作的每个动态 WordPress 模板和插件

随着 v4 的发布，jQuery 的状态

jQuery 于 2024 年 2 月发布了第一个测试版，并于 7 月发布了第二个测试版  —  代码库维护人员计划很快发布候选版本。 jQuery v4 版本有以下主要变化：

• 不再支持 IE 10 及更早版本的网络浏览器
• 删除了已弃用的方法，例如 jQuery.isArray()
• 支持使用通过 Trusted Types API 创建的 HTML 内容
• 支持在 AJAX 方法中使用原生 JavaScript 二进制数据
• jQuery 代码库已通过 Rollup 捆绑程序从 AMD（requirejs 模块）迁移到 ES 模块

随着 jQuery v4 beta 的发布，它尝试通过使用 ES 模块来现代化其代码库，并通过放弃 IE 10 支持来减少包大小。您可以从这篇官方博客文章中了解有关即将发布的 jQuery v4 版本的更多信息。

为什么 jQuery v4 证实了它的失败

jQuery v4 beta 的发布确实并不是停止关注 jQuery 的原因，但 v4 版本所显示的增长和未来证实了 jQuery 在现代 Web 技术中的衰落。当浏览器标准开始提供以开发人员生产力为中心的高级 DOM 操作功能和 CSS 中的高级功能（帮助开发人员在不使用 JavaScript 的情况下实现动态样式）时，这种情况就慢慢开始了。

jQuery v1 到 v3 无疑实现了浏览器本身不提供的跨浏览器开发人员友好的功能。例如，jQuery 的 Sizzle 选择器引擎帮助开发人员在浏览器实现 document.querySelectorAll() 之前查询 DOM 元素。而且，由于内置 AJAX API 的浏览器兼容性问题，$.ajax() 是以前开发人员的 fetch() 。

一个旧的 StackOverflow 答案，建议使用 jQuery 而不是旧的原生 Web API

在 jQuery v2 到 v3 期间，HTML、JavaScript、CSS 和 Web API 得到了大幅增强，并为 jQuery 功能提供了标准 API，从而使 jQuery 成为了过时的选择。

jQuery 试图通过遵守标准 API 来生存，例如在 v3 中支持标准 Promise 接口，并删除重复代码，但标准的浏览器功能赢得了现代开发人员的心。 jQuery 发布的 v4 不是带有功能，而是带有增强功能，以保持与现代 Web 技术的相关性。

jQuery v4 为您带来了 27kb gzip 压缩包增量，用于您的 Web 浏览器本机附带 0kb 客户端 JavaScript 代码的功能！

jQuery 与本机浏览器 API

让我们并排比较 jQuery 与本机浏览器 API 代码的几个开发需求，看看现代 Web API 如何使 jQuery 过时。

创建一个新的 HTML 文件并通过官方 CDN 链接 jQuery v4 beta 版本，如下开始：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

选择 DOM 元素

现代前端库和框架提供了用于访问 DOM 元素引用的 ref 概念，但是如果 Web 开发人员不依赖于特定的前端框架，则通常必须查询 DOM 元素。了解 document.querySelectorAll() 如何实现类似于 jQuery 的简单、原生 DOM 选择：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

结果：

使用 jQuery 和本机 Web API 通过 CSS 查询选择 DOM 元素

jQuery提供了closest()方法来遍历并为给定的选择器找到匹配的DOM节点。原生 DOM API 也使用 OOP 模式实现相同的方法：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

结果：

使用 jQuery 和本机 Web API 选择最接近的 DOM 元素

一些 jQuery 功能在现代标准 DOM API 中没有相同的速记替代品，但我们可以通过现代 JavaScript 功能有效地使用现有的 DOM API 方法。

例如，jQuery 支持非标准的 :contains(text) 选择器，因此我们必须使用 filter() 数组方法来实现它，如下所示：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

结果：

使用 jQuery 和本机 Web API 过滤包含特定文本段的元素

querySelectorAll() 方法利用现代 CSS 伪类的强大功能，为 jQuery find() 函数提供更好的本机替代方案。例如，我们可以使用 :scope 伪类来限制本​​机查询选择器调用的范围，类似于 jQuery find() 函数：

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

结果：

使用 jQuery 和本机 Web API 确定 DOM 元素选择器的范围

检索和更新 DOM 属性

类属性、特定于元素的属性和自定义数据属性是 Web 开发人员在开发 Web 应用程序时经常需要检索和更新的常见 HTML 属性。

过去，开发人员必须手动操作原生 className 属性来更新元素类名称，因此他们使用 jQuery 的 addClass()、removeClass() 和toggleClass() 预先开发的函数实现。但现在，原生 classList 对象实现了更好的类属性值处理支持：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

结果：

使用 jQuery 和本机 Web API 更新类属性值

同时， getAttribute() 和 setAttribute() 原生 DOM 方法成为众所周知的 jQuery attr() 简写函数的标准替代品：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

结果：

使用 jQuery 和本机 Web API 更改和检索 HTML 元素属性

jQuery 建议开发人员使用其 attr() 函数来设置自定义数据属性，但现在您可以使用内置的数据集属性来更高效地检索/修改数据属性，如下所示：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

结果：

使用 jQuery 和本机 Web API 更新自定义数据属性

DOM 元素操作

过去，大多数开发人员使用 jQuery 进行 DOM 操作，因为原生 DOM 操作 API 不提供以开发人员生产力为中心的功能。现在，每个现代标准 Web 浏览器都实现了高效、高级、内置的 DOM 操作支持。

创建和附加元素是 DOM 操作任务中最频繁的操作。以下是使用 jQuery 和本机 Web API 完成此操作的方法：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

结果：

使用 jQuery 和本机 Web API 来使用 before() 和 after() 函数

动画 DOM 元素

如果您是一位十多年前构建 Web 应用程序的经验丰富的 Web 开发人员，您就会知道 jQuery fadeIn()、fadeOut() 和 animate() 函数如何帮助您使 Web 应用程序更具交互性。这些动画函数甚至支持动画缓动以构建更流畅的动画。

原生 CSS 动画/过渡和 JavaScript Web 动画 API 使 jQuery 动画 API 过时。以下是如何使用标准 Web 动画 API 实现 fadeIn()：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

结果：

使用 jQuery 和本机 Web API 附加和删除事件处理程序

jQuery 和原生 DOM API 都提供了附加事件监听器的简写方法：

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery 还提供了 one() 函数来触发事件处理程序一次 — 现在每个标准 Web 浏览器都支持用于相同目的的一次选项：

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

与网络服务通信

过去的整体式 Web 应用程序经常向后端服务器发送 HTTP 请求，以获取包含更新数据的新页面  —  Web 应用程序会针对每个主要用户操作呈现整个页面。

后来，开发人员通过 AJAX 请求 HTML 内容来更新部分网页，从而制作出了更好的交互式 Web 应用程序。由于内置 AJAX API 的浏览器兼容性和生产力问题，他们使用 jQuery 发送 AJAX 请求。

现在开发人员可以使用标准的 fetch() 函数来代替 jQuery 的 AJAX 功能：

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

结果：

使用 jQuery 和本机 Web API 发送 HTTP 请求

如今，大多数开发人员使用 RESTful API 将数据源与表示层分离。 jQuery 提供了一种高效的速记函数，用于从 RESTful 服务获取 JSON 数据，但本机 fetch() 提供了更好的标准方法：

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

结果：

使用 jQuery 和本机 Web API 从 RESTful Web 服务请求 JSON 数据

实用功能

jQuery 提供各种预先开发的实用函数来节省 Web 开发人员的时间。如今，我们可以找到 jQuery v4 中存在的所有这些预先开发的实用函数的内置 ECMAScript 功能，如下表所列：

jQuery	Native replacement
`$.each()`	`Array.forEach()`
`$.extend()`	`Object.assign() or the spread operator`
`$.inArray()`	`Array.includes()`
`$.map()`	`Array.map()`
`$.parseHTML()`	`document.implementation.createHTMLDocument()`
`$.isEmptyObject()`	`Object.keys()`
`$.merge()`	`Array.concat()`

像 $.parseJSON() 这样的旧实用程序在过去的 jQuery 版本中已经被弃用，并在 v4 中被删除。

我可以将 jQuery 与 Vue、React 或 Angular 一起使用吗？

当现代应用程序开发前端库不存在时，Web 开发人员使用 jQuery。他们主要使用 jQuery 的 DOM 操作和 AJAX 功能来动态更新前端，而无需刷新整个网页。现在，现代前端框架/库中的 SPA（单页应用程序）开发技术让 Web 开发人员可以构建高度交互、结构良好、轻量级的 Web 应用程序，而无需使用老式的基于 AJAX 的渲染技术。

我们可以像任何流行的前端库/框架一样将 jQuery 与 Vue、React 和 Angular 一起使用，但不鼓励将 jQuery 与这些前端库集成，因为它不会给现代前端开发生态系统带来任何价值。

每个流行的前端库都提供了 ref 概念来访问组件内的 DOM 元素引用，因此您不需要使用 jQuery 或 document.querySelector()。例如，您可以获取

的 DOM 元素引用。在Vue中如下：

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

结果：

使用 refs 访问 Vue 中的 DOM 元素引用

按如下方式在 Vue 中使用 jQuery 确实是可能的，但它使用大约十年前引入的老式语法破坏了现代 Vue 源代码，并破坏了现代前端库应使用的预期方式：

<脚本>
从'jquery'导入$；

导出默认值{
 安装（）{
   const elm = $('#elm');
   控制台.log(榆树);
 }
}
</脚本>


 <div>



<p>手动 DOM 操作很少发生在像 Vue 这样的现代前端库中。但是，如果您遇到这种情况，建议使用原生 Web API。</p>

<h2>
  
  
  结论
</h2>

<p>jQuery 无疑是一个非凡的 JavaScript 库，它引入了一种高效、开发人员友好的方法来使用 DOM 操作和 AJAX 技术构建 Web 应用程序前端。 jQuery 由于浏览器兼容性问题以及本机 Web API 中缺乏以开发人员为中心的功能而受到欢迎。 W3C 和 ECMAScript 通过引入新的 Web API 和 JavaScript 语言功能解决了这些问题。 </p>

<p>Web API 的当前状态为 jQuery 拥有的所有功能提供了更好、现代、开发人员友好的类和函数，使得 jQuery 在现代 Web 中变得不必要。 </p>

<p>最近的 jQuery v4 beta 版本证实了这一点，其功能删除和增强侧重于维护而不是创新。由于跨浏览器本机 Web API 的可用性，V4 和其他 jQuery 版本很可能会删除更多功能。 </p>
<p>即将推出的版本可能会终止对旧版浏览器的支持，因为大多数用户倾向于使用最新的浏览器。我还认为 jQuery 不会再次流行，因为当前的本机 Web API 非常稳定且标准化良好，但使用依赖于 jQuery 的遗留 Web 应用程序的开发人员将继续使用它并将其项目升级到 jQuery v4、v5 和很快。话虽如此，没有人愿意通过添加 jQuery 来增加 Web 应用程序包的大小，以实现他们可以在任何流行的 Web 浏览器中轻松找到的开发功能！</p>


<hr>

<h2>
  
  
  LogRocket：通过了解上下文更轻松地调试 JavaScript 错误
</h2>

<p>调试代码始终是一项乏味的任务。但你越了解自己的错误，就越容易纠正它们。</p>

<p>LogRocket 允许您以新的、独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 JavaScript 前端的互动，使您能够准确查看用户的操作导致了错误。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！</p>

<p>免费试用。</p>


          </div>

            
        

以上是为什么 jQuery 是停止使用 jQuery 的一个很好的提醒的详细内容。更多信息请关注PHP中文网其他相关文章！