一、应用场景
监听浏览器地址栏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. 关于android 数据库查询出现 _id column do not exist 的处理

    查询的字段必须带上_id字段,否则就会出现此类异常,导致程序崩溃

  2. [HDU1109]模拟退火算法

    模拟退火的基本思想: (1) 初始化:初始温度T(充分大),初始解状态S(是算法迭代的起点),每个T值的迭代次数L (2) 对k=1,……,L做第(3)至第6步: (3) 产生新解$S\prime $ ...

  3. [hdu1712]ACboy needs your help分组背包

    题意:一共$m$天,$n$门课程,每门课程花费$i$天得到$j$的价值,求最后获得的最大价值 解题关键:分组背包练习,注意循环的顺序不能颠倒 伪代码: $for$ 所有的组$k$   $for{\rm ...

  4. 业务逻辑:完成客户下单后前台系统的数据处理并调用后台系统服务处理业务 webservice接口调用 有用

    思路: 页面提交表单后,在Action类中将页面提交的参数进行组装,随后通过使用Webservice技术来远程调用后台系统的业务接口服务来进行订单的保存操作 操作步骤: 在前台系统的Action类中通 ...

  5. Pig Flatten 解包操作，解元组

    Flatten Operator The FLATTEN operator looks like a UDF syntactically, but it is actually an operator ...

  6. 转：Linux下用Jmeter做接口测试

    本地设计 首先在本地设计 Apache JMeter 测试计划,大家可以参考<接口测试之 JMeter 初探> ,这里不再重复. 服务器配置 确保服务器已经安装了JDK和Python. 在 ...

  7. 10、RNA-seq for DE analysis training（Mapping to assign reads to genes）

    1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...

  8. UVa 11020 Efficient Solutions (BST)

    题意:给按顺序给定 n 个人群,用x和y来描述,如果有没有任何一个x' < x y' <= y 或 x '<= x y' <= y,那么这个群体就是优势群体, 让你求出每放入一 ...

  9. 《Linux内核设计与实现》读书笔记（三）- Linux的进程

    进程是所有操作系统的核心概念,同样在linux上也不例外. 主要内容: 进程和线程 进程的生命周期 进程的创建 进程的终止 1. 进程和线程 进程和线程是程序运行时状态,是动态变化的,进程和线程的管理 ...

  10. 深度学习之Keras

    Keras简介 Keras是一个高层神经网络API,Keras完全由Python编写而成,使用Tensorflow.Theano及CNTK作为后端. 通过Python脚本查看Keras使用的后端 输出 ...