首页 > 其他 > 详细

Router模块

时间:2014-07-16 18:01:00      阅读:371      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
一、应用场景
监听浏览器地址栏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>
 
 
二、构造函数
bubuko.com,布布扣
bubuko.com,布布扣
构造函数交简单,唯一需要注意的是this._bindRoutes()
bubuko.com,布布扣
bubuko.com,布布扣
将你自定义的routes中的键值对传入方法this.route
bubuko.com,布布扣
bubuko.com,布布扣
可以大胆猜测,Backbone.history.route方法其实是将正则(键被转化成了正则表达式),正则对应的回调添加到一个数组中。当hash值变化时取当前的hash值循环数组找到与正则对应的回调并执行。这个回调就是我们自定义的routes对象的值:
bubuko.com,布布扣
 bubuko.com,布布扣
看代码Backbone.history.route:
bubuko.com,布布扣
 bubuko.com,布布扣
二、Router的核心问题是:如何监听URL hash值的变化?查看History.prototype上的start方法:
bubuko.com,布布扣
bubuko.com,布布扣
先判断浏览器是否原生支持事件:popsatte、hashchange,如果不支持则使用定时间setInterval循环执行方法:checkUrl,事件间隔interval为50毫秒。可见低版本的浏览器要实现Router的功能是有性能损耗的。如果你的应用需要兼容低版本的浏览器,慎用Router
 
三、checkUrl方法。
bubuko.com,布布扣
bubuko.com,布布扣
handler.callback就是我们调用Backbone.history.route方法添加到handlers数组中的对象的callback属性:
bubuko.com,布布扣
 bubuko.com,布布扣
关于浏览器监听hash值变化的原生方法可戳这里:

Router模块,布布扣,bubuko.com

Router模块

原文:http://www.cnblogs.com/hellohuman/p/3847444.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!