发布在：jQuery UI > 使用 jQuery UI

使用 AMD 搭配 jQuery UI

**注意：**此文档参考了 jQuery UI 1.11 中提供的功能。

从 jQuery UI 1.11 开始，该库的所有源文件都支持使用 AMD。这意味着你可以管理 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 文件的内容。

1
2
3
4
5
6
7
8
9
10
11
 
<!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() 语句，你可以验证它是否已正确加载。

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

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

link 要求 jQuery 和 jQuery UI

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

1
2
3
 
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>。

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

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

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

即使我们使用 AMD 加载 jQuery UI 的文件，这些文件的文件插件仍会添加到全局 jQuery 和 $ 对象中；因此，你还可以使用这些插件来实例化小组件。以下也会创建相同的自动完成。

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

link 日期选择器

由于 jQuery UI 的日期选择器小部件是唯一一个不是使用小部件工厂构建的 jQuery UI 小部件，因此在使用 AMD 时不会返回构造函数。因此，最好坚持使用日期选择器的插件来实例化日期选择器实例。以下需要日期选择器，然后使用其插件在新创建的 <input> 上实例化一个日期选择器实例。

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