大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 jessquery

jessquery 是 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 class="animated-text"></span>// <span hidden class="animated-text"></span>animatedText  .addClass("special")  .wait(1000) // Will not appear for one second  .toggle("hidden")  .text(    `<p>      In two seconds, every element matching the 'animated-text' class      will fade in and out twice then disappear.    </p>`  )  .wait(2000)  .transition(fadeIn, 1000)  .transition(fadeOut, 1000)  .transition(fadeIn, 1000)  .transition(fadeOut, 1000)  .purge()  // 所有 `.animated-text` 元素都会从 DOM 中移除

jessquery 还提供了强大的 TypeScript 支持，比如：

const button = lt;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/