上周我写了一些 jQuery 代码（居然没人炒我鱿鱼🤓）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

简短声明——是的，这篇文章的标题有点标题党。虽然不是百分百，但你完全可以这么理解。我不是正式员工，所以想解雇我有点难，但我还是决定写一些 jQuery 代码，而且大家都挺满意的。

那么，让我们稍微回顾一下。

我大约在 15 年前（大概是它刚发布的时候）开始使用 jQuery。当时它是​​所有功能的“首选”，我想可以肯定地说，当时几乎所有网站都包含了相关的代码<script src="jquery.js"></script>。这甚至早于 jQuery 的普及cdnjs（当时 jQuery 的标准是使用 JavaScript <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>，所有 JavaScript 内容都直接从你构建的网站提供，而无需任何 CDN）。

jQuery最初是为了让开发者能够轻松编写即用即弃的代码。与今天不同，当时的浏览器标准各不相同，为了让代码在不同的浏览器上流畅运行（或者至少能够正常工作），开发者需要学习和记住很多东西，而我们今天使用的一些标准功能在当时document.querySelector并不存在（或者无法按预期工作）。使用 jQuery 提供了一种非常简单且标准的方式来访问元素（DOM 操作）、处理事件，并确保无论用户使用什么浏览器访问网站，一切都能正常运行。

jQuery UI

随着 jQuery 的广泛应用，另一个名为jQuery-UI 的库也随之发布。根据其官网介绍：

jQuery UI 是一套基于 jQuery JavaScript 库构建的精选用户界面交互、特效、小部件和主题。

jQuery-UI 提供的一些功能是易于使用的可拖动元素 API，这些 API 非常简单，如果我们需要处理所有与拖放相关的操作，它们可以节省我们很多时间。

回到上周

上周我需要创建以下界面：

1. 一个简单的页面，显示一个容器（一个带有背景图像的矩形）。
2. 我们需要在容器内显示圆（我们有一个包含每个圆的 x/y 位置的列表）。
3. 每个圆都可以拖动，但只能沿 Y 轴拖动。
4. 拖放操作只能在容器内部进行。
5. 完成后，我们需要保存（目前保存在 console.log 中）圆的新位置。

由于这是一个概念验证项目，我决定最好使用 jQuery 进行“快速简便”的开发，最终耗时约 3 小时。jQuery-UI 库及其拖拽 API 为我节省了大量时间，而且由于这只是一个概念验证项目，我并不在意它是否使用最新的框架（例如 React/Vue）编写。jQuery-UI
的拖拽 API 的一个优点是，它提供了 `\ axissigma`（为仅沿 Y 轴拖动提供了一个快速解决方案）和 `\sigma` containment（提供了一种将拖动的圆圈固定在容器内的方法）：

$("#container span").draggable({
  axis: "y",
  containment: "parent",
  ...
})

最终版本还包含上传图像/数据集（圆的位置）的选项以及其他一些功能，但为了这篇文章，我只包含了这个版本的代码。

概括

使用 jQuery 可能不是大多数人的首选（可能也不是我大多数项目的首选），但这实际上取决于你当前正在进行的项目。没错，有时候直接编写原生 JavaScript 代码更好；如果你需要编写超过 20-30-40 行代码且更复杂的功能，那么使用标准且最新的框架可能更合适。但是，为了快速解决问题，你也不应该害怕利用一切可用的资源。

思考别人会如何使用你的代码是不应该忽视的，但如果你只是在做一个概念验证，只需要了解这段代码是否有未来，是否会有人真正使用它——在过度设计并启动一个需要一周时间的项目之前——那么做一些“快速而粗糙”的事情来获得感觉并了解接下来该怎么做是可以的。