jQuery UI 工作原理

jQuery UI 是建立在 jQuery 核心库之上的一个插件集合，主要用于构建交互式用户界面。它不像普通 jQuery 插件那样无状态，而是许多组件（尤其是小部件 Widgets）需要维护内部状态（如进度条的当前值、对话框的打开状态等）。因此，其工作原理与典型 jQuery 插件有所不同。

核心机制是 Widget Factory（部件工厂，暴露为 $.widget 方法），这是 jQuery UI 的基础架构，所有官方小部件（如 Datepicker、Tabs、Dialog 等）都基于它构建。这使得所有小部件具有统一的 API 模式、生命周期管理和扩展性。

1. 整体架构

依赖 jQuery：jQuery UI 扩展了 jQuery 的插件系统，利用 jQuery 的选择器、事件绑定、动画等功能。
主要组成部分：
Interactions（交互）：如 Draggable、Droppable，基于鼠标事件。
Widgets（小部件）：状态ful 的 UI 控件，如 Accordion、Tabs。
Effects（特效）：扩展 jQuery 的动画，支持颜色动画、类切换等。
Utilities（工具）：如 Position（定位）、Widget Factory 本身。
主题系统：使用 CSS Framework，提供语义类（如 .ui-widget、.ui-state-default），便于 ThemeRoller 自定义。

2. Widget Factory 的核心原理

Widget Factory 是一个工厂函数，用于创建状态ful 的 jQuery 插件。它解决了普通插件的痛点：状态管理、方法暴露、生命周期钩子、继承等。

创建小部件：

  $.widget("ui.progressbar", {  // 名称空间 + 小部件名
      options: { value: 0 },   // 默认选项
      _create: function() {    // 创建时调用（构造函数）
          // 初始化 DOM、绑定事件
      },
      _setOption: function(key, value) {  // 选项变化时调用
          // 更新状态
      },
      value: function(val) {   // 自定义方法
          if (val === undefined) return this.options.value;
          this.options.value = val;
          this._refresh();     // 刷新 UI
      },
      _destroy: function() {   // 销毁时清理
          // 移除事件、类等
      }
  });

生命周期：
初始化：$("#elem").progressbar(); → 调用 _create() 和 _init()。
方法调用：$("#elem").progressbar("value", 50); → 执行自定义方法。
选项设置：$("#elem").progressbar("option", "value", 50); → 调用 _setOption()。
销毁：$("#elem").progressbar("destroy"); → 调用 _destroy()，恢复原 DOM。
事件触发：使用 _trigger("eventName", event, data)，如 create、change 事件。
状态管理：
每个实例存储在元素的 jQuery 数据中（$.data(elem, "ui-progressbar")）。
支持启用/禁用：enable() / disable()。
类管理：自动添加/移除如 ui-widget 的类。
继承与扩展：

  $.widget("custom.superDialog", $.ui.dialog, {  // 继承 dialog
      _create: function() {
          this._super();  // 调用父类 _create
          // 添加自定义逻辑
      }
  });

3. 使用模式（统一 API）

所有 jQuery UI 小部件遵循相同模式：

$(function() {
    // 初始化（可传选项）
    $("#elem").progressbar({ value: 0 });

    // 调用方法
    $("#elem").progressbar("value", 37);

    // 获取/设置选项
    var value = $("#elem").progressbar("option", "value");
    $("#elem").progressbar("option", "disabled", true);

    // 绑定事件
    $("#elem").on("progressbarchange", function(event, ui) { /* ... */ });

    // 销毁
    $("#elem").progressbar("destroy");
});

4. 为什么这样设计？

一致性：学会一个组件，就基本会用所有组件。
可扩展：易于自定义或创建新组件。
状态ful：适合复杂 UI（如对话框需要记住位置、内容）。
跨浏览器：内部处理差异。

注意：jQuery UI 已进入维护模式（最新 1.14.1），不再添加新功能。Widget Factory 是其最核心的贡献，许多现代库（如 jQuery Mobile）也受其影响。

如果您想深入某个具体小部件的内部实现（如 Datepicker 如何处理日期计算），或查看 Widget Factory 的源码示例，请告诉我，我可以提供更多细节！

jQuery UI 工作原理