在 Web 前端开发的发展历程中，jQuery 的出现无疑是一场革命。而 jQuery UI，作为 jQuery 官方推出的用户界面库，更是将 jQuery 的强大功能扩展到了 UI 交互领域。它提供了一套完整的交互组件、界面小部件和动画效果，让开发者能够以极低的代码量构建出专业、美观、高交互性的网页应用。
尽管在组件化框架盛行的今天，jQuery UI 的热度已不如从前，但在许多传统企业级项目、后台管理系统、以及需要快速原型开发的场景中，jQuery UI 依然以其稳定性、易用性和丰富的插件生态，维持着广泛的应用。本文将系统全面地介绍 jQuery UI 的核心知识点，从设计哲学到组件使用，从主题定制到性能优化，帮助读者建立完整的知识体系，能够熟练运用 jQuery UI 构建专业的 Web 应用。
一、jQuery UI 概述
1.1 什么是 jQuery UI
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。它包含了底层用户交互（Interactions）、动画特效（Effects）和可更换主题的可视控件（Widgets）。我们可以直接用它来构建具有良好交互性的 web 应用程序。
jQuery UI 与普通 jQuery 的核心区别：
jQuery UI 包含了许多维持状态的小部件（Widget），所有的 jQuery UI 小部件使用相同的模式，因此只要学会使用其中一个，就能快速掌握其他小部件。
1.2 发展历程与版本
jQuery UI 由 jQuery UI 团队开发维护，目前主要有两个分支：
jQuery UI 1.6 系列：配合 jQuery 1.2.6 使用，是过渡性质版本
jQuery UI 1.7+ 系列：配合 jQuery 1.3+ 使用，是主要发展方向
1.9.2 版本是 1.9 的第二个维护版本，修复了 Accordion、Autocomplete、Button、Datepicker、Dialog、Menu、Tabs、Tooltip 和 Widget Factory 等多个组件的 bug。
1.3 核心特性
jQuery UI 拥有以下核心特性：
1.4 局限性
尽管功能强大，jQuery UI 也存在一些不足：
代码不够健壮：缺乏全面的测试用例，部分组件 Bug 较多
架构规划不足：组件间 API 缺乏协调，缺乏配合使用帮助
控件数量较少：相对于 Dojo、YUI、Ext JS 等成熟产品，可用控件有限
二、安装与快速入门
2.1 下载与引入
方式一：CDN 引入（最快捷）
<!-- 必须先引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery UI 核心库 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- 引入 jQuery UI 默认样式（必须） -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
方式二：npm 安装（工程化项目）
npm install jquery
npm install jqueryui
在项目中引入：
import $ from 'jquery';
import 'jqueryui';
方式三：自定义下载
访问 jQuery UI 官网的 Download Builder 页面，可以选择需要的组件进行定制化下载，以获得最小体积。
2.2 第一个 jQuery UI 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI 入门</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
.draggable-box {
width: 150px;
height: 150px;
background: #4caf50;
color: white;
text-align: center;
line-height: 150px;
border-radius: 8px;
cursor: move;
}
</style>
</head>
<body>
<div class="draggable-box">拖拽我！</div>
<script>
// 使元素可拖拽
$(".draggable-box").draggable();
// 使元素可调整大小
$(".draggable-box").resizable();
</script>
</body>
</html>
2.3 在 Vue/React 项目中使用（关键步骤）
在现代化的前端项目中集成 jQuery UI，关键是要处理好外部依赖的加载问题，核心原则是：将 jQuery 和 jQuery UI 排除在打包之外，由 CDN 或运行时环境提供。
在 webpack 或 Vite 构建的项目中，通过配置 externals 来排除依赖：
// webpack.config.js 或 vue.config.js
module.exports = {
externals: {
jquery: 'jQuery',
jqueryui: 'jQuery UI'
}
};
完整的配置示例（基于 Webpack）：
{
"externals": {
"jquery": "node_modules/jquery/dist/jquery.min.js",
"jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
}
}
这种配置能确保构建产物体积不会因为包含 jQuery 而膨胀。
来源：
http://lemci.cn
