我还在用 jQuery

一、前言

我是后端开发出身，前端还停留在用原生 js 和 jQuery 写代码的水平。这次重构副站dujun.eu.org考虑过前端要不要用现代框架来写。三大框架里面，Angular 和 React 不打算碰，去看了最容易入门的 Vue。在 B 站看了两天的教程，喜欢不起来。

二、Vue

Vue 当然很好，有优雅的设计思路，是真正意义上的框架。双向绑定，只需处理数据，不用亲自操作 DOM。但是对我而言，有两方面原因让我放弃 Vue。

（一）Vue 语法

Vue 的编写方式就像一门新的语言，需要记很多的语法糖。如果不打算深入前端工作，对这个学习积累没有很高的兴致。更真实的是，当只是完成简单的交互效果，用 Vue 写代码不会比原生更轻松。

（二）Vue 虚拟 DOM

Vue 使用虚拟 DOM 来优化渲染逻辑，实际执行过程成了黑盒，我不确定具体发生了什么。虽然本不该关心，但我不喜欢失去掌控感。而当我用 js 和 jQuery 写代码时，我很清楚每条语句在做什么，它在实际渲染过程中的执行逻辑和顺序。

三、jQuery

jQuery 是原生 js 的超集，或者说简化的方言，可以方便地操作 DOM。在现代化框架出现之前，jQuery 是占统治地位的。我就是在那个“古典”时期成为程序员的，所以天然地会用 jQuery。

（一）jQuery 很臃肿

jQuery 诞生的使命之一就是解决浏览器兼容问题，比如对 IE 的支持。大量的兼容性处理导致代码量很大，最新的 3.6.1 版本，去除注释和空行，还有 6295 行代码。

（二）我的优化实践

我在副站直接引用了 jQuery 文件，但是本站并没有直接引用文件，而是参考它的设计，自己开发了一套相同接口的类库。基于现代原生 js 已经能够很容易地实现 jQuery 的方法，详见You Might Not Need jQuery。

举例来说：

1. 选择器

//jQuery
$('.my #awesome selector');

//原生
document.querySelectorAll('.my #awesome selector');

2. addClass

//jQuery
$(el).addClass(className);

//原生
el.classList.add(className);

3. append

//jQuery
$(parent).append(el);

//原生
parent.append(el);

得益于现代 js 的强大接口，同时我完全放弃过时浏览器，最终实现的类库涵盖了本站需要的所有方法，去掉注释和空行只有 326 行代码。

四、后记

搜索 jQuery，关联最多的内容就是“jQuery 过时了”、“jQuery 已死”。作为同一时代过来的大龄程序员，心有戚戚，有着同样的被时代淘汰的感怀。

虽然我已经转型管理，但对技术本身有着最初的热爱。在做个人项目时，还是习惯用 jQuery，让这个曾经的王者继续伟大。