认识 Backbone（三） : 什么是 Router

ShowerSun 发布于2019-08-22 11:28 / 413人阅读

摘要：中的充当路由的作用，控制的走向，当在中使用标签时生效。任一形式匹配的结果会以参数的形式传递到相关的函数中，第一种规则可能返回一个或多个参数，第二种规则将整个匹配结果作为一个参数返回。

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

现在，我们就定义好了一个 Router 了，但此时 Router 并未匹配特定的 URL，接下来我们开始详细讲解 Router 是如何工作的。

动态路由选择

Backbone 允许你定义带有特定参数的 Router。例如，你可能希望通过一个特定的 id 接收一个 post，比如这样一个 URL："http://example.com/#/posts/12"，一旦这个 Router 被激活，你就可以取得一个 id 为12的 post。接下来，我们就来定义这个 Router：

匹配规则

Backbone 使用两种形式的变量来设置 Router 的匹配规则。第一种是 :，它可以匹配 URL 中斜杠之间的任意参数，另一种是 *，它用来匹配斜杠后面的所有部分。注意，由于第二种形式的模糊性大于第一种，所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中，第一种规则可能返回一个或多个参数，第二种规则将整个匹配结果作为一个参数返回。
接下来，我们用实例来说明：

routes:{

    "posts/:id": "getPost",
    // Example

    "download/*path": "downloadFile",
    // Download

    ":route/:action": "loadView",
    // Load Route/Action View

},

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 
});

参考

http://backbonetutorials.com/what-is-a-router/#/posts/120

云服务器 GPU云服务器什么是两地三中心三什么是深度学习什么是MySQL两地三中心三一小程序用的是什么云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92317.html

Backbone源码解读（三）

摘要：事件关于路由触发事件是通过两个函数来完成的，它们分别是和前者会检测路由是否发生了改变，如果改变了就会触发函数并调用函数，而后者会通过路由片段来找到相关的事件函数来触发。注意：强烈建议一边阅读源码一边阅读本文。终于到了backbone源码解读的最后一篇，这一篇和前面几篇时间上有一定的间隔（因为要回学校有一堆乱七八糟的事...）。在这一篇里面会讲解Bakcbone的sync & rou...

feng409 2019-08-20 10:43 评论0 收藏0
基于 Backbone + node 的个人简历生成器（个人学习总结）

摘要：应用的功能这个应用是一个个人简历生成器。比较好的教程有这一个。这样的命名污染问题自然显而易见。而且发出多次请求也会影响性能。明显不利于维护。然而我希望能够不发生变化，因为是在文件的前提下的标签页，不能换一个标签就重建一个。为什么学习backbone？这是个好问题。在这个前端框架爆炸的年代，比起backbone，对开发来说有更多更好的选择，react，vue，angular等等。但这些...

lansheng228 2019-08-20 10:24 评论0 收藏0
Backbone 源码解读（一）

1. 开场 1.1 MVC？ MVC是一种GUI软件的一种架构模式。它的目的是将软件的数据层（Model）和视图（view）分开。Model连接数据库，实现数据的交互。用户不能直接和数据打交道，而是需要通过操作视图，然后通过controller对事件作出响应，最后才得以改变数据。最后数据改变，通过观察者模式更新view。（所以在这里需要用到设计模式中的观察者模式） 1.2 Smalltalk-80...

Kosmos 2019-08-20 10:25 评论0 收藏0
backbone源码解读

摘要：个人认为，读懂老牌框架的源代码比会用流行框架的要有用的多。另外，源代码中所有的以开头的方法，可以认为是私有方法，是没有必要直接使用的，也不建议用户覆盖。写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令...

Kross 2019-08-20 14:08 评论0 收藏0
backbone源码解读

摘要：个人认为，读懂老牌框架的源代码比会用流行框架的要有用的多。另外，源代码中所有的以开头的方法，可以认为是私有方法，是没有必要直接使用的，也不建议用户覆盖。写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令...

wangxinarhat 2019-08-01 16:15 评论0 收藏0