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. 转 关于window10安装jdk,配置环境变量,javac不是内部或外部命令,也不是可运行的程序 或批处理文件的细节问题。

    今日拿到一台新的window10笔记本电脑,非常熟练的安装了JDK(因为在学校经常给同学安装JDK - -)但是发现java java -version命令都可以使用,唯独javac命令出现不是内部或 ...

  2. ubuntu下python在pycharm环境下安装setuptools和pip,和distutils.core

    python安装好后,我们用pycharm安装所需的第三方模块时,出现“Python packaging tools not found. install packaging tools”点击安装输完 ...

  3. 20155202张旭 2016-2017-2 《Java程序设计》第2周学习总结

    20155202张旭 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第一,二章知识小节: git log 命令来查看 :提交历史 查看当前所处位置: pwd ...

  4. 20155328 2016-2017-2 《Java程序设计》第四周学习总结

    学号 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承:避免多各类间重复定义行为,extends关键字表示继承后再扩充原本没有的行为.如果没有使用exte ...

  5. 我与虚拟机的初次接触及初探Liux命令 20155338

    初识虚拟机及学习Linux命令的些许收获 虚拟机的安装 这个假期算是第一次正式的接触了虚拟机,以前在平时生活中也有听到过,但是真正自己动手安装虚拟机却是第一次,确实是既紧张又兴奋. 我是依据老师所发的 ...

  6. Linux下MySql变量修改遇到的问题记录

    一.问题记录: 项目上需要使用mysql的过程来自动化构建一批数据,但是调用的时候总是报找不到表或者过程 二.排查过程: (1)首先终端连接mysql后发现,无论表还是过程在数据库中都是存在的,排除了 ...

  7. python 多线程笔记(3)-- 线程的私有命名空间

    线程的私有命名空间实现: threading_namespace = threading.local() import threading import time import random thre ...

  8. Java——基于java自身包实现消息系统间的通信(TCP/IP+NIO)

    /** * Created by LiuHuiChao on 2016/11/15. * description:based on TCP/IP+NIO to deliver the message ...

  9. 真香!iOS云真机全新上线!

    WeTest 导读 众多开发者已经渐渐适应通过调用线上的安卓真机进行远程调试,但是针对iOS设备,则依然存在“iOS设备昂贵”“无法及时采购iOS最新设备”“无法复现iOS历史系统版本”等问题. 为了 ...

  10. 我们一起学习WCF 第五篇数据协定和消息协定

    A:数据协定(“数据协定”是在服务与客户端之间达成的正式协议,用于以抽象方式描述要交换的数据. 也就是说,为了进行通信,客户端和服务不必共享相同的类型,而只需共享相同的数据协定. 数据协定为每个参数或 ...