发布在：jQuery UI > 小部件工厂

为何使用小部件工厂？

编写 jQuery 插件就像向 jQuery.prototype（更常见的是 $.fn）添加一个方法一样简单，并遵循一些简单的约定，例如返回 this 以实现可链性。那么小部件工厂为何存在？为何有数百行代码？

在本文档中，我们将介绍小部件工厂的优势，并了解在何时何地使用它是有意义的。

link 无状态插件与有状态插件

大多数 jQuery 插件都是无状态的；它们执行一些操作，然后完成任务。例如，如果您使用 .text( "hello" ) 设置元素的文本，则没有设置阶段，结果始终相同。对于这些类型的插件，扩展 jQuery 的原型是有意义的。

但是，有些插件是有状态的；它们具有完整的生命周期，维护状态并对更改做出反应。这些插件需要大量专门用于初始化和状态管理（有时还有销毁）的代码。这会导致构建有状态插件时出现大量样板代码。更糟糕的是，每个插件作者都可能以不同的方式管理生命周期和状态，从而导致不同插件的 API 样式不同。小部件工厂旨在解决这两个问题，删除样板代码并在插件之间创建一致的 API。

link 一致的 API

小部件工厂定义了如何创建和销毁小部件、获取和设置选项、调用方法以及侦听小部件触发的事件。通过使用小部件工厂来构建有状态插件，你将自动遵循已定义的标准，这使得新用户可以更轻松地开始使用你的插件。除了定义界面之外，小部件工厂还为你实现了此功能的大部分内容。如果你不熟悉小部件工厂提供的 API，你应该阅读jQuery UI 工作原理。

link 初始化时设置选项

每当你构建一个接受选项的插件时，你都应该为尽可能多的选项定义默认值，然后在初始化时将用户提供的选项与默认值合并。向用户公开默认值也是一个好主意，以便他们甚至可以更改默认值。jQuery 插件中的常见模式如下所示

1
2
3
4
5
6
7
8
9
10
 
$.fn.plugin = function( options ) {
    options = $.extend( {}, $.fn.plugin.defaults, options );
    // Plugin logic goes here.
};
 
$.fn.plugin.defaults = {
    param1: "foo",
    param2: "bar",
    param3: "baz"
};

小部件工厂提供了此功能，甚至更进一步。让我们看看小部件工厂中的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$.widget( "ns.plugin", {
 
    // Default options.
    options: {
        param1: "foo",
        param2: "bar",
        param3: "baz"
    },
 
    _create: function() {
        // Options are already merged and stored in this.options
        // Plugin logic goes here.
    }
 
});