js 实现路由功能
class Router {
constructor() {
this.routes = []
}
handle(pattern, handler) {
this.routes.push({ pattern, handler })
}
exec(pathname) {
for (const route of this.routes) {
if (typeof route.pattern === 'string') {
if (route.pattern === pathname) {
return route.handler()
}
} else if (route.pattern instanceof RegExp) {
const result = pathname.match(route.pattern)
if (result !== null) {
const params = result.slice(1).map(decodeURIComponent)
return route.handler(...params)
}
}
}
}
}
const router = new Router()
router.handle('/', homePage)
router.handle(/^\/users\/([^\/]+)$/, userPage)
router.handle(/^\//, notFoundPage)
function homePage() {
return 'home page'
}
function userPage(username) {
return `${username}'s page`
}
function notFoundPage() {
return 'not found page'
}
console.log(router.exec('/')) // home page
console.log(router.exec('/users/john')) // john's page
console.log(router.exec('/foo')) // not found page
js 实现路由功能的更多相关文章
- 【学习笔记】node.js重构路由功能
摘要:利用node.js模块化实现路由功能,将请求路径作为参数传递给一个route函数,这个函数会根据参数调用一个方法,最后输出浏览器响应内容 1.介绍 node.js是一个基于Chrome V8引擎 ...
- angular.js之路由的选择
在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...
- nodeJS实现路由功能
前面的话 本文将使用NodeJS实现较复杂应用的路由功能 结构 项目结构如下 代码如下 功能 [router.js] // 加载所需模块 var http = require('http'); var ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- 使用Vue-Router 2实现路由功能
转自:http://blog.csdn.net/sinat_17775997/article/details/54710420 注意:vue-router 2只适用于Vue2.x版本,下面我们是基于v ...
- vue从入门到进阶:vue-router路由功能(九)
基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...
- Vue.js:路由
ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...
- Node.js:路由
ylbtech-Node.js:路由 1.返回顶部 1. Node.js 路由 我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码. 因 ...
- (转)使用Vue-Router 2实现路由功能
注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能.推荐使用npm安装. npm install vue-router ...
随机推荐
- 线段树模板(施工ing)
声明 题目: 洛谷 P3372 优化之处:复杂度 O(n log n)级,可快速维护区间的各种操作(如:区间和.)
- 20155217 2016-2017-2 《Java程序设计》第6周学习总结
20155217 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 InputStream与OutputStream 10.1.1串流设计的概念 Jav ...
- 《JAVA程序设计》 20155208 实验四 Android程序设计
<JAVA程序设计> 20155208 实验四 Android程序设计 实验一: 实验要求: Android Stuidio的安装测试: 参考<Java和Android开发学习指南( ...
- linux 初学体验 20155317 王新玮
学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 通过询问同学和上网搜查百度,完成了虚拟机的安装,开始了linux的学习. 通过实践学习别出心裁的Linu ...
- 2016-2017-2 20155339 《Java面向对象程序设计》实验三敏捷开发与XP实践实验报告
2016-2017-2 20155339 <Java面向对象程序设计>实验三敏捷开发与XP实践实验报告 实验内容 XP基础 XP核心实践 相关工具 实验内容 一.在IDEA中使用工具(Co ...
- 20145226夏艺华 《Java程序设计》实验报告三
实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软件工程包括下列领 ...
- 1111: [POI2007]四进制的天平Wag
1111: [POI2007]四进制的天平Wag 链接 题意: 用一些四进制数,相减得到给定的数,四进制数的数量应该尽量少,满足最少的条件下,求方案数. 分析: 这道题拖了好久啊. 参考Claris的 ...
- SaltStack入门篇(六)之部署Redis主从实现和Job管理
一.部署Redis主从 需求: 192.168.56.11是主,192.168.56.12是从 redis监听自己的ip地址,而不是0.0.0.0 分析: linux-node1 安装 配置 启动 l ...
- Mac Eclipse快捷键
Command + O:显示大纲Command + 1:快速修复Command + D:删除当前行Command + Option + ↓:复制当前行到下一行Command + Option + ↑: ...
- css控制字体线使用:text-decoration
css控制字体下划线使用text-decoration : text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式 text-decoration:underline ...