简介

Web 应用程序越来越关注于前端，使用客户端脚本与 Ajax 进行交互。由于 JavaScript 应用程序越来越复杂，如果没有合适的工具和模式，那么 JavaScript 代码的高效编写、非重复性和可维护性方面会面临挑战。模型-视图-控制器 (MVC) 是一个常见模式，可用于服务器端开发以生成有组织以及易维护的代码。MVC 支持将数据（比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象）从表示层或从页面的文档对象模型 (document object model, DOM) 中分离出来，也可适用于客户端开发。

Backbone（也称为 Backbone.js）是由 创建的一个轻量级库，可用于创建 MVC 类应用程序。Backbone：

模型、视图、集合和路由器是 Backbone 框架中的主要组件。在 Backbone 中，模型会存储通过 RESTful JSON 接口从服务器检索到的数据。模型与视图密切关联，负责为特定 UI 组件渲染 HTML 并处理元素上触发的事件，这也是视图本身的一部分。

常用缩略词

在本文中，我们将学习几个不同的 Backbone.js 框架组件。研究 MVC 如何应用于 Backbone。通过这些实例，看看在创建 Ajax 应用程序或者单页界面 (SPI) 时 Backbone 是多么的重要。

本文使用的源代码。

SPI 应用程序：Backbone.Router 和 Backbone.history

含有大量 Ajax 交互的应用程序越来越像那些无页面刷新的应用程序。这些应用程序常常试图限制与单个页面的交互。该 SPI 方法提高了效率和速度，并使整个应用程序变得更灵敏。状态概念代替了页面概念。散列 (Hash) 片段被用于识别一个特定状态。散列片段 是 URL 中散列标签 (#) 后的那部分，是该类应用程序的关键元素。 显示了一个 SPI 应用程序使用两个不同的散列片段产生的两个不同状态。

清单 1. SPI 或 Ajax 应用程序中的两个不同状态

#/state1 #/state2

Backbone 提供一个称为路由器（版本 0.5 前称之为控制器）的组件来路由客户端状态。路由器可以扩展 Backbone.Router 函数，且包含一个散列映射（routes 属性）将状态与活动关联起来。当应用程序达到相关状态时，会触发一个特定活动。 展示了一个 Backbone 路由器示例。

清单 2. Backbone.Router 示例：routers.js

App.Routers.Main = Backbone.Router.extend({ // Hash maps for routes routes : { "" : "index", "/teams" : "getTeams", "/teams/:country" : "getTeamsCountry", "/teams/:country/:name : "getTeam" "*error" : "fourOfour" }, index: function(){ // Homepage }, getTeams: function() { // List all teams }, getTeamsCountry: function(country) { // Get list of teams for specific country }, getTeam: function(country, name) { // Get the teams for a specific country and with a specific name }, fourOfour: function(error) { // 404 page } });

创建的每个状态可以为书签。当 URL 碰到类似下面情况时，会调用这 5 个活动（index、getTeams、getTeamsCountry、getTeamCountry 和 fourOfour）。

要启动 Backbone，先实例化页面加载的路由器，并通过指令 Backbone.history.start() 方法监视散列片段中的任何变更，如 所示。

清单 3. 应用程序实例化（使用 jQuery）

$(function(){ var router = new App.Routers.Main(); Backbone.history.start({pushState : true}); })

当实例化路由器时，会生成 Backbone.history 对象；它将自动引用 Backbone.History 函数。Backbone.History 负责匹配路由和 router 对象中定义的活动。start() 方法触发后，将创建 Backbone.history 的 fragment 属性。它包含散列片段的值。该序列在根据状态次序管理浏览器历史方面十分有用。用户如果想要返回前一状态，单击浏览器的返回按钮。

在 的示例中，通过一个启用 HTML5 特性 pushState 的配置调用 start() 方法。对于那些支持 pushState 的浏览器，Backbone 将监视 popstate 事件以触发一个新状态。如果浏览器不能支持 HTML5 特性，那么 onhashchange 活动会被监视。如果浏览器不支持该事件，轮询技术将监视 URL 散列片段的任何更改。

模型和集合

模型和集合是 Backbone.js 的重要组件，模型将数据（通常是来自服务器的数据）存储在键值对中。要创建一个模型，需要扩展 Backbone.Model，如 所示。

清单 4. Backbone.Model 创建

App.Models.Team = Backbone.Model.extend({ defaults : { // default attributes } // Domain-specific methods go here });

App.Models.Team 函数是一个新模型函数，但是必须创建一个实例才能在应用程序中使用特定模型，如 所示。

清单 5. 模型实例化

var team1 = new App.Models.Team();

现在，变量 team1 有一个名为 cid 的字段名，这是一个客户端标识符，形式为 "c" 再加上一个数字（例如，c0、c1、c2）。模型是通过存储在散列映射中的属性来定义的。属性可以在实例化时进行设置，或者使用 set() 方法设置。属性值可通过 get() 方法检索。 显示了如何通过实例化或 get()/set() 方法设置和获取属性。

清单 6. 模型实例化和 get/set 方法

// "name" attribute is set into the model var team1 = new App.Models.Team({ name : "name1" }); console.log(team1.get("name")); // prints "name1" // "name" attribute is set with a new value team1.set({ name : "name2" }); console.log(team1.get("name")); //prints "name2"

当使用 JavaScript 对象时，使用 set() 方法创建或者设置属性值的原因并不是显而易见的。其中一个原因是为了更新此值，如 所示。

清单 7. 以错误的方法更新属性

team1.attributes.name = "name2";

为了避免 使用 清单 7 中的代码，使用 set() 是改变模型状态并触发其变更事件的唯一方法。使用 set() 提升封装原则。 展示了如何将一个事件处理程序绑到发生变更的事件中。该事件处理程序包含一个 alert，在调用 set() 方法时会被触发，如 所示。但是，在使用 中的代码时不触发 alert。

清单 8. 更改 App.Models.Team 模型中的事件处理程序

App.Models.Team = Backbone.Model.extend({ initialize : function(){ this.bind("change", this.changed); }, changed : function(){ alert("changed"); } });

Backbone 的另一个优势是易于通过 Ajax 交互与服务器进行通信。在模型上调用一个 save() 方法会通过 REST JSON API 异步将当前状态保存到服务器。 展示了此示例。

清单 9. 在模型对象上调用 save 方法

barca.save();