一、应用场景
监听浏览器地址栏URL的hash值（#后面的部分）的变化，用正则匹配出参数执行相应的JS方法。URL地址的hash部分充当业务逻辑的分发单位。
示例：
<!DOCTYPE html> 
<html> 
<head> 
<title>the5fire-backbone-router</title> 
</head> 
<body> 
<a href="#/posts/120">Post 120</a> 
<a href="#/download/user/images/hey.gif">download gif</a> 
<a href="#/dashboard/graph">Load Route/Action View</a> 
</body> 
<script src="http://backbonejs.org/test/vendor/jquery.js"></script> 
<script src="http://backbonejs.org/test/vendor/underscore.js"></script> 
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> 
<script> 
(function ($) { 
//Backbone中的router，见名知意，router有路由的意思，显然这里是要控制url的。 
//Backbone.Router会把你连接中的#标签当做是url路径 
//从上面已经可以看到匹配#标签之后内容的方法，有两种： 
//一种是用“:”来把#后面的对应的位置作为参数；还有一种是“*”，它可以匹配所有的url，下面再来演练一下。 
var AppRouter = Backbone.Router.extend({ 
routes: { 
"posts/:id" : "getPost", 
"download/*path": "downloadFile", //对应的链接为<a href="#/download/user/images/hey.gif">download gif</a> 
":route/:action": "loadView", //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a> 
"*actions" : "defaultRoute" 
}, 
getPost: function(id) { 
alert(id); 
}, 
defaultRoute : function(actions){ 
alert(actions); 
}, 
downloadFile: function( path ){ 
alert(path); // user/images/hey.gif 
}, 
loadView: function( route, action ){ 
alert(route + "_" + action); // dashboard_graph 
} 
});

var app_router = new AppRouter;

Backbone.history.start();

})(jQuery); 
</script> 
</html>

 
 
二、构造函数
构造函数交简单，唯一需要注意的是this._bindRoutes()
将你自定义的routes中的键值对传入方法this.route
可以大胆猜测，Backbone.history.route方法其实是将正则（键被转化成了正则表达式），正则对应的回调添加到一个数组中。当hash值变化时取当前的hash值循环数组找到与正则对应的回调并执行。这个回调就是我们自定义的routes对象的值：
 
看代码Backbone.history.route：
 
二、Router的核心问题是：如何监听URL hash值的变化？查看History.prototype上的start方法：
先判断浏览器是否原生支持事件：popsatte、hashchange，如果不支持则使用定时间setInterval循环执行方法：checkUrl,事件间隔interval为50毫秒。可见低版本的浏览器要实现Router的功能是有性能损耗的。如果你的应用需要兼容低版本的浏览器，慎用Router
 
三、checkUrl方法。
handler.callback就是我们调用Backbone.history.route方法添加到handlers数组中的对象的callback属性：
 
关于浏览器监听hash值变化的原生方法可戳这里：

