认识 Backbone（三） : 什么是 Router

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

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

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

超融合服务器服务器托管什么是两地三中心三什么是深度学习什么是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