BackboneJs入门学习[08]—Router路由初探

关注

原创 2022-06-26 11:57:54 1.2k 阅读 AI 写同款· GEO 优化 ›

全面解析JavaScript的Backbone.js框架中的Router路由 Backbone 中的 Router 充当路由的作用，控制 URL 的走向，当在 URL 中使用 # 标签时生效。定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL，而且我们需要记住，在 Backbone 中，# 标签后的任意字符都会被 Router 接收并解释。下面我们来定义一个 Router： [removed] var AppRouter = Backbone.Router.extend({ routes: { "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here 立即下载

⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

BackboneJs入门学习—Router路由初探

1.理解 Router
在页面中，通常有分为静态数据和动态数据，或者说是静态页面和动态页面。在 Backbone 中，静态数据和动态数据的模块分为2种：
（1）Model、Collection 属于静态数据；
（2）router 则属于动态数据；
由此可见，router 路由在 web 应用中的作用。
在Backbone官方给出的文档中，对 Router 有如下解释：

Backbone.Router 为客户端路由提供了许多方法，并能连接到指定的动作（actions）和事件（events）。

是的，Router能够控制 URL 的走向，并且，当在 URL 中使用#标签时生效。所以，在 Backbone 中，#标签后的任意字符都会被 Router 接收并解释。

同时，在 Backbone 中，通过 hash 的方式（即#page）来使浏览器的 url 定位到当前页面，但是，要注意的是，如今大多数的浏览器可通过 history api 来操控url的改变，可直接使用/page来完成之前需要hash来完成的操作！

另外，在页面加载期间，当应用已经创建了所有的路由，需要调用 Backbone.history.start()，或 Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。即，打开 Backbone 的历史记录。

示例：

var AppRouter=Backbone.Router.extend({
		routes:{
				"*actions":"defaultRouter"
				//匹配url
		},
		defaultRouter:function(actions){
		      alert(actions); 
	}
});
var app_router=new AppRouter;
Backbone.history.start();//用start()初始化router

demo.html

// 让Router 匹配特定的 URL ，注意href的写法
<a href="#actions">调式</a>