偶然看到 Github 的一篇文章 Removing jQuery from GitHub.com frontend，虽然看不懂，但让我大受震撼，然后陷入了思考。
jQuery 好吗？当然很棒！作为一个简洁快速的 JavaScript 库，可以用更少的代码做更多的事情，同时也是一个时代的王者。在大家都在转向 React 库、Vue 框架等的今天略显落寞，新项目使用的人越来越少，但由于强大的底蕴，并不妨碍其一骑绝尘的占有率。
就我的网站来说，当时有不少功能，秉着能实现就行的想法，都是直接在网上找解决方案，自然而然的引入了 jQuery。等到如今再看，似乎并没有用到太多，虽然 jQuery 压缩后也就 30kb 左右的大小，但我用的估计不到 3kb，同时简单看了下，很多 jQuery 方法使用原生 JS 实现 (You might not need jQuery) 也并不复杂，同时能获得更好的性能，放弃 jQuery 也是一件自然而然的事情。
开始折腾
虽然上一次手撸 JS 还是在大学时的网页设计课上，但为了文艺复兴，总得挑战一下。一趟操作下来的体验就是面向谷歌编程，其中用得最多的是 console.log()，好在本站用到的 jQuery 的地方不是太多，跌跌撞撞用了几天完成了重写，最后注释掉 jQuery 引入的时候很爽。至此，终于可以宣布我的小破站 atpX 于 2023 年 2 月 10 日已经完全移除了 jQuery 依赖。
使用 Fetch 替换 Ajax
我的首页翻页用到了 Ajax 功能，获取下一页数据局部加载到当前页面，为了干掉 jQuery，第一件事就是替换掉 Ajax，Fetch API 就是浏览器提供的用来代替 jQuery.ajax() 请求的接口，而且更加强大。一个简单的 Ajax 和 fetch 请求对比如下：
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}
});
fetch(url)
.then((response) => response.json())
.then((data) => console.log(data));
Fetch API 返回的 Promise 不会返回 HTTP 错误，方便处理各种情况，只会在网络错误或者请求未完成的情况下 reject，上面的请求也可以使用 await 语法改写：
async function getJSON() {
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
具体的使用可以查看 MDN 文档。
Lightbox 灯箱工具替换
目前使用的灯箱工具 Fancybox 也用到了 jQuery，需要换一个使用 Vanilla JS 的，对比体验下面几个轻量工具，感觉都不错，结合自己的需求最后选择了使用 PhotoSwipe。
PhotoSwipe 的使用很简单，支持动态加载，并且很多功能和样式都可以自定义。唯一的缺点是需要预先写入图片的宽度和高度到 <a> 标签里，所以一开始准备用的是灯箱工具是 Simple Lightbox，刚好在我为了解决另一个图片占位抖动问题的时候给每张图片都添加了宽度和高度属性，顺手就换过来了。虽然 PhotoSwipe 的 JS 文件要比 Simple Lightbox 大上一些，但功能更丰富，动画也更加流畅，体验下来很不错。
其它
还有一些用到 jQuery 小功能就不提了，这里只简单谈谈前几天刚实现的文章目录随页面滚动高亮显示。例如本站用的方法使用 jQuery 写的话比较简单：
/*
* Highlight ToC on scrolling
* Written by ATP on 2023-02-05
* Website: https://atpx.com
*/
$(".post-content h2, h3").each(function (i, elements) {
if (scroH > $(this).offset().top - 30 && scroH < $(this).offset().top + $(this).height() - 30) {
$('.catalog a').removeClass('active');
$('.catalog a[href="#' + $(this).attr('id') + '"]').addClass('active');
}
if (i == $(".post-content h2, h3").length - 1 && scroH > $(".post-end").offset().top) {
$('.catalog a').removeClass('active');
}
});
如果换成原生 JS，花了半天改成了如下代码：
/*
* Highlight ToC on scrolling
* Updated on 2023-02-10 to remove jQuery dependency
* Website: https://atpx.com
*/
function offSet(element) {
var rect = document.querySelector(element).getBoundingClientRect();
var offset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
return offset;
}
window.addEventListener("scroll", function() {
const postContent = document.querySelector(".post-content"),
headings = [];
if(postContent) {
headings = postContent.querySelectorAll("h2, h3");
headings.forEach(heading => {
let elementId = heading.getAttribute("id"),
anchor = "#" + elementId;
if (pageScroll > offSet(anchor).top - 30 && pageScroll < offSet(anchor).top + heading.clientHeight - 30) {
document.querySelectorAll('.catalog a').forEach(a => {
a.classList.remove('active');
});
document.querySelector('.catalog a[href="' + anchor + '"]').classList.add('active');
}
if (pageScroll > offSet(".post-end").top) {
document.querySelectorAll('.catalog a').forEach(a => {
a.classList.remove('active');
});
}
});
}
});
代码量增加了不少，可读性也差一些，但大橘为重🍊。写的过程中有个小问题，如果元素不存在，querySelectorAll() 返回的 NodeList 会存在 null 值，导致后面无法获取高度，让我 debug 了半天，需要先判断要选择的元素是否存在后再 querySelectorAll()，也可以用 Array.from() 将 NodeList 转化为数组处理后再继续（如果需要兼容 IE 浏览器可以使用 Array.prototype.slice.call()）。虽然实现了但感觉当前内容的判断逻辑还是有些不完善，以后有时间再优化下。
Updated on 2023-02-11
无聊在一台性能较差的虚拟机中测试时发现 scroll 和 getBoundingClientRect() 似乎会造成性能问题，延迟巨大并且页面卡顿，一番研究之后决定使用 Intersection Observer 替换。
/*
* Highlight ToC on scrolling
* Updated on 2023-02-11 to replace scroll event with IntersectionObserver
* Website: https://atpx.com
*/
let postContent = document.querySelector('.post-content');
if (postContent) {
const ifActive = (headings) => {
headings.forEach((heading) => {
let elementId = heading.target.getAttribute('id'),
anchor = '#' + elementId;
if (heading.isIntersecting) {
document.querySelectorAll('.catalog a').forEach(a => {
a.classList.remove('active');
});
if (elementId){
document.querySelector('.catalog a[href="' + anchor + '"]').classList.add('active');
}
// headingObserver.unobserve(heading.target);
}
});
}
const endNode = document.querySelector('.post-end'),
headings = postContent.querySelectorAll('h2, h3'),
headingObserver = new IntersectionObserver(ifActive, {
rootMargin: '0px 0px -70% 0px',
threshold: 1
});
Array.from(headings, heading => headingObserver.observe(heading));
headingObserver.observe(endNode);
}
但使用 IntersectionObserver API 之后对于是否高亮的逻辑判断我还是比较迷惑，不知道该如何判断标题所在整块 <div> 内容占当前视窗的百分比来决定是否高亮，只能判断标题 <h3>本身那一行是否出现或者占比，可能效果不是很好。我思考一番后直接放弃，选择用标题是否越过距离顶部 30% 的位置作为参考点来判断。此外还有一个小问题是 IE 浏览器不支持该方法，我也选择直接放弃兼容 IE 浏览器。不过好处是改写之后性能问题确实解决了，在低配虚拟机中也很流畅。
总结
写到这里，我并不是鼓励你放弃 jQuery，jQuery 在今天仍然是一个可靠的选择，正是因为经过时间的沉淀，你想实现的功能基本上都有大量的现成文档供你查询，可以帮你高效的解决不少麻烦。不过随着时代的发展，即使是目前流行的新 JS 库和框架早晚也会淘汰，甚至以后还需不需要程序员手写代码也说不定。就目前这个时间点来说，如果放弃 jQuery 对你的网站来说是一件利远大于弊的事情，有时间折腾一下也是不错的。
如果你认为这篇文章还不错，可以考虑为我充电 ⚡️