当前位置: 首页 > 网页设计 > 网页制作技巧 > 正文

Backbone详细教程

时间:2013-11-09 ibm Sebastiano Armeli-Ba

简介

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 并处理元素上触发 的事件,这也是视图本身的一部分。

常用缩略词

DOM:文档对象模型

MVC:模型-视图-控制器

SPI:单页界面

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

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
   }
});