开始学习 Backbone （1）

look_w

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

• 强制依赖于 Underscore.js，Underscore.js 是一个实用型库
• 非强制依赖于 jQuery/Zepto
• 根据模型的变更自动更新应用程序的 HTML，有助于代码维护
• 促进客户端模板使用，避免了在 JavaScript 中嵌入 HTML 代码

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

• DOM：文档对象模型
• MVC：模型-视图-控制器
• SPI：单页界面

在本文中，我们将学习几个不同的 Backbone.js 框架组件。研究 MVC 如何应用于 Backbone。通过这些实例，看看在创建 Ajax 应用程序或者单页界面 (SPI) 时 Backbone 是多么的重要。
本文使用的源代码。
SPI 应用程序：Backbone.Router 和 Backbone.history含有大量 Ajax 交互的应用程序越来越像那些无页面刷新的应用程序。这些应用程序常常试图限制与单个页面的交互。该 SPI 方法提高了效率和速度，并使整个应用程序变得更灵敏。状态概念代替了页面概念。散列 (Hash) 片段被用于识别一个特定状态。散列片段 是 URL  中散列标签 (#) 后的那部分，是该类应用程序的关键元素。 显示了一个 SPI 应用程序使用两个不同的散列片段产生的两个不同状态。
清单 1. SPI 或 Ajax 应用程序中的两个不同状态

1 2	http://www.example.com/#/state1 http://www.example.com/#/state2

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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）。

• http://www.example.com 触发 index()
• http://www.example.com/#/teams 触发 getTeams()
• http://www.example.com/#/teams/country1 触发 getTeamsCountry() 传递 country1 作为参数
• http://www.example.com/#/teams/country1/team1 触发 getTeamCountry() 传递 country1 和 team1 作为参数
• http://www.example.com/#/something 触发 fourOfour() 以作 * （星号）使用。

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

1 2 3 4

$(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 散列片段的任何更改。