jQuery UI 实例 - 部件库（Widget Factory）

jQuery UI 是一个流行的 JavaScript 库，为 web 开发者提供了强大的工具，以创建响应式且动态的用户界面。其中最重要的部分是 Widget Factory，它是一个基础构建部件、控件和插件的模板库，提供开箱即用的组件、结构和样式，并提供可交互性及拓展功能。部件库使得开发者简单且高效，只需通过编写可重复使用的代码模板即可快速创建庞大且可拓展组件库。

使用部件库的第一步是包括 jQuery 和 jQuery UI，包括以下标签：

<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.12.4.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
</body>
</html>

接下来，创建一个可以被 Widget Factory 实例化的构造函数：

$.widget( "ui.firstWidget", {
	// 构造函数
	_create: function() {
     	console.log("This is my first widget")
   }
});

在上述代码中，$.widget() 实例化了一个具有名为 ‘firstWidget’ 的新 jQuery UI 部件，其中第一个参数是标识，可用于在其他部件内部引用。

通过这种方式，已经成功地创建了一个简单的部件，现在，可以在HTML中调用新部件：

<div id="my-widget"></div>

然后，在 JavaScript 中实例化新部件：

$("#my-widget").firstWidget();

现在，每当页面加载时，函数都会执行，构造一段信息并打印到控制台上，表示新部件已经被实例化并工作。

除了上述功能外，Widget Factory 还提供了以下功能：

选项（Options）

Widget Factory 中的选项允许将其配置为更具可配置性的部件。默认选项存储在部件的 prototype 中，可以使用 _setOption() 函数在实例化部件时进行更改。

$.widget( "ui.firstWidget", {
	// 默认选项
	options: {
		color: "#000"
	},

	// 构造函数
	_create: function() {
		console.log("My color: " + this.options.color);
    },
      
    // 选项更改函数
    _setOption: function( key, value ) {
		if ( key === "color" ) {
			console.log("The new color is: " + value);
		}
	}
});

// 实例化新部件
$("#my-widget").firstWidget();

// 更新颜色选项
$("#my-widget").firstWidget("option", "color", "#F00");

需要注意的是，选项更新后必须使用 _setOption() 函数来处理。

方法 (Methods)

除了 _create()，部件还可以包含各种自定义方法，这些方法代表了新功能或组件的交互部分。

$.widget( "ui.firstWidget", {
	// 默认选项
	options: {
		count: 1
	},

	// 方法
	methodA: function() {
		console.log("Method A was called");
	},
	methodB: function() {
		console.log("Method B was called " + this.options.count + " times");
	},

	// 构造函数
	_create: function() {
		var self = this;
		console.log("This is my widget");
      
		this.element.on("click", function() {
			self.methodB();
			self.option("count", ++self.options.count); // 增加计数器选项
		})
	},

	// 选项更改函数
	_setOption: function( key, value ) {
		if ( key === "count" ) {
			console.log("The new count number is: " + value);
		}
	}
});

// 实例化新部件
$("#my-widget").firstWidget();

// 调用方法
$("#my-widget").firstWidget("methodA");
$("#my-widget").firstWidget("methodB");

在上述代码中，Widget Factory 实例化了一个具备多种方法与功能的组件，此外还有一个计数器选项，可通过在每次单击时递增计数器来处理。

状态（State）

在 Widget Factory 中，状态通常定义为不需要配置的组件属性，运用状态的目的是在需要在组件的状态改变时重新渲染部件的特定部分。

$.widget( "ui.firstWidget", {
	// 默认选项
	options: {
		active: true
	},

	// 状态
	_active: false,

	// 构造函数
	_create: function() {
		var self = this;
		console.log("The widget is currently active: " + this.options.active);
      
		// 处理部件单击事件
		this.element.on("click", function() {
			self.options.active = !self.options.active; // 切换选项 active
			self._setOption("active", self.options.active);
		});

		// 初始化状态，更改样式
		this._setOption("active", this.options.active);
	},

	// 选项更改函数
	_setOption: function( key, value ) {
		if ( key === "active" ) {
			console.log("Active state is: " + value);

			// 根据状态设置样式
			if (value) {
				this._active = true;
				this.element.addClass("active");
			} else {
				this._active = false;
				this.element.removeClass("active");
			}
		}
	}
});

// 实例化新部件
$("#my-widget").firstWidget();

在上述代码中，状态 active 表示当前部件是否处于活动状态。在组件加载时，它被默认设置为 true。当部件被单击时，处理函数（在此处为 _setOption()）的代码根据新状态更新部件状态并更改样式。

总结

通过使用 Widget Factory，可以轻松创建重复使用代码模板的组件、底层控件和插件，并具有可交互性和扩展性。该部件库包含用于自定义方法和状态的标准模板，同时具有灵活性和可扩展性，可根据需要进行定制。

jQuery UI 实例 - 选择（Selectable） jQuery UI 实例 - 隐藏（Hide）

jQuery UI 实例 - 部件库（Widget Factory）

jQuery UI Widget Factory (部件库)

使用 Widget Factory 创建组件

Widget Factory 的功能

选项（Options）

方法 (Methods)

状态（State）

总结