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

川长思鸟来 2022-06-02 22:29 215阅读 0赞

# 转自：http://blog.csdn.net/likun557/article/details/53170680 #

# 10. Router和History (路由控制) #

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

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

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

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

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

\[javascript\]  [view plain][]  [copy][view plain]

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方法，例如：

\[javascript\]  [view plain][]  [copy][view plain]

1.  router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) \{  
2.      // todo  
3.  \});