将 jQuery UI 与 AMD 结合使用

**注意:** 本文档指的是 jQuery UI 1.11 中提供的功能。

从 jQuery UI 1.11 开始，该库的所有源文件都支持使用 AMD。这意味着您无需使用 Download Builder 即可管理 jQuery UI 依赖项，并且可以使用 AMD 加载器（例如 RequireJS）异步加载 jQuery UI 的源文件。

在本文中，我们将逐步介绍将 AMD 与 jQuery UI 结合使用的过程。首先，我们讨论一下所需的文件。

link 要求

我们需要下载三样东西才能开始运行：jQuery 核心、jQuery UI 和一个 AMD 加载器。

虽然任何 AMD 加载器都可以，但我们在本文中将使用 RequireJS，您可以从 https://requirejs.node.org.cn/docs/download.html 下载。如果您手头没有 jQuery 核心版本，可以从 https://jqueryjs.cn/download/ 获取，并且可以从 https://github.com/jquery/jquery-ui/releases 下载 jQuery UI 源文件（使用 ui 目录中的文件）。您也可以使用 Bower 等包管理器下载这些库。

link 目录结构

现在我们有了需要的文件，我们必须讨论将它们放在哪里。对于本教程，我们将构建一个使用以下目录结构的小型应用程序。

├── index.html
├── js
│   ├── app.js
│   ├── jquery-ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   └── ...
│   ├── jquery.js
│   └── require.js

如您所见，我们将所有 JavaScript 文件都放在一个 js 目录中。jquery.js 和 require.js 是 js 的直接子文件，所有 jQuery UI 文件都在一个 jquery-ui 目录中。app.js 将包含我们的应用程序代码。

使用 RequireJS，您可以自由使用任何您喜欢的目录结构，但对于替代结构，您必须更改一些配置，以便 RequireJS 知道如何找到您的依赖项。

link 加载应用程序

现在文件已就位，让我们使用它们。以下是我们应用程序的 index.html 文件的内容。

	
					<!doctype html>
<html lang="en">
<head>
    ...
</head>
<body>
 
<script src="js/require.js" data-main="js/app"></script>
 
</body>
</html>

require.js 在一个 <script> 标签中加载，该标签按照惯例异步加载并执行 data-main 属性中指定的文件 - 在本例中为 js/app.js。如果您在 app.js 中放置一个 console.log() 语句，您可以验证它是否正确加载。

	
					/* app.js */
console.log( "loaded" );

我们的样板现在已就位。接下来，我们必须加载 jQuery 和 jQuery UI。

link 引入 jQuery 和 jQuery UI

require() 函数是 AMD 用于指定和加载依赖项的机制；因此，我们可以向 app.js 文件中添加一个以加载必要的文件。以下代码加载 jQuery UI 的自动完成小部件。

	
					require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    ...
});

当此代码执行时，RequireJS 异步加载 jquery-ui/autocomplete.js 及其依赖项：jQuery 核心 (jquery.js)、jQuery UI 核心 (jquery-ui/core.js)、小部件工厂 (jquery-ui/widget.js)、位置工具 (jquery-ui/position.js) 和菜单小部件 (jquery-ui/menu.js)。

当所有依赖项都解析并加载后，RequireJS 调用回调函数。

link 使用 jQuery UI 的文件

所有使用小部件工厂构建的小部件在通过 AMD 引入时都会公开其构造函数；因此，我们可以使用它们在元素上实例化小部件。以下代码创建一个新的 <input>，在其上初始化一个自动完成小部件，然后将其附加到 <body>。

	
					require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" )
        .element
        .appendTo( "body" );
});

每个小部件的构造函数接受两个参数：小部件的选项和初始化小部件的元素。每个小部件都有一个默认元素，如果没有提供元素，则使用该默认元素，该元素存储在 $.namespace.widgetName.prototype.defaultElement 中。由于 $.ui.autocomplete.prototype.defaultElement 是 <input>，因此我们可以在自动完成示例中省略第二个参数。

	
					require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    autocomplete({ source: [ "One", "Two", "Three" ] })
        .element
        .appendTo( "body" );
});

尽管我们使用 AMD 加载 jQuery UI 的文件，但文件的插件仍然添加到全局 jQuery 和 $ 对象中；因此，您也可以使用插件来实例化小部件。以下代码也创建相同的自动完成。

	
					require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {
    $( "<input>" )
        .autocomplete({ source: [ "One", "Two", "Three" ]})
        .appendTo( "body" );
});

link 日期选择器

由于 jQuery UI 的日期选择器小部件是唯一没有使用小部件工厂构建的 jQuery UI 小部件，因此它在通过 AMD 引入时不会返回构造函数。正因为如此，最好坚持使用日期选择器的插件来实例化日期选择器实例。以下代码引入日期选择器，然后使用其插件在新创建的 <input> 上实例化日期选择器实例。

	
					require([ "jquery", "jquery-ui/datepicker" ], function( $ ) {
    $( "<input>" )
        .appendTo( "body" )
        .datepicker();
});