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

posted @ 2018-07-10 20:22  wanhong  阅读(484)  评论(0编辑  收藏  举报