<!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>
可以大胆猜测,Backbone.history.route方法其实是将正则(键被转化成了正则表达式),正则对应的回调添加到一个数组中。当hash值变化时取当前的hash值循环数组找到与正则对应的回调并执行。这个回调就是我们自定义的routes对象的值:
先判断浏览器是否原生支持事件:popsatte、hashchange,如果不支持则使用定时间setInterval循环执行方法:checkUrl,事件间隔interval为50毫秒。可见低版本的浏览器要实现Router的功能是有性能损耗的。如果你的应用需要兼容低版本的浏览器,慎用Router