jQuery UI 如何使用部件库（Widget Factory）

使用部件库（Widget Factory）创建 jQuery UI 组件

简介

部件库（Widget Factory）是 jQuery UI 提供的一个抽象层，用于创建定制的组件（widget）。它提供了一些基本的特性和扩展点，以及大量的生命周期方法，能轻松减少和统一各种 UI 组件的实现方式。

Widget Factory 为 jQuery UI 组件提供了以下特性：

  1. 继承，轻松集成到现有的 jQuery UI 组件或其它框架中；
  2. 一致的方法调用方式，易于 API 的使用和扩展；
  3. 基础的类模式和生命周器（lifecycle），在组件的创建、初始化、销毁等环节提供了很用的扩展点；
  4. 事件系统，可以轻松地使用和绑定事件。

创建一个最小工作示例

我们先来了解如何创建一个最小的部件（widget）。在开始创建 widget 前，请确保已经引入了 jQuery UI，并了解了如何使用 jQuery UI。

创建一个动态效果组件

我们希望创建一个最小的部件，并通过该部件实现一个简单的动态效果。这个部件将会在鼠标悬停在它上面时，显示一个背景色渐变动画。

  1. 创建一个style.css文件，并导入jquery-ui.css 和 jquery.theme.css CSS 样式。
/* file: style.css */
@import "jquery-ui.css";
@import "jquery-ui.theme.css";
  1. 然后创建 index.html，并导入必要的 JavaScript 文件和 CSS 文件。
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Widget Factory Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="my-widget">Hover over me</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="my-widget.js"></script>
</html>
  1. 创建 my-widget.js 文件，并实现部件类 MyWidget。
// file: my-widget.js
$.widget("my.widget", {
   // options与$.defaultOptions用法一致
   options: {
      backgroundColor1: "#4285f4",
      backgroundColor2: "#ea4335",
      duration: 300
   },
   // 部件的事件定义
   _create: function() {
      this.element.hover(
         function() {
            $(this).animate({ backgroundColor: this.options.backgroundColor2 }, this.options.duration);
         },
         function() {
            $(this).animate({ backgroundColor: this.options.backgroundColor1 }, this.options.duration);
         }
      );
   },
   // 销毁部件
   _destroy: function() {
      this.element.removeClass("ui-my-widget");
      this.element.removeData("my-widget");
   }
});
  1. 在 index.html 中通过以下代码实例化并使用部件：
$(function() {
   $("#my-widget").widget({
      backgroundColor1: "#4285f4",
      backgroundColor2: "#ea4335",
      duration: 300
   });
});
  1. 最后我们查看浏览器效果。

分析示例

1. 创建部件

$.widget("my.widget", {})

这里调用了 jQuery UI 的 widget() 方法，并传递了两个参数。第一个参数为部件的名称，第二个参数为一个对象，其中包含了部件的核心逻辑。

2. 定义部件的选项

在部件的定义中，可以通过初始化选项来传递值。这里定义了三个选项：backgroundColor1，backgroundColor2 和 duration，分别用于保存两个不同颜色的背景色和渐变动画的时间。

3. 实现事件

部件的核心是 _create() 函数，它被调用时，可以在DOM元素上绑定事件。在该示例中， MyWidget 部件绑定了两个 mouseenter 和 mouseleave 事件来实现当鼠标悬停时，执行一个简单的背景色渐变动画。

4. 销毁部件

通过实现 _destroy() 函数，我们可以在部件被销毁时，清除掉废弃的类和数据，确保不占用宝贵的内存资源。

5. 实例化 create

最后，我们在 document.ready 事件处理中创建一个新的 MyWidget 实例，并向其传递初始选项。这里通过 ID #my-widget 选择了一个 DOM 元素，并将它传递给了 jQuery UI Widget Factory，让后让它将 MyWidget 应用到该元素中。

总结

以上例子只是 Widget Factory 的一个最小示例，如果您想深入学习和使用 Widget Factory，还需阅读相关的官方文档和部件源码。Widget Factory 不仅是一个组件化的实现，也是一个高度灵活的扩展机制，只有你的需求和想象力决定它能实现什么。

jQuery UI 使用 jQuery UI 定制