router.js 使用教程
router.js项目地址:https://gitcode.com/gh_mirrors/ro/router.js
项目介绍
router.js 是一个轻量级的 JavaScript 路由库,构建在 route-recognizer 和 RSVP 之上,提供了一个用于处理路由的 API。它遵循 Unix 哲学,是一个模块化的库,专注于一件事并将其做好。router.js 是 Ember.js 使用的路由微型库。
项目快速启动
安装
使用 npm 安装 router.js:
npm install --save router_js rsvp route-recognizer
创建和配置路由
创建一个新的路由器并添加路由:
var Router = require('router_js');
var router = new Router();
router.map(function(match) {
match("/posts/:id").to("showPost");
match("/posts").to("postIndex");
match("/posts/new").to("newPost");
});
// 添加处理程序
var myHandlers = {};
myHandlers.showPost = {
model: function(params) {
return App.Post.find(params.id);
},
setup: function(post) {
// 渲染一个模板,包含 post
}
};
myHandlers.postIndex = {
model: function(params) {
return App.Post.findAll();
},
setup: function(posts) {
// 渲染一个模板,包含 posts
}
};
应用案例和最佳实践
嵌套路由
你可以嵌套路由,每个嵌套级别都可以有自己的处理程序。例如,一个主从视图:
router.map(function(match) {
match("/posts").to("posts", function(match) {
match("/").to("postIndex");
match("/:id").to("showPost");
});
});
myHandlers.posts = {
model: function() {
return $.getJSON("/posts").then(function(json) {
return App.Post.load(json);
});
},
setup: function(posts) {
// 渲染一个模板,包含 posts
}
};
生成路由
你可以生成路由,支持字符串和对象的混合使用:
var myRouter = new Router();
myRouter.generate("postVersion", { id: 4, modeName: 'a' }, { id: 'first' });
// 返回 '/posts/4/a/version/first'
典型生态项目
router.js 是 Ember.js 的核心组件之一,与 Ember.js 紧密集成。Ember.js 是一个用于构建现代 web 应用程序的框架,提供了路由、数据绑定、模板等功能。
Ember.js
Ember.js 是一个开源的 JavaScript 框架,用于创建复杂的单页应用程序。它结合了最佳的开发实践和强大的功能,使得开发人员可以快速构建可维护和可扩展的应用程序。
其他相关项目
- route-recognizer: 一个用于路由匹配的库,router.js 依赖于它。
- RSVP: 一个 Promise 库,router.js 使用它来处理异步操作。
通过这些项目的结合使用,router.js 提供了一个强大而灵活的路由解决方案,适用于各种规模的 web 应用程序。