你确定需要 jQuery 吗？
你使用了jQuery。
大家都这么做。
这是一个非常棒的库，它把我们从2000年代初期对JavaScript支持的集体绝望深渊中解救了出来。它是现代Web发展的重要基石。
但现在情况已经不同了。大多数浏览器对 JavaScript 的支持更加完善和统一。ES6 现在几乎已成为标配。浏览器会定期自动更新。
没错，jQuery 在您那台配备 16 核处理器、32GB 内存并连接着城域光纤 Wi-Fi 的顶级笔记本电脑上，下载、编译和运行都非常流畅。但对于您的许多用户来说，情况可能并非如此。页面加载速度慢对他们来说是个问题，对您来说也是如此，因为大多数移动用户都会放弃加载时间超过 3 秒的页面。
问题是，你真的需要它吗？
因为大多数情况下，我们使用 jQuery 的用途是：
- 根据 CSS 选择 DOM 节点
- 向 HTML 元素添加或删除类
- 向 HTML 元素添加或删除属性
- 向 HTML 元素添加或删除内容
- 通过 Ajax 调用获取一些新的 HTML 代码
你知道吗？你不需要 jQuery 就能做到这一点。
所以我将提供两种选择：
和
你只需要用到一点点 jQuery。
你正在制作一个宣传册式的网站，或者给一个不太动态的网站添加一些简单的交互功能。这不是一个应用程序，应用程序都是用框架开发的，我们都知道。这可能是你的作品集，你老板侄女放风筝的主页，或者是一个很酷但尚未发布的大型项目的简单着陆页+注册页面。那么，让我来给你展示一下：
DOM 操作
| 当你在做……的时候 | 改用这种方法 |
|---|---|
$('.someclass') |
document.querySelectorAll('.someclass') |
$('.someclass')[0] |
document.querySelector('.someclass') |
$element.remove() |
element.remove() |
$element.prepend(otherElement) |
element.prepend(otherElement) |
$element.before(otherElement) |
element.before(otherElement) |
element.addClass('some') |
element.classList.add('some') |
$element.removeClass('some') |
element.classList.remove('some') |
$element.toggleClass('some') |
element.classList.toggle('some') |
const parent = $element.parent() |
const parent = element.parentNode |
const clone = $element.clone() |
const clone = element.cloneNode(true) |
数组操作
| 当你在做……的时候 | 改用这种方法 |
|---|---|
$.isArray(a) |
Array.isArray(a) |
$.inArray(item, arr) |
arr.indexOf(item) > -1 |
$.each(arr, (i, v) => {}) |
arr.forEach((value, index) => {}) |
$.map(arr, (v, i) => {}) |
arr.map((value, index) => {}) |
$.grep(arr, (v, i) => {}) |
arr.filter((value, index) => {}) |
如果你觉得这里缺少很多东西，但仍然想跳过 jQuery，可以看看LoDash（压缩后约 4kB）。
活动
| 当你在做……的时候 | 改用这种方法 |
|---|---|
$el.on('click', e => { }) |
el.addEventListener('click', e => { }) |
请注意，jQuery 允许您观察元素集合，但如果您使用 `observe() querySelectorAll` 方法，则需要观察结果中的每个元素，如下所示：
// https://stackoverflow.com/a/50101839/97635
document.
querySelectorAll('.tracked').
forEach(input => input.addEventListener('click', this.trackLink));
Ajax 调用
XMLHttpRequest 比较复杂，我也不打算说服你放弃你常用的$.ajax({})调用方式，所以我们来聊聊Fetch。Fetch是 XMLHttpRequest 的一个现代替代品，但它不像我们之前提到的其他 API那样普及，所以值得一提的是，Fetch 有一个 polilly 版本，你可以只向相关的浏览器提供服务，让其他浏览器保持低流量状态。
fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.querySelector('#userlist').innerHTML = body
})
你使用了大部分jQuery
这可能是因为你已经拥有庞大的代码库，或者你觉得做事太安逸而不愿尝试不同的方法……
接下来我想向大家介绍Zepto.js。Zepto
（用他们自己的话说）是一个极简的 JavaScript 库，适用于现代浏览器，并且拥有与 jQuery 高度兼容的 API。如果您使用过 jQuery，那么您就已经知道如何使用 Zepto 了。
压缩后只有 9.6k，比你的 logo 小多了。去看看吧。
最后提醒一句：
如果你正在使用 jQuery，并且非常喜欢它，而且它通过速度极快的 CDN 提供服务，文件经过压缩和 gzip 处理（28.87 KB），那么或许值得你费尽心思去避免它。
如果你正在开发一个依赖于框架的、体积庞大的MVC单页应用程序（SPA），那么以上所有方法都不需要考虑。你应该专注于框架的最佳实践，并了解它的特性。
jQuery 很棒，我对它没有任何恶意。它已经成为Web 的默认底层架构，因为它确实有效。它如此成功以至于无处不在，唯一的问题就是我们不再质疑它。而你应该质疑一切。
和往常一样，我很乐意阅读您对此事的看法。您会统计字节数吗？您会查看谷歌分析数据来分析用户及其设备吗？
文章来源：https://dev.to/oinak/are-you-sure-you-need-jquery-ej8