手写---前端简单路由

本文路由呈现以hash形式，当URL中的hash值发生变化时，监听hashchange，触发回调函数，再在回调函数中进行不同的操作，进行不同内容的展示

    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/second">第二页</a></li>
        <li><a href="#/third">尾页</a></li>
    </ul>
    <div id="rr"></div>

 function Router(){
            // 存储路由及路由对应的回调函数
            this.Routers={}
            //记录当前的hash值
            this.curUrl=''
            //存储更新路由时的回调在Routers中,回调函数负责对页面的更新
            this.route=function(path,callback){
                this.Routers[path]=callback||function(){}
            }
            this.refresh=function(){
                this.curUrl=location.hash.slice(1)||'/'
                // console.log(this.curUrl);
                this.Routers[this.curUrl]()
            }
            //监听浏览器url hash更新事件
            this.init=function(){
                window.addEventListener('load',this.refresh.bind(this),false)
                window.addEventListener('hashchange',this.refresh.bind(this),false)
            }
        }
        var r = new Router()
        let res = document.querySelector('div')
        r.init()
        r.route('/',function(){
            res.style.fontSize='30px',
            res.innerHTML='首页'
            console.log('object');
        })
        r.route('/second',()=>{
            res.style.fontSize='30px',
            res.innerText='第二页'
        })
        r.route('/third',()=>{
            res.style.fontSize='30px',
            res.innerText='尾页'
        })