了解Backbone如何用于创建Ajax应用程序或单页界面

Backbone 是一个 ">JavaScript 框架,可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。在本文中,我们将了解 Backbone 如何用于创建 Ajax 应用程序或单页界面。

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/#/state1http://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 }});

创建的每个状态可以为书签。当 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 所示。

清单 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 属性。它包含散列片段的值。该序列在根据状态次序管理浏览器历史方面十分有用。用户如果想要返回前一状态,单击浏览器的返回按钮。

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

时间: 2024-09-29 06:57:17

了解Backbone如何用于创建Ajax应用程序或单页界面的相关文章

领先技术: 单页界面和AJAX模式

目录 AJAX 模式的影响 单页界面模型 单页界面模型的 缺点 可访问的富 Internet 应用程序 AJAX 模式概述 唯一 URL 模式 超时模式 与当今构建的绝大多数 Web 应用程序所采用 的开发模式相比,AJAX 对 Web 解决方案架构师而言意味着一种模式转变.它立 足于一些新的原则和规则来解释基于 Web 的系统的行为,并要求采用一些新的 算法来实现它们. AJAX 背后的主要原则是用户将纯数据发送到 Web 服 务器,然后接收更多的纯数据. AJAX 的第二个原则是用户自行协调

使用Vue.js创建一个时间跟踪的单页应用_javascript技巧

Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

Pork Explosion漏洞:它是如何被用于创建Android后门程序的?

在设备制造商富士康的应用引导程序中发现了可创建Android后门Pork Explosion的漏洞,虽然受影响设备范围不大,但该漏洞可能带来严重风险.在这种情况下,该应用引导程序是如何创建后门程序的? 研究人员Jon Sawyer在InFocus和Nextbit智能手机中发现一种漏洞,该漏洞是富士康在设备构建和组装过程中引入的. 该后门程序是在富士康设计和制造过程中创建的,它似乎是调试环境的一部分,用于在开发阶段对设备进行故障排除.在调试环境中这是必要的做法,但这应该在批量生产之前予以禁用,以保

GWT开发AJAX应用程序教程

一. 引言 如果你是一个Java软件和Ajax开发者,那么,Google Web Toolkit(GWT)应该已经引起你的关注. Google公司已经于2006年5月在Apache许可协议下发布了这种免费的开发工具包.GWT的设计目的是为了简化用Java语言开发Ajax应用程序.Google初始发行的beta版本可以适用于Windows和Linux平台,并许诺稍后要发行一个Mac OS X版本. 本文将探讨在Mac OS X上使用GWT和熟悉的Java工具,例如Apache Ant,Tomcat

使用Google Web Toolkit、Apache Derby和Eclipse构建Ajax应用程序 1

GWT 使得构建富 Ajax 浏览器客户机界面比构建传统 Java GUI 界面还要轻松.然而,即使是 GWT 这样出色的技术也无法独自构建出一个完整的 Web 应用程序.您还必须有一个服务器上的数据存储和某种类型的框架,以便将数据转换成 GWT 可从服务器传递给其客户的 Java 对象.在这一系列文章中,您将使用 Apache Derby 这个 100% 纯 Java 数据库,可将其嵌入与其余服务器端代码相同的 Java 虚拟机(JVM)之中. 本系列的第一篇文章主要探讨 GWT.在这里,您将

追求代码质量: 对Ajax应用程序进行单元测试

使用 GWT 更轻松地测试异步应用程序 简介: 您可能从编写 Ajax 应用程序中获得了极大乐趣,但是对它们执行单 元测试却着实让人头痛. 在本文中,Andrew Glover 着手解决 Ajax 的弱点( 其中之一),即应对异步 Web 应用程序执行单元测试的固有挑战.幸运的是, 他发现在 Google Web Toolkit 的帮助下,解决这个特殊的代码质量问题要比预 想的容易. Ajax 在近期无疑是 Web 开发界最时髦的字眼之一 -- 与 Ajax 相关的工具.框架.书籍以及 Web

像专业人员一样开发Ajax应用程序,第2部分

使用 Scriptaculous JavaScript 库和 script.aculo.us 本文是包含三部分的系列文章的第 2 部分,这个系列讨论可以用来创建 Ajax 应用程序的流行的 JavaScript 库.在 第 1 部分 中,学习了如何用 Prototype 库创建 一个用来管理歌曲的 Web 应用程序.在本文中,将使用 Scriptaculous 库构建一个用来管理照片的 Web 应用程序. 本文使用的是 Scriptaculous 的最新版本 1.8.1(参见 参考资料 中的链接

最优化跨浏览器Ajax应用程序

简介:如果所有的浏览器.计算机型号和 Ajax 应用程序的用户都一样,对开发人员来说,那真是妙 极了.但实际的情况是它们往往各不相同.在跨浏览器.计算机和单个用户设置方面开发行为可预知的 应用程序时,开发人员往往需要面对重重困难.当用户将 Ajax 应用程序从一个浏览器类型转换到另一 个浏览器类型时(尤其是在将 Ajax 应用程序传递给 Web 服务门户时),由于每个浏览器固有的限制, 无法保证拥有相同的浏览器体验.在本文中,作者 Judith Myerson 简单介绍了这些限制以及应该着重 避

移动开发-在移动界面控件Essential Studio for mobile MVC中如何创建Razor应用程序平台

问题描述 在移动界面控件Essential Studio for mobile MVC中如何创建Razor应用程序平台 在移动界面控件Essential Studio for mobile MVC中如何创建Razor应用程序平台····?