这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下。
Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效。
定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释。
下面我们来定义一个 Router:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
alert(actions);
})
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
现在,我们就定义好了一个 Router 了,但此时 Router 并未匹配特定的 URL,接下来我们开始详细讲解 Router 是如何工作的。
动态路由选择
Backbone 允许你定义带有特定参数的 Router。例如,你可能希望通过一个特定的 id 接收一个 post,比如这样一个 URL:"http://example.com/#/posts/12",一旦这个 Router 被激活,你就可以取得一个 id 为12的 post。接下来,我们就来定义这个 Router:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id": "getPost",
"*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
// 注意,参数通过这里进行传递
alert( "Get post number " + id );
});
app_router.on('route:defaultRoute', function (actions) {
alert( actions );
});
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
匹配规则
Backbone 使用两种形式的变量来设置 Router 的匹配规则。第一种是 :,它可以匹配 URL 中斜杠之间的任意参数,另一种是 *,它用来匹配斜杠后面的所有部分。注意,由于第二种形式的模糊性大于第一种,所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中,第一种规则可能返回一个或多个参数,第二种规则将整个匹配结果作为一个参数返回。
接下来,我们用实例来说明:
routes:{
"posts/:id": "getPost",
// <a href="http://example.com/#/posts/121">Example</a>
"download/*path": "downloadFile",
// <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
":route/:action": "loadView",
// <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
},
app_router.on('route:getPost', function( id ){
alert(id); // 匹配后,传递过来的参数为 12
});
app_router.on('route:downloadFile', function( path ){
alert(path); // 匹配后,整个匹配结果作为一个参数返回,路径为 user/images/hey.gif
});
app_router.on('route:loadView', function( route, action ){
alert(route + "_" + action); // 匹配后,传递过来两个参数,此时会弹出 dashboard_graph
});
你可能经常听说“路由器”这个词,但它常常是指一种网络设备,这种设备是网络连接、数据传输的导航和枢纽。而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方法。
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心跳的方式监听。
pushState规则
Backbone.History还支持pushState方式的URL,pushState是HTML5提供的一种新特性,它能操作当前浏览器的URL(而不是仅仅改变锚点),同时不会导致页面刷新,从而使单页应用使用起来更像一套完整的流程。
要使用pushState特性,你需要先了解HTML5为该特性提供的一些方法和事件(这些方法都被定义在window.history对象中):
1.pushState():该方法可以将指定的URL添加一个新的history实体到浏览器历史里
2.replaceState():该方法可以将当前的history实体替换为指定的URL
调用pushState()和replaceState()方法,仅仅是替换当前页面的URL,而并不会真正转到这个URL地址(当使用后退或前进按钮时,也不会跳转到该URL),我们可以通过onpopstate事件来监听这两个方法引起的URL变化。
路由相关方法
1.route()方法
在设定好路由规则之后,如果需要动态调整,可以调用Router.route()方法来动态添加路由规则及Action方法,
例如:
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){
// todo
});
我们调用route()方法时,给定的规则不仅仅可以是字符串,也可以是一个正则表达式:
router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){
// todo
});
2.navigate()方法
在前面的例子中,URL规则都是由我们手动输入触发的,在实际应用中,有时可能需要手动进行跳转、导航,这时可以调用
Router.navigate()方法进行控制,例如:
router.navigate('topic/1000', {
trigger: true
});
这段代码将URL更改为http://localhost/index.html#topic/1000,并触发了renderDetail方法。需要注意的是,我们在第二个参数传入了trigger配置,该配置用于表示更改URL的同时是否触发相应的Action方法。
3.stop()方法
还记得我们是通过Backbone.history.start()方法来启动路由监听的,你也可以随时调用Backbone.history.stop()方法来停止监听,例如:
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {
Backbone.history.stop();
});
运行这段代码,并访问URL:http://localhost/index.html#topic/5/20,你会发现这个Action被执行之后,监听已经不再生效了。
全面解析JavaScript的Backbone.js框架中的Router路由的更多相关文章
-
深入解析Backbone.js框架的依赖库Underscore.js的作用
这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...
-
在 node.js 的 express web 框架中自动注册路由
该方法主要是动态注册自己写的 router . 注册器 router 文件名为 loader.js . var express = require('express'); var fs = requ ...
-
CI 框架中的自定义路由规则
在 CI 框架中,一个 URL 和它对应的控制器中的类以及类中的方法是一一对应的,如: www.test.com/user/info/zhaoyingnan 其中 user 对应的就是控制器中的 us ...
-
[转] 主流JS框架中DOMReady事件的实现
在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完 ...
-
getPropertyValue (实现 js框架中 css 的最终调用的函数)
,取得元素最终计算出的css 样式 var a = document.getElementById("content"); alert("style "+ ...
-
KoaHub平台基于Node.js开发的Koa router路由插件代码信息详情
koa-router Router middleware for koa. Provides RESTful resource routing. koa-router Router mid ...
-
前端mvc框架backbone.js入门[转]
原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...
-
前端mvc框架backbone.js入门
关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...
-
Backbone.js的技巧和模式
Backbone.js的技巧和模式 Backbone.js的技巧和模式 本文由白牙根据Phillip Whisenhunt的<Backbone.js Tips And Patterns> ...
随机推荐
-
Blogging with github Pages
参考: 阮大大:搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 使用BitBucket和FTPloy私有Jekyll源码 http://www.pchou.inf ...
-
python 中的sort 和java中的Collections.sort()函数的使用
x=[1,2,3] x.sort()对的,x这个都变了 y=x.sort()错误 y=sorted(x)对的,x拍好序的一个副本 python中用匿名函数和自定义函数排序:(很奇怪的是比较函数返回的是 ...
-
个人作业—Week2:微软必应词典案例分析
调研.评测 bug报告: 标题:Window 10版必应词典客户端口语练习功能无法使用 环境:Window 10, 微软必应词典(UWP) 版本2.6.1.0,屏幕无重力感应模块 重现步骤: 1) ...
-
matplotlib 安装与使用
1.在ubuntu下输入 sudo apt-get install python-matplotlib 安装matplotlib 2.简单代码使用
-
Office 2013
Microsoft Office 2013 Professional Plus 32位简体中文版文件名: SW_DVD5_Office_Professional_Plus_2013_W32_ChnSi ...
-
点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件
<title>无标题文档</title> <script type="text/javascript" language="javascri ...
-
判断是否支持WebP
PC端,触屏版: 前端JS方案——利用img标签加载一张base64的WebP图片,在img标签的onload事件中判断该图片是否具有宽高的属性,若有表示支持webP,若没有表示不支持webP.后台判 ...
-
MOBA 游戏技能系统设计 2.0
随着游戏开发的完整度提升,技能系统的设计复杂性也越来越高,导致了用模板方式的配置方法和处理方法会导致以下几个问题: 代码冗余 排错困难 配置项冗余 熟悉业务流程时间长 扩展性低 经过我思考决定重写之. ...
-
HTML学习笔记Day2
一.部分表单元素的使用 1.表单的作用:用来收集用户信息 2.表单元素 (1)表单控件: 单行文本框:<input type="text" value="默认值& ...
-
Android 耳机插入过程分析
Android 耳机插入过程分析 参考链接: https://www.jianshu.com/p/d82a8dabb3e7 初始化: 10-26 07:40:43.932 1414 1414 I Sy ...