jQuery插件编写:Why use the Widget Factory(四)

裴经义
2023-12-01

这是一篇翻译的文章,原文地址:

http://learn.jquery.com/jquery-ui/widget-factory/why-use-the-widget-factory/

Widget Factory(控件工厂)

jQuery UI提供的Widget Factory是所有jQuery UI控件(widget)创建的基础。使用Widget Factory创建一个jQuery插件给我们带来了很多的便利,如:生命周期管理、按照统一的规范完成常见的任务包括导出插件方法和在初始化后改变插件的配置选项。

Why Use the Widget Factory(为什么使用控件工厂)

编写一个jQuery插件简单到只是向jQuery.prototype(通常是$.fn)添加一个方法,同时遵循一定的约定如为了链式操作返回this。既然如此为什么还有Widget Factory的存在?它的几百行代码有什么用?
在这篇文档中,我们将概览Widget Factory的好处,并且学习在什么时候和为什么有必要使用它。

Stateless vs. Stateful Plugins(无状态 VS 有状态插件)

大部分的jQuery插件都是无状态的,它们执行了某些动作后任务也就完成了。比如说,你要通过.text("hello")修改一个元素的文本,不需要经历多个步骤并且得到的结果总是相同的。对于这类插件,很确定你可以直接扩展jQuery的原型。
然而,有些插件是有状态的。它们有完整的生命周期,需要维持状态,并且需要对于任何改变做出响应。这类插件需要我们用大量的代码来关注初始化和状态管理(有时还要处理销毁清理工作)。这样导致了很多创建有状态插件的重复代码的出现。更糟糕的是,每个插件作者可能采用不同的方式来处理生命周期和状态,造成不同的插件拥有不同的API风格。Widget Factory致力于解决这两个问题:消除繁琐的重复代码的出现和创建跨插件的统一风格的API。

Consistent API(一致风格的API)

Widget Factory定义了如何创建和销毁控件、获得和设置配置项、调用插件方法和监听控件触发的事件。通过使用Widget Factory创建你的有状态插件,你将自然地遵循约定好的标准,使得新用户使用你的插件更容易。另外对于定义插件的接口,Widget Factory也已经为你实现了相应的功能。如果你不熟悉Widget Factory提供的API,你应该阅读一下How jQuery UI Works.

Setting Options on Initialization(初始化时的配置)

无论什么时候你创建一个接受配置参数的插件,你都需要尽可能多的定义默认值。然后在初始化时你要合并默认值和用户提供的配置。一个比较好的主意是暴露你的默认配置让用户可以改变它。一个典型的模式就像这样:

$.fn.plugin = function( options ) {
	options = $.extend( {}, $.fn.plugin.defaults, options );
	// 插件逻辑写在这里
};

$.fn.plugin.defaults = {
	param1: "foo",
	param2: "bar",
	param3: "baz"
};

Widget Factory提供了更高明的实现方法。让我们看看通过Widget Factory是如何实现的:

$.widget( "ns.plugin", {

	// 默认配置
	options: {
		param1: "foo",
		param2: "bar",
		param3: "baz"
	},

	_create: function() {
		// 配置已经合并了,并且存储在 this.options
		// 插件逻辑写在这里
	}
});





 类似资料: