router的hash实现

14 阅读1分钟

实现一个单页面spa1,监听地址栏中hash变化驱动界面变化,下面是router的hash实现代码(简单版本)

  1. 创建Router类
  2. 创建一个对象用于保存rul以及该url对应的处理
  3. Router类中创建router方法将url绑定对应的处理方法
  4. Router类中创建push方法对指定url执行绑定的方法
       class Router {
            constructor() {
                // 用于保存url以及对于的函数
                this.rou = {}
            }
            router(url,fn) {
                this.rou[url] = fn
            }
            push(url) {
                this.rou[url] && this.rou[url]()
            }
        }
        window.myrouter = new Router()
        myrouter.router('/',()=>{console.log('这是url/');})
        myrouter.router('/hello',()=>{console.log('hello');})
        myrouter.push('/')
        myrouter.push('/hello')