手写前端路由渲染

核心：注册路由信息，监听hash变化，当hash变化时，触发回调

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

 function Router() {
            this.routers = {};
            this.curPath = "";
            this.formRoute = (path, callback={}) => {
                this.routers[path] = callback;
            }
            this.refresh = ()=> {
                this.curPath = location.hash.slice(1);
                this.routers[this.curPath]();
            }
            this.init = () => {
                window.addEventListener('load', this.refresh.bind(this));
                window.addEventListener('hashchange', this.refresh.bind(this));
            }
        }
        let obj = new Router();
        let showEle = document.querySelector("#demo")
        // 注册路由信息
        obj.formRoute('/', ()=> {
            showEle.style.fontSize='40px';
            showEle.innerHTML = '首页';
            console.log('首页')
        })
        obj.formRoute('/second', ()=> {
            showEle.style.fontSize='30px';
            showEle.innerHTML = '第二页';
            console.log('第二页')
        })
        obj.formRoute('/third', ()=> {
            showEle.style.fontSize ='20px';
            showEle.innerHTML = '第三页';
            console.log('第三页')
        })
        obj.init();

用类语法糖改写：

<script>
    class Router {
        constructor() {
            this.routers = {};
            this.curPath = "";
        }

        formRoute(path, callback = {}) {
            this.routers[path] = callback;
        }
        refresh() {
            this.curPath = window.location.hash.slice(1) || '/';
            this.routers[this.curPath]();
        }
        init(){
            window.addEventListener('load', this.refresh.bind(this));
            window.addEventListener('hashchange', this.refresh.bind(this));
        }
    }
    let obj = new Router();
    let showEle = document.querySelector("#demo")
    // 注册路由信息
    obj.formRoute('/', () => {
        showEle.style.fontSize = '40px';
        showEle.innerHTML = '首页';
        console.log('首页')
    })
    obj.formRoute('/second', () => {
        showEle.style.fontSize = '30px';
        showEle.innerHTML = '第二页';
        console.log('第二页')
    })
    obj.formRoute('/third', () => {
        showEle.style.fontSize = '20px';
        showEle.innerHTML = '第三页';
        console.log('第三页')
    })
    obj.init();
</script>