网页应用性能优化与飞行搜索应用构建指南

### 网页应用性能优化与飞行搜索应用构建指南 在网页应用开发中，性能优化和构建实用的应用程序是至关重要的。本文将介绍如何优化应用性能，以及如何构建一个飞行搜索应用。 #### 1. 应用性能优化 在开发和生产环境中，应用的性能表现有很大差异。例如，在开发环境中，以下两行代码： ```html <link href="built/css/app.css" rel="stylesheet"> <script src="built/js/require.js" data-main="built/js/app"></script> ``` 会产生 10 个 HTTP 请求，包括 4 个 CSS 文件和 6 个 JavaScript 文件。而在生产环境中，这两行代码仅产生 3 个 HTTP 请求：一个是 `app.css`，一个是 `require.js`，还有一个是 `app.js`。这是一个显著的性能提升，在大型应用中，使用 RequireJS 构建可以轻松将数百个请求减少到少数几个。 性能优化的关键在于减少往返时间（RTT）和下载大小。以下是一些优化方法： - **脚本拼接**：将多个脚本文件合并为一个，减少 HTTP 请求。 - **按需构建**：使用工具（如 Download Builder）配置只包含所需部分的 jQuery UI 构建。 - **AMD 加载**：使用 AMD 加载器（如 RequireJS）指定依赖项，仅加载所需代码，并在生产环境中进行压缩和拼接。 #### 2. 自定义小部件支持 AMD 当设计一个供外部使用的模块时，支持常见的开发环境非常重要，包括支持使用 AMD 和不使用 AMD 的开发者。 以之前构建的 todo 小部件为例，若要在 AMD 示例中使用它，最初的尝试可能会失败，因为没有声明依赖项。RequireJS 不知道该小部件依赖于 jQuery Core 和小部件工厂，所以不会加载它们。 以下是更新后的 todo 小部件代码，支持 AMD： ```javascript define([ "jquery", "jquery-ui/widget" ], function( $, widget ) { return widget( "tj.todo", { options: { ... }, _create: function( ... ) { }, ... }); }); ``` 这里使用 `define()` 来定义模块，它可以加载依赖项并返回一个可供其他模块使用的 API。 然而，当其他项目的开发者不使用 AMD 时，之前的代码会出错。为了解决这个问题，可以使用 UMD（Universal Module Definition）包装器。 以下是 jQuery UI 中 spinner 小部件的 UMD 包装器示例： ```javascript (function( factory ) { if ( typeof define === "function" && define.amd ) { define([ "jquery", "./core", "./widget", "./button" ], factory ); } else { factory( jQuery ); } }(function( $ ) { return $.widget( "ui.spinner", { ... }); })); ``` 这个包装器的执行逻辑如下： 1. 定义一个立即执行的函数，将另一个函数作为工厂参数传递。 2. 检查是否支持 AMD，如果支持，则使用 `define()` 加载依赖项并调用工厂函数。 3. 如果不支持 AMD，则直接使用全局的 jQuery 变量调用工厂函数。 将同样的 UMD 包装器应用到 todo 小部件上，就可以同时支持 AMD 和非 AMD 用户： ```javascript (function( factory ) { if ( typeof define === "function" && define.amd ) { define([ "jquery", "jquery-ui/widget" ], factory ); } else { factory( jQuery ); } }(function( $ ) { return $.widget( "tj.todo", { ... }); })); ``` #### 3. 构建飞行搜索应用 为了学习如何将各种技术结合起来，我们将构建一个小型的飞行搜索应用，类似于 Orbitz、Travelocity 或航空公司网站上的应用。这个应用将涉及以下几个方面： - **应用结构**：设置项目的目录结构，包括 CSS、JavaScript 和 HTML 文件。 - **用户输入收集**：设计表单，收集用户的搜索输入。 - **API 交互**：连接到第三方 API，查找符合用户输入的航班信息。 - **结果显示**：在页面上显示匹配的航班列表。 ##### 3.1 应用结构 项目的基本目录结构如下： ``` css app.css jquery-ui accordion.css ... index.html js app.js build.js jquery-ui ```