3
router的简易实现
source link: http://muyunyun.cn/blog/163w51fk/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
router 的简易实现
基于 hash 的实现
以下为 hashChange 的简版实现
class Router {
constructor() {
this.router = {}
window.addEventListener('hashchange', (e) => {
const tag = location.hash.slice(1)
this.router[tag] && this.router[tag]()
route(path, fn) {
this.router[path] = fn
const router = new Router()
const changeColor = (color) => {
document.body.style.background = color
router.route('red', () => { changeColor('red') })
router.route('yellow', () => { changeColor('yellow') })
router.route('blue', () => { changeColor('blue') })
<ul>
<a href="#red">red</a>
<a href="#yellow">yellow</a>
<a href="#blue">blue</a>
</ul>
基于 history 的实现
以下代码需要运行在 http 端口。
class Router {
constructor() {
this.router = {}
window.addEventListener('popstate', (e) => {
const path = e.state.path
this.router[path] && this.router[path]()
route(path, fn) {
this.router[path] = fn
go(path) {
history.pushState({ path: path }, null, path) // 核心思路, pushState 进去的第一个对象会在点击回退/前进按钮时触发 popstate
this.router[path] && this.router[path]()
const router = new Router()
const changeColor = (color) => {
document.body.style.background = color
router.route('red', () => { changeColor('red') })
router.route('yellow', () => { changeColor('yellow') })
router.route('blue', () => { changeColor('blue') })
document.getElementsByTagName('ul')[0].addEventListener('click', (e) => {
router.go(e.target.innerText)
<ul>
<li href="red">red</li>
<li href="yellow">yellow</li>
<li href="blue">blue</li>
</ul>
路由的监听
- hash 路由
window.addEventListener('hashchange')
- history 路由
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK