`

Backbone入门指南(七):Router和History (路由控制器)

阅读更多

本文转自:http://yujianshenbing.iteye.com/

 

10. Router和History (路由控制)

  Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文中称Action)。

  当我们开发一个单页应用时,常常会遇到这样两个问题:

  我们在同一个页面中通过用户的操作来隐藏、显示HTML块,为用户提供一个无刷新、完整流畅的体验,但用户可能并不知道他当前正处于同一个页面中,因此他希望通过浏览器的“前进”和“后退”按钮来返回和前进到上一步操作。当他真正这样操作时,会离开当前页面,这显然不是用户所期望的。

  另一个问题是用户在单页应用中操作,当他读到一篇好的文章,或看到一个中意的商品时,他可能会将URL收藏起来或分享给自己的好友。但当他下一次重新打开这个链接地址,看到的却是应用的初始化状态,而并不是当初那篇文章或那个商品。

 

  Backbone.Router为我们提供了解决这两个问题的方法,我们先来看一个例子:

 

Js代码   收藏代码
  1. var AppRouter = Backbone.Router.extend({  
  2.     routes : {  
  3.         '' : 'main',  
  4.         'topic' : 'renderList',  
  5.         'topic/:id' : 'renderDetail',  
  6.         '*error' : 'renderError'  
  7.     },  
  8.     main : function() {  
  9.         console.log('应用入口方法');  
  10.     },  
  11.     renderList : function() {  
  12.         console.log('渲染列表方法');  
  13.     },  
  14.     renderDetail : function(id) {  
  15.         console.log('渲染详情方法, id为: ' + id);  
  16.     },  
  17.     renderError : function(error) {  
  18.         console.log('URL错误, 错误信息: ' + error);  
  19.     }  
  20. });  
  21.   
  22. var router = new AppRouter();  
  23. Backbone.history.start();  

 

 

  将例子中的代码复制到你的页面中。假设你的页面地址为http://localhost/index.html,请依次访问下面的地址,并注意控制台的输出结果:

 

  • http://localhost/index.html // 输出:应用入口方法
  • http://localhost/index.html#topic // 输出:渲染列表方法
  • http://localhost/index.html#topic/1023 // 输出:渲染详情方法, id为:1023
  • http://localhost/index.html#about // 输出:URL错误, 错误信息: about

 

  然后再使用浏览器的“前进”、“返回”等按钮进行切换,你会看到当你的URL切换时,控制台输出了对应的结果,说明它已经调用了相应的方法。而在进行这些操时,页面并没有刷新。这个例子很好地解决了我们在一开始所说的两个问题。

 

10.1 路由规则设定

  你可能经常听说“路由器”这个词,但它常常是指一种网络设备,这种设备是网络连接、数据传输的导航和枢纽。而Backbone中的“路由器”功能与它类似,从上面的例子中你就能看出,它可以将不同的URL锚点导航到对应的Action方法。

  (许多服务端Web框架中也提供了这样的机制,但Backbone.Router更侧重前端单页应用的导航。)

 

  Backbone的路由导航是由Backbone.Router和Backbone.History两个类共同完成的:

Router类用于定义和解析路由规则,并将URL映射到Action。

History类用于监听URL的变化,和触发Action方法。

  我们一般不会直接实例化一个History,因为我们在第一次创建Router实例时,会自动创建一个History的单例对象,你可以通过Backbone.history来访问这个对象。

 

  要使用路由功能,首先我们需要定义一个Router类来声明需要监听的URL规则和Action,在刚才的例子中,我们在定义时通过routes属性来定义需要监听的URL列表,其中Key表示URL规则,Value表示当URL处于该规则时所执行的Action方法。

10.2 Hash规则

  URL规则表示当前URL中的Hash(锚点)片段,我们除了能在规则中指定一般的字符串外,还需要注意两种特别的动态规则:

  规则中以/(斜线)为分隔的一段字符串,在Router类内部会被转换为表达式([^\/]+),表示以/(斜线)开头的多个字符,如果在这一段规则中设置了:(冒号),则表示URL中这一段字符串将被作为参数传递给Action。

  例如我们设置了规则topic/:id,当锚点为#topic/1023时,1023将被作为参数id传递给Action,规则中的参数名(:id)一般会和Action方法的形参名称相同,虽然Router并没有这样的限制,但使用相同的参数名更容易让人理解。

  规则中的*(星号)会在Router内部被转换为表达式(.*?),表示零个或多个任意字符,与:(冒号)规则相比,*(星号)没有/(斜线)分隔的限制,就像我们在上面的例子中定义的*error规则一样。

  Router中的*(星号)规则在被转换为正则表达式后使用非贪婪模式,因此你可以使用例如这样的组合规则:*type/:id,它能匹配#hot/1023,同时会将hot和1023作为参数传递给Action方法。

 

  上面介绍了规则的定义方式,这些规则都会对应一个Action方法名称,该方法必须处于Router对象中。

  在定义好Router类之后,我们需要实例化一个Router对象,并调用Backbone.history对象的start()方法,该方法会启动对URL的监听。在History对象内部,默认会通过onhashchange事件监听URL中Hash(锚点)的变化,对于不支持onhashchange事件的浏览器(例如IE6),History会通过setInterval心跳的方式监听。

10.3 pushState规则

  Backbone.History还支持pushState方式的URL,pushState是HTML5提供的一种新特性,它能操作当前浏览器的URL(而不是仅仅改变锚点),同时不会导致页面刷新,从而使单页应用使用起来更像一套完整的流程。

  要使用pushState特性,你需要先了解HTML5为该特性提供的一些方法和事件(这些方法都被定义在window.history对象中):

 

  • pushState():该方法可以将指定的URL添加一个新的history实体到浏览器历史里
  • replaceState():该方法可以将当前的history实体替换为指定的URL

 

  调用pushState()和replaceState()方法,仅仅是替换当前页面的URL,而并不会真正转到这个URL地址(当使用后退或前进按钮时,也不会跳转到该URL),我们可以通过onpopstate事件来监听这两个方法引起的URL变化。

  值得注意的是,使用pushState特性时,需要在服务器端对URL规则进行配置,否则用户在下一次访问该地址时,可能无法正确导航到当前页面。另外低于以下版本的浏览器是不支持该特性的:Chrome 5,Firefox 4.0,IE 10,Opera 11.5,Safari 5.0

  关于pushState规则这里不再深入讨论,如果需要了解,请参考我所注释的Backbone源码。

10.4 路由相关方法

  route()方法

  在设定好路由规则之后,如果需要动态调整,可以调用Router.route()方法来动态添加路由规则及Action方法,例如:

 

Js代码   收藏代码
  1. router.route('topic/:pageno/:pagesize''page'function(pageno, pagesize){  
  2.     // todo  
  3. });  

 

 

  我们调用route()方法时,给定的规则不仅仅可以是字符串,也可以是一个正则表达式:

 

Js代码   收藏代码
  1. router.route(/^topic/(.*?)/(.*?)$/, 'page'function(pageno, pagesize){  
  2.     // todo  
  3. });  

 

 

 

  navigate()方法

  在前面的例子中,URL规则都是由我们手动输入触发的,在实际应用中,有时可能需要手动进行跳转、导航,这时可以调用Router.navigate()方法进行控制,例如:

 

Js代码   收藏代码
  1. router.navigate('topic/1000', {  
  2.     trigger: true  
  3. });  

 

 

  这段代码将URL更改为http://localhost/index.html#topic/1000,并触发了renderDetail方法。需要注意的是,我们在第二个参数传入了trigger配置,该配置用于表示更改URL的同时是否触发相应的Action方法。

 

  stop()方法

  还记得我们是通过Backbone.history.start()方法来启动路由监听的,你也可以随时调用Backbone.history.stop()方法来停止监听,例如:

 

Js代码   收藏代码
  1. router.route('topic/:pageno/:pagesize''page'function(pageno, pagesize) {  
  2.     Backbone.history.stop();  
  3. });  

 

 

  运行这段代码,并访问URL:http://localhost/index.html#topic/5/20,你会发现这个Action被执行之后,监听已经不再生效了。

分享到:
评论

相关推荐

    全面解析JavaScript的Backbone.js框架中的Router路由

    在JavaScript的世界里,尤其是Web应用开发中,Backbone.js是一个非常重要的轻量级MVC(模型-视图-控制器)框架。它提供了许多基础结构,帮助开发者构建可维护的前端应用。其中,Router是Backbone.js的核心组件之一,...

    backbone.js入门教程

    无论是数据的管理、视图的渲染还是 URL 的路由,Backbone.js 都提供了一系列工具和方法来帮助开发者更好地组织和控制应用的各个方面。随着对 Backbone.js 的深入了解,开发者可以更加灵活地应对各种实际项目的需求。

    Backbone-Router:学习骨干路由器

    Backbone.Router是Backbone.js库的一个核心组件,它是基于JavaScript的MVC(模型-视图-控制器)框架。在这个框架中,Router扮演着应用程序路由的核心角色,它将URL哈希片段与应用程序的不同部分关联起来,实现了页面...

    BackBone介绍及使用

    Backbone.history.start(); ``` **三、源码分析** Backbone.js的源码简洁明了,开发者可以通过阅读源码来理解其内部工作原理,从而更好地定制和优化项目。例如,可以深入研究事件系统的实现,了解Model和View如何...

    Backbone制作联系人管理之过滤和路由(2)

    在本篇博文中,我们将深入探讨如何使用Backbone.js框架构建一个联系人管理应用,并重点关注其中的过滤和路由功能。Backbone.js是一个轻量级的JavaScript库,它为构建复杂前端应用提供了模型-视图-控制器(MVC)架构...

    Backbone.js实战.zip

    Backbone.js的核心组件包括Model、Collection、View、Router和Event。以下是对这些关键知识点的详细解释: 1. Model:Model是Backbone.js中的数据模型,用于封装应用程序的数据和业务逻辑。它与服务器上的数据源...

    zepto-router:一个zepto插件,利用HTML5 History API实现的路由控制插件,适用于单页面应用

    一个zepto插件,利用HTML5 History API实现的路由控制插件,适用于移动端单页面应用。 需要后台支持,当浏览器访问一个地址时,服务器返回的是这个单页面。前端路由由这个单页面来控制。 不支持hash路径控制。 提供...

    backbone 实例

    Router负责页面路由管理,通过监听浏览器的URL变化触发相应的功能。这在单页应用中尤为重要,允许我们实现无刷新的页面切换: ```javascript var AppRouter = Backbone.Router.extend({ routes: { "": "home", ...

    backbone学习例子-可编辑的表格

    Backbone.js 是一款轻量级的JavaScript库,用于构建客户端的MVC(模型-视图-控制器)架构。它提供了一种结构化的方式来组织复杂的Web应用,使得代码更易于理解和维护。在这个“backbone学习例子-可编辑的表格”中,...

    Backbone.js开发秘笈源码

    路由器是Backbone.js中的导航控制器,它监听浏览器的哈希变化(或HTML5 History API),根据路由模式执行相应的方法,实现页面的无刷新跳转。 5. **视图事件和模型事件** Backbone.js使用事件系统连接视图和模型...

    backbone 资料

    Router是Backbone中的路由组件,它允许你通过哈希片段(hashbangs)或者HTML5 History API来控制应用程序的导航。通过定义路由模式,你可以将URL路径映射到特定的函数,实现页面无刷新的切换。 在实际开发中,...

    JavaScript的Backbone.js框架入门学习指引_.docx

    ### JavaScript的Backbone.js框架入门学习指引 #### 一、简介与背景 随着Web应用程序的复杂度不断提高,传统的JavaScript编程模式越来越难以满足大型项目的开发需求。为了更好地管理和组织前端代码,许多开发者...

    Backbone素材资料

    4. **Router**:Backbone的路由器允许你通过哈希片段(#)或HTML5 History API来映射URL路由,实现页面无刷新的导航。这使得Backbone应用可以被书签和历史记录支持。 5. **Events**:Backbone的事件系统允许不同...

    透过源码学前端 之 Backbone 一

    Router是路由控制器,它允许我们使用哈希bang(#)或HTML5 History API来实现页面的无刷新导航。通过定义路由规则,我们可以将URL映射到特定的函数,从而实现前端的路由控制。 Event是事件系统,它贯穿于整个...

    backbone-router-example

    **Backbone.js Router 示例应用详解** Backbone.js 是一个轻量级的...理解并掌握Backbone Router对于开发高效的SPA至关重要,因为它提供了对浏览器URL的控制,使得应用能够更好地响应用户的交互和历史记录操作。

    backbone框架在实例中的应用~简单易学

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用程序而设计。它基于MVC(Model-View-Controller)模式,强调数据模型与视图的分离,使得开发者能够更好地组织代码,提高项目的可扩展性。...

    backbone.js API文档 列子

    **Backbone.Router**是Backbone.js中的路由管理器,它允许你在URL变化时执行特定的函数,实现了前端的路由导航功能。通过定义路由规则,你可以将URL映射到特定的视图或功能。 **Backbone.history**是后台监控浏览器...

Global site tag (gtag.js) - Google Analytics