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 ...
随机推荐
- 浅谈JVM编译原理->.java文件转变为.class文件的过程
为什么需要编译? 我们平常写代码,有规范的命名方式,都能够看得懂,但是我们写的代码计算机是看不懂的,所以需要编译,也就是一个转换的过程,如下: 1.这个是咱们平时写的代码,就比较好理解,对人友好 2. ...
- Mycp补交作业
Mycp补交作业 代码 import java.io.; import java.lang.; import java.util.Scanner; public class MyCP { public ...
- Zabbix学习之路(九)之低级自动发现以及MySQL多实例
1.概述 Zabbix的网络发现是指zabbix server通过配置好的规则,自动添加host,group,template Zabbix的主动注册刚好和网络发现是相反的,功能基本一致.zabbix ...
- python3.0 day02 列表、元组 、字典、字符串操作
1.列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作,类似于其他语言中的数组. 定义列表 names = ['Lioa',"Tenglan ...
- 【MYSQL命令】查看日志是否开启及日志过期天数
show variables like 'log_%';show variables like '%expire_logs_days%'
- 【xshell属性设置】如何修改xshell字体大小
1.周末在家,想搞一下学习,于是远程公司的电脑(我的移动硬盘在公司,里面有虚拟机及测试环境) 发现xshell界面字体太小,不方便看,于是研究了一下如何来设置xshell 的字体大小 2.点击左上角的 ...
- Vue 项目在其他电脑 npm run dev 运行报错的解决方法
一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 ...
- vsftpd安装配置虚拟用户
原文发表于cu:2016-03-11 参考文档: FTP原理:http://vbird.dic.ksu.edu.tw/linux_server/0410vsftpd_1.php FTP配置:http: ...
- hadoop2.7.1安装和部署
操作系统:Red Hat Enterprise Linux Server release 6.2 (Santiago) hadoop2.7.1 三台redhat linux主机,ip分别为10.204 ...
- A Product Recall 产品召回
Rick: The Board of Directors has come to a decision. Our company will take an image hit, and it's go ...