大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 jessqueryjessquery 是 DOM API 的轻量级包装器，保持了 jQuery 的直观优雅，但针对现代 Web 进行了大量简化。jessquery 拥有 43 种功能强大的自定义方法，可帮助开发者无缝处理异步任务、自定义错误行为并确保 DOM 操作始终按顺序执行。
从体积上看，jQuery 在未压缩之前的体积为 88.3kb，而 jessquery 只有 8.82k，只有前者的十分之一，Gzip 后 jQuery 依然有 31.7kb，而后者只有 3.76kb，远远小于 jQuery。
目前 jessquery 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。
如何使用 jessquery首先需要安装相应依赖：
npm install jessquerypnpm install jessqueryyarn add jessquerybun install jessquery当然，如果没有包管理工具可以直接通过 CDN 方式引入：
<script src="https://esm.sh/jessquery"></script><script src="https://unpkg.com/jessquery"></script>下面是 jessquery 的基本用法示例：
// 大多数东西都紧密遵循 DOM API，只是名称略有不同。// 但是，现在开发者可以将其链接在一起// 其总是按顺序执行！const fadeIn = [{opacity: 0}, { opacity: 1 }]// WAAPI keyframesconst fadeOut = [{opacity: 1}, { opacity: 0 }]// WAAPI keyframesconst animatedText = $$(".animated-text")// 注意： $$ ≈ querySelectorAll 而 $ 相当于 querySelector// <span hidden>jessquery 还提供了强大的 TypeScript 支持，比如：const button = $<HTMLButtonElement>(".button")const coolInputs = $$<HTMLInputElement>(".cool-inputs")更加强大的是，jessquery 还提供了 DomProxy Lifecycle、Async Flow、条件逻辑、promisify 和 setErrorHandler、AJAX 等 jQuery 常用高级用法，比如下面是发送一个Ajax请求的示例：
const fetchOptions = { // 使用与 fetch 相同选项，但具有大量额外功能，例如： // 使用自动重试，默认为 0 retries: 3, // 第一次重试将在一秒内，然后两秒，然后四秒 retryDelay: 1000, // 可以设置一个错误处理程序，如果在所有重试后提取仍然失败，将调用该错误处理程序 onError: (err) => sendFetchErrorToAnalytics(err). // Or, a success handler that will reflect the DOM AFTER the element has been updated. onSuccess: () => dynamicSpans.attach("<h6>Data Loaded!</h6>"), // This custom loading message will replace the element's text while it waits. onWait: () => dynamicSpans.text("Hold your horses! I'm loading data!") // But, only if it doesn't load within one second. (default is 250ms and no message) waitTime: 1000, // 默认情况下，所有内容都会被清理，但如果需要可以关闭 runScripts: true, sanitize: false, //仍然支持完整范围的获取选项（请求） headers: { "Cool-Header": "Cool-Value", },}// 支持任意嵌套dynamicSpans.fromJSON( "https://jessepence.com/api/cool-json", (el, json) => { el.html( `<h2>${json.name}</h2> <p>${json.bio}</p> ` ) .wait(5000) .fromHTML("/api/extended-bio", fetchOptions) .attach( "<h2>Enough about me, I'll replace this with a cool stream in 5 seconds!</h2>" ) .wait(5000) .fromStream("/api/cool-stream", fetchOptions) }, fetchOptions)更多关于 jessquery 的用法可以参考文末资料，本文不再过多展开。
参考资料https://github.com/jazzypants1989/jessquery
https://www.html.it/magazine/jessquery-come-jquery-ma-piu-leggero/
https://ironeko.com/posts/jquery-alternatives-in-2020-do-you-really-need-it
https://www.geeksforgeeks.org/javascript-alternatives/
