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

什么是 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 jessquery
pnpm install jessquery
yarn add jessquery
bun 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 keyframes
const fadeOut = [{opacity: 1}, { opacity: 0 }]
// WAAPI keyframes
const 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/