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. golang 后台服务设计精要

    原文地址 守护进程 传统的后台服务一般作为守护进程(daemon)运行.linux 上创建 daemon 的步骤一般如下: 创建子进程,父进程退出: 调用系统调用 setsid() 脱离控制终端: 调 ...

  2. 接口与协议学习笔记-Ethernet UDP通信协议(一)

    总线(BUS,即公共汽车,数据的公共传输路线)分类的方式有很多,如被分为外部和内部总线.系统总线和非系统总线等等,下面是几种最常用的分类方法.另外,总线的传输核心思想是多路复用:时分多路复用-TDMA ...

  3. BZOJ 小Z的袜子 2038 国家集训队

    过程: 想了很久如何求组合数C(n,m),然而 YL 同学提醒了可以直接除以 2*n*(n - 1 ).改了之后果然对了,以为一定是一次性AC 了,然而 WA 了3次,尴尬 —— 神 TM,ZC 苟看 ...

  4. 20155207王雪纯 2006-2007-2 《Java程序设计》第1 周学习总结

    20155207王雪纯 2006-2007-2 <Java程序设计>第1 周学习总结 教材学习内容总结 第一周重点学习第一章和第二章. 第一章总的来讲,我认为可以称之为本书的绪论,介绍了包 ...

  5. 20155226 实验三 敏捷开发与XP实践 实验报告

    20155226 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  6. 20155227 2016-2017-2 《Java程序设计》第三周学习总结

    20155227 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 类与对象 使用Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对 ...

  7. 20145310 《Java程序设计》第10周学习总结

    20145310 <Java程序设计>第10周学习总结 教材学习内容总结 网络概述 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置 ...

  8. 20155323 2016-2017-2《Java程序设计》课程总结

    20155323 2016-2017-2<Java程序设计>课程总结 课程与实验链接 预备作业一:新学期,新展望 预备作业二:游戏经验 预备作业三:安装虚拟机和Linux系统的学习 201 ...

  9. vector的二维用法+前缀和

    题目链接:https://codeforces.com/contest/1082/problem/C(C. Multi-Subject Competition) A multi-subject com ...

  10. SQLite3日期与时间,常见函数

    SQLite3日期与时间,常见函数 import sqlite3 #con = sqlite3.connect('example.db') con = sqlite3.connect(":m ...