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 实现路由功能的更多相关文章

  1. 【学习笔记】node.js重构路由功能

    摘要:利用node.js模块化实现路由功能,将请求路径作为参数传递给一个route函数,这个函数会根据参数调用一个方法,最后输出浏览器响应内容 1.介绍 node.js是一个基于Chrome V8引擎 ...

  2. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  3. nodeJS实现路由功能

    前面的话 本文将使用NodeJS实现较复杂应用的路由功能 结构 项目结构如下 代码如下 功能 [router.js] // 加载所需模块 var http = require('http'); var ...

  4. 理解 angular 的路由功能

    相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...

  5. 使用Vue-Router 2实现路由功能

    转自:http://blog.csdn.net/sinat_17775997/article/details/54710420 注意:vue-router 2只适用于Vue2.x版本,下面我们是基于v ...

  6. vue从入门到进阶:vue-router路由功能(九)

    基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...

  7. Vue.js:路由

    ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...

  8. Node.js:路由

    ylbtech-Node.js:路由 1.返回顶部 1. Node.js 路由 我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码. 因 ...

  9. (转)使用Vue-Router 2实现路由功能

    注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能.推荐使用npm安装. npm install vue-router ...

随机推荐

  1. Go 入门 - 包,函数和变量

    主要内容来自中文版的官方教程Go语言之旅 目的为总结要点 包,函数和变量 包 import 语法,多个用括号换行扩起,包之间不需要间隔符,用引号引起 import ( "fmt" ...

  2. 2016-2017-2 20155302 实验四 Android 开发基础

    2016-2017-2 20155302 实验四 Android 开发基础 实验内容 1.下载和安装Android Studio 2.学会使用Android Studio进行简单的Android开发 ...

  3. 2017-2018-1 20155329《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155329<信息安全技术>实验二--Windows口令破解 实验原理 口令破解方法 字典破解: 指通过破解者对管理员的了解,猜测其可能使用某些信息作为密码,利 ...

  4. 【LG1445】樱花

    [LG1445]樱花 题面 洛谷 题解 \[ \frac 1x+\frac 1y=\frac 1{n!}\\ \frac{x+y}{xy}=\frac 1{n!}\\ n!(x+y)=xy\\ xy- ...

  5. 2017"百度之星"程序设计大赛 - 初赛(A) 小C的倍数问题

    谢谢帮忙刷访问量! 题解当然下考再发啦 答案为P-1的约数个数 // It is made by XZZ #include<cstdio> #include<algorithm> ...

  6. javaweb(二十)——JavaBean总结

    一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法 ...

  7. 180719-Quick-Task 动态脚本支持框架之使用介绍篇

    文章链接:https://liuyueyi.github.io/hexblog/2018/07/19/180719-Quick-Task-动态脚本支持框架之使用介绍篇/ Quick-Task 动态脚本 ...

  8. 测试面试必会sql(1)

    测试一般各种查询语句用的较多,下面的查询语句都是需要熟悉的 Course表 Score表 Student表 Teacher表 1,查询课程编号为“02”的总成绩 SELECT * FROM `Scor ...

  9. 小白初识 - 快速排序(QuickSort)

    我个人觉得快速排序和归并排序有相似之处,都是用到了分治的思想,将大问题拆分成若干个小问题. 不同的地方是归并排序是先把大问题拆分好了之后再排序,而快速排序则是一边拆分,一边排序. 快速排序的原理就是, ...

  10. spring-boot Jpa配置

    spring.jpa.hibernate.ddl-auto ddl-auto:create----每次运行该程序,没有表格会新建表格,表内有数据会清空 ddl-auto:create-drop---- ...