构建重要 Web 应用程序所面临的其中一个挑战是，JavaScript 的不定向特性首先可能导致代码结构缺失，或者换句话说就是缺乏主干。JavaScript 通常被写成一连串自由悬挂的无关代码块，要不了多久人们将很难理解自身代码的逻辑和结构。
Adobe Creative Cloud
您可以免费注册Adobe创意云服务。Creative Cloud上还提供了诸多HTML5开发工具，包括可以免费下载HTML5动画制作工具Edge Animate，开发工具Edge Code，移动应用测试工具Edge Inspect等。
Creative Cloud的登录地址在此：http://t.cn/zTbTLKT
构建重要 Web 应用程序所面临的其中一个挑战是，JavaScript 的不定向特性首先可能导致代码结构缺失，或者换句话说就是缺乏主干。JavaScript 通常被写成一连串自由悬挂的无关代码块，要不了多久人们将很难理解自身代码的逻辑和结构。
Backbone.js 是一个轻量级框架，它通过向具有大量 JavaScript 的 Web 应用程序添加框架有效解决了这一问题。
独立构建基块
Backbone.js 提供了若干类（模型、集合、视图及路由器），您可以借此扩展定义自己的应用程序构建基块。要使用 Backbone.js 构建应用程序，请首先创建应用程序的模型、集合和视图。然后定义通过一组（深层链接）URL 提供应用程序入口点的 路由器 来激活这些组件。
您可以借助 Backbone.js 组织独立实体（模型、集合和视图）的代码，简单来说，独立实体是指不再含有自由悬挂的无关代码块。
数据绑定
您可以借助 Backbone.js 将视图绑定至模型，这样，当某个模型的数据发生更改时，绑定至该模型的所有视图均将自动重新呈现。不再需要复杂的 UI 同步代码。
巧妙的 REST 集成
Backbone.js 还能够自然、神奇而又巧妙地与 RESTful 服务集成。如果您纯粹通过 RESTful API 公开后端数据，则使用 Backbone.js 的简单模型 API 执行检索 (GET)、创建 (POST)、更新 (PUT) 及删除 (DELETE) 模型操作将变得非常简单。
关于 Wine Cellar 示例应用程序
本教程分为三个部分，我们将在此教程中创建 Wine Cellar 应用程序，从而让用户浏览葡萄酒列表，并添加、更新和删除葡萄酒。
（1）在本文 Backbone.js Wine Cellar 教程第一部分：入门 中，您将会定义基本结构。您将为该应用程序创建一个 只读 版本。这样就能检索葡萄酒列表并获取每种葡萄酒的详细信息。
（2）在 Backbone.js Wine Cellar 教程第二部分：CRUD 教程第二部分：CRUD 中，您将会添加代码功能以添加、更新及删除葡萄酒。您可以利用 Backbone 的强大 REST 集成功能。
（3）在 Backbone.js Wine Cellar 教程第三部分：深层链接和应用程序状态中，您将增加全面的历史记录管理和深层链接支持。
图 1. Wine Cellar 应用程序
只读 Wine Cellar 应用程序代码演练
要查看第一部分的工作版本（应用程序只读版本），请单击此处。
backbone.js 的代码如下所示。我建议您从我的源代码管理网站下载代码以进行深入了解。此应用程序的链接位于本教程的要 求部分。
图 2. backbone.js 代码。
代码重点：
1.WineModel（第 2 行）：请注意，该代码没有明确定义属性（名称、国家/地区、年份等）。您可以添加验证、默认值，以此类推。在第二部分：CRUD 中了解更多信息。
2.WineCollection（第 4 行至第 7 行）： 模型 表示集合的性质。 url 提供 RESTFul API 的终端。这就是需要使用 Backbone 的简单模型 API 检索、创建、更新及删除葡萄酒所需的全部组件。
3.WineListView（第 10 行至第 25 行）：render() 函数循环访问集合，实例化集合中的每种葡萄酒的 WineListItemView，并将其添加至 wineList。
4.WineListItemView（第 27 行至第 38 行）：render() 函数将模型数据合并至 wine-list-item 模板（在 index.html 中进行定义）。通过定义单独的列表项视图，您将能够在支持模型发生更改时轻松更新特定的列表项，而无需重新呈现整个列表。请在第二部 分：CRUD 中查看有关该内容的更多信息。
5.WineView（第 40 行至第 49 行）：该视图用于显示葡萄酒表单中的葡萄酒详细信息。render() 函数将模型数据（某款特定的葡萄酒）合并至从 index.html 检索而来的 wine-details 模板。
6.AppRouter（第 52 行至第 71 行）：此代码通过一组（深层链接）URL 为应用程序提供入口点。定义了以下两个路由：默认路由 () 显示葡萄酒列表。 wines/:id 路由显示葡萄酒表单中的某款特定葡萄酒的详细信息。请注意，在第一部分中，此路由不可进行深层链接。您必须使用默 认路由启动该应用程序，然后选择某款特定的葡萄酒。在第三部分：深层链接和应用程序状态中， 确保您能够深层链接至特定的葡萄酒。
