全面解析JavaScript的Backbone.js框架中的Router路由

Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效。
定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释。
下面我们来定义一个 Router:

<script> var AppRouter = Backbone.Router.extend({ routes: { "*actions": "defaultRoute" // 匹配 #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方法。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpssz.html