Code Monkey home page Code Monkey logo

router's Introduction

Router

#️⃣ frontend router base on window.location.hash

Installation

with webpack

npm install hash-routers

simple script

<script src="./src/Router.js"></script>

Documents

base

import Router from 'hash-routers'
// const Router = require('hash-routers')
// const Router = window.Router

let router = new Router()

router.addRoute('/index', function () {
  // ...
})

router.addRoute('/list', function () {
  // ...
})

pipeline

router.addRoute('/index', function () {
  // ...
}).addRoute('/list', function () {
  // ...
})

multiple path handler

router.addRoute('/index', '/404', function () {
  // ...
})

router.addRoute(['/index', '/404'], function () {
  // ...
})

path params

router.addRoute('/detail/:id', function (event) {
  console.log(event.params) // { id: x }
})

multiple handler

You can exec event.preventDefault() to terminate the execution below

router.addRoute('/index', function (event) {
  event.preventDefault()
}).addRoute('/index', function (params) {
  // can not be call
})

data relay

Get data from event.datas

router.addRoute('/index', function () {
  return 1
}).addRoute('/index', function () {
  return {
    name: 'Niko'
  }
}).addRoute('/index', function () {

}).addRoute('/index', function (event) {
  console.log(event.datas)
  // [1, { name: 'Niko' }, undefined]
})

async supports

router.addRoute('/index', async function () {
  let result = await somePromise

  return result
}).addRoute('/index', function (event) {
  console.log(`get data: ${event.datas[0]}`)
})

remove handlers

seem syntax like addRoute

let handler = function () {
  // just call on page2
}
router.addRoute(['/page1', '/page2', '/page3'], handler)

router.removeRoute('/page1', '/page3', handler)

redirect

router.addRoute('/page1', function () {

})

router.redirect('/page1')

redirect with params

router.addRoute('/user/:uid', function (event) {
  console.log(`got data: ${event.params}`) // got data: { uid: 1 }
})

router.redirect('/user/:uid', {
  uid: 1
})

unknown handler

router.unknown(function (path) {
  console.log(`unknown path: ${path}`)
})

TODO

Programming
yes... it's just a document for now
Test case

router's People

Contributors

jiasm avatar hingsir avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.