Router模块的更多相关文章

  1. Node.js -- Router模块中有一个param方法

    这段时间一直有在看Express框架的API,最近刚看到Router,以下是我认为需要注意的地方: Router模块中有一个param方法,刚开始看得有点模糊,官网大概是这么描述的: 1 Map lo ...

  2. express源码剖析--Router模块

    1.加载模块执行代码: methods.forEach(function(method){ //method是http协议的各种请求方法,如:get,put,headee,post Route.pro ...

  3. .7-浅析express源码之Router模块(3)-app[METHODS]

    之前的讨论都局限于use方法,所有方式的请求会被通过,这一节讨论express内部如何处理特殊请求方法. 给个流程图咯~ 分别给出app.METHODS与router.METHODS: // app. ...

  4. .6-浅析express源码之Router模块(2)-router.use

    这一节继续深入Router模块,首先从最常用的use开始. router.use 方法源码如下: proto.use = function use(fn) { var offset = 0; var ...

  5. 联发科Mediatek工业路由芯片上网稳定低功耗的Router模块WiFi中继——无线AP定制方案

    Router模块又名路由器模块,是指将路由器的接口类型及部分扩展功能是可以根据实际需求来进行无线接入服务,允许其他无线设备接入,通过局域无线端或联网远程端,进行数据访问,对无线设备进行远程控制.常见的 ...

  6. .5-浅析express源码之Router模块(1)-默认中间件

    模块application已经完结,开始讲Router路由部分. 切入口仍然在application模块中,方法就是那个随处可见的lazyrouter. 基本上除了初始化init方法,其余的app.u ...

  7. angularJS中的ui-router和ng-grid模块

    关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里https://github. ...

  8. Backbone源码解析（五）：Route和History（路由）模块

    今天是四月十二号,距离上次写博已经将近二十天了.一直忙于工作,回家被看书的时间占用了.连续两个礼拜被频繁的足球篮球以及各种体育运动弄的精疲力竭,所以很少抽时间来写技术博客.今天抽出时间把backbon ...

  9. 用avalon实现一个完整的todomvc（带router）

    照着todomvc官网的例子,做了一个avalon版的todos,功能全都有了,而且加了router模块,比司徒大大写的都完善(≧▽≦)/~ js文件整整100行,初次使用avalon,书写过程中绕了 ...

随机推荐

  1. java处理中日文字符串的乱码问题

    ——杂言:前段时间在处理音频预览问题,详见关于audiojs的研究.期间,将远端的音频下载并缓存在本地过程中,涉及到java.io.*的几个操作,发生一些乱码问题. 我以前的处理是将本地的编码转换为U ...

  2. redis-数据类型-string、hash、list、set、zset

    String 类型操作string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象. $redis-> ...

  3. c#中Marshal.Copy()方法的使用

    c#中Marshal.Copy方法的使用 Marshal.copy()方法用来在托管对象(数组)和非托管对象(IntPtr)之间进行内容的复制 函数有很多重载,如下所示: Copy(array< ...

  4. nfs使用教程

    服务端 配置说明 文件名 /etc/exports 格式 <输出目录> [客户端 (访问权限,用户映射,其他) ] [客户端 (访问权限,用户映射,其他) ] 格式说明 输出目录:NFS系 ...

  5. [WIP]Vue CLI

    更新: 2019/05/30 文档: https://cli.vuejs.org/zh/  安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础   ...

  6. CodeForces 124C【连通块】

    思路: a素数->b合数 c素数->b合数 a,c属于一类 so,预处理相同的,并且计数.1000怎么搞都无压力: 我这里也预处理了字母个数,从集合大的枚举下来,每次拿字母个数最多的去匹配 ...

  7. PTA 1045【DP】

    思路: DP[ i ] 代表以值 i 结尾的当前最长长度. 每次枚举序列数组,dp[ i ] = max( dp[ i ] ,dp[ a[j] ] + 1); #include <bits/st ...

  8. Java实例——基于jsoup的简单爬虫实现（从智联获取工作信息）

    这几天在学习Java解析xml,突然想到Dom能不能解析html,结果试了半天行不通,然后就去查了一些资料,发现很多人都在用Jsoup解析html文件,然后研究了一下,写了一个简单的实例,感觉还有很多 ...

  9. 清北刷题冲刺 10-29 a.m

    遭遇 /* 因为选的楼是个集合,与顺序无关 而且总花费=c[1]+c[2]+c[3]+|h[1]-h[2]|+|h[2]-h[3]| 我们规定走的顺序从高到低,那么绝对值就可以去掉 所以就可以约掉中间 ...

  10. bzoj4873: [Shoi2017]寿司餐厅（最小割）

    传送门 大佬们是怎么一眼看出这是一个最大权闭合子图的……大佬好强->这里 1.把所有区间$(i,j)$看成一个点,如果权值大于0,则从$S$向他连边,容量为权值,否则从它向$T$连边,容量为权值 ...