backbone简介_动力节点Java学院整理

简介

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

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

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

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

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

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

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

http://www.example.com/#/state1

http://www.example.com/#/state2

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