我们当年是如何真实落地BFF的?
2026/6/11 21:03:54
jQuery UI API 类别 - 方法（Methods）
Methods是 jQuery UI API 文档中一个汇总类别，它列出了所有小部件（Widgets）共有的通用方法。由于 jQuery UI 的所有小部件都基于Widget Factory（部件工厂）构建，因此它们继承了一套完全统一的公共方法。这些方法在每个小部件的 API 文档中都会出现（例如 Datepicker、Dialog、Tabs 等）。
官方文档地址：https://api.jqueryui.com/category/methods/（适用于最新版本 1.14.1）
通用方法列表（所有小部件均支持）
| 方法 | 描述 | 用法示例 |
|---|---|---|
| destroy() | 完全销毁小部件，移除所有添加的类、事件绑定、DOM 修改，恢复原始元素。 | $("#datepicker").datepicker("destroy"); |
| disable() | 禁用小部件（交互无效，通常添加ui-state-disabled类）。 | $("#button").button("disable"); |
| enable() | 启用小部件（恢复交互）。 | $("#button").button("enable"); |
| instance() | 返回小部件的实例对象（存储在元素 data 中的对象）。 | var inst = $("#dialog").dialog("instance"); |
| option() | 获取或设置小部件的选项。 - 无参数：返回所有选项对象。 - 一个参数：获取指定选项值。 - 两个/多个参数：设置选项。 | $("#slider").slider("option", "value", 50);var val = $("#slider").slider("option", "value"); |
| widget() | 返回小部件生成的最外层元素（通常是原元素或包装器）。 | var elem = $("#tabs").tabs("widget"); |
详细说明与示例
option()– 最常用方法
// 设置单个选项$("#datepicker").datepicker("option","dateFormat","dd/mm/yy");// 设置多个选项$("#datepicker").datepicker("option",{changeMonth:true,changeYear:true,yearRange:"1900:2030"});// 获取选项值varformat=$("#datepicker").datepicker("option","dateFormat");// 获取所有选项（对象）varoptions=$("#datepicker").datepicker("option");destroy()
- 彻底清理小部件，常用于动态移除组件。
$("#myDialog").dialog("destroy");// 移除所有 dialog 添加的 DOM 和事件widget()
- 返回小部件实际操作的 DOM 元素（有些小部件会在原元素外包裹一层）。
var$widget=$("#tabs").tabs("widget");// 返回包含 ul 和 panels 的外层 divinstance()（高级用法）
- 直接访问内部实例对象，可操作私有属性/方法（不推荐日常使用）。
vardialogInstance=$("#myDialog").dialog("instance");console.log(dialogInstance.uuid);// 内部唯一 ID
为什么这些方法是“通用”的？
因为 Widget Factory 为所有小部件提供了统一的生命周期和状态管理：
- 选项变更时自动调用
_setOption()。 - 销毁时自动调用
_destroy()。 - 禁用/启用有标准处理逻辑。
因此，无论你是用 Datepicker、Accordion、Slider 还是自定义小部件，这些方法的行为都完全一致。
小贴士：
- 这些通用方法之外，每个小部件还有自己的专属方法（如
open()、close()、value()等），在各自的 API 页面中列出。 - 在自定义小部件时，你可以重写这些通用方法的行为（例如重写
_setOption来响应特定选项变化）。
如果您想了解某个小部件（如 Dialog 或 Tabs）的专属方法列表，或这些通用方法在实际项目中的高级用法，欢迎继续提问！