jQuery

June 16, 2022

在很久很久以前，工程师们通过 jQuery 操作 DOM 来在网页上实现一些交互。

后来，工程师们捣鼓出了框架。React 和 Vue 之类的前端框架让工程师们可以专注于描述数据和 UI 之间的关系，而不是直接去操作它们。渐渐地，没有人用 jQuery 了。

但万一我还是需要操作 DOM 呢？

几个月前我做了一个脚本，可以给网页版微博增加一些一键转发，可以给网页版微博增加一些一键转发（一键 awsl）的功能。由于涉及到大量直接操作 DOM 的需求，让我不得不又考虑引入 jQuery 来简化这些操作。

且慢。

1202 年了，谁还用 jQuery 啊。

于是我开始思考，1202 年了，如果我需要一个「jQuery」那么它应该具备什么特性？

现代的模块化系统，而不是像 jQuery 那样直接暴露一个全局的 $ 必须是 TypeScript，JS 之光。裸写 JavaScript 的都是恶魔。 Less is more 一顿编码之后，我做出来一个原型。我将它取名叫 dro。其实本来想叫 tquery 的，已经被抢注了。至于为啥叫 dro，我也忘了。但是它足够短。

基础查询 import { $, $$ } from 'dro'; const container = $<HTMLElement>(document, '.foo'); const children = $$(document, '.foo a'); 我认为像 jQuery 那样 $() 永远返回一个数组是为了简化问题而带来更多问题。所以参照以前使用 MooTools 的经历，决定用 $() 和 $$() 来区分需要得到一个元素还是多个元素的场景（本质上就只是 querySelector 和 querySelectorAll 的 alias 罢了）。

你还注意到，dro 利用了 TypeScript 的泛型。$() 可以带上泛型参数来取得这个类型的结果。比如 $<HTMLInputElement>(document, '#username')。

批量查询 import { $H } from 'dro';

interface MyForm { username: HTMLInputElement; password: HTMLInputElement; submit: HTMLElement; }

const form = $H<MyForm>(document, { username: '.my-form input.user', password: '.my-form input.pass', submit: '.my-form button[type="submit"]', });

console.log(form?.username.value); 我写那个脚本的时候发现了一个需求。我经常需要同时 query 多个元素，并且一一对它们判空。有些时候，它们也不是简单的 HTMLElement，而是 HTMLInputElement 之类带有更多特性的元素。于是我带来了 $H() 这个函数。

它同样利用了 TypeScript 的泛型特性。你需要先声明一个 interface 来描述你需要的字段和对应的类型，然后通过参数传给函数。同时传给函数的还有对应 interface 中每个字段的 CSS selector（利用 TypeScript 的特性，编辑器会提示你需要哪些字段，确保没有遗漏或拼错）。

如果 interface 中声明的元素通过对应的 CSS selector 全部能得到，那么 $H() 会返回这个对象。否则，只要任意一个 CSS selector 不满足，返回 null。

其它一些 HTML 操作函数 import { append, create, html, attrs, style, on } from 'dro';

append(document.body, () => { const el = create('div'); html(el, 'foo'); attrs(el, { 'class': 'foo', }); style(el, { 'margin-top': '200px', }); on(el, 'click', () => console.log('lol!')); return el; }); 这一部分只满足了我自己开发那个脚本时的需求。以后可能会增改。

这里的 append() 传入的不是一个已经创建好的元素，而是一个 creator 闭包。这是因为我不希望这个需要被 append 到某处的元素创建过程中用到的一些变量被暴露到外面来。

总结以上就是我对 dro 的一些设计思路。目前这个库仅作为原型发布。可能将来某一天想法成熟了，会作为一个严肃项目进行维护。当然，也可能咕咕咕…

感谢阅读。

11

5

11 Sponge少数派_810010SunShinennAWYKZXVNMdivingdove Sponge、少数派_810010、SunShinenn 等 11 人为本文章充电 XiNGRZ XiNGRZ

[民]间[工]程师

全部评论(5) 热门排序

请在登录后评论... 思想的光芒思想的光芒 04 月 09 日 jquery，easyui再到后面的bootstrap 身为一个后端我也用过挺长时间jquery了 0

0 岚浅浅岚浅浅 2021 年 12 月 30 日后端表示我写油猴的时候都是用jQuery 0

0 旭sir 旭sir 2021 年 12 月 11 日后端只会原生和jq的路过 0

0 catbaron catbaron Matrix 作者 2021 年 12 月 01 日楼上两位……都太强了。 0

0 锦瑟无端五十弦锦瑟无端五十弦 2021 年 11 月 29 日哈，我之前不用 Vue、React 时都是靠写原生 JS，没用过 jQuery😂 0

0 没有更多评论了哦推荐阅读