router模式核心原理

  <a href="#/menu" data-href="/menu">menu<a>
  <div class="targetNode"></div>

history 模式

class historyRouter{
    constructor(){
        this.currentPath = '/';
        this.router = {};
    }
    init(){
        // 首次加载
        window.addEventListener("DOMContentLoaded",this.updateView.bind(this,'/'));
        var that = this;
        window.addEventListener('click', function (ev) {
            if(ev.target.tagName.toLocaleLowerCase() === 'a' && ev.target.getAttribute('data-href')) {
                ev.preventDefault();
                var path = ev.target.getAttribute('data-href');
                // 更新url
                history.pushState({ path: path }, '', path)
                // 更新页面
                that.updateView(path)
            }
        })
        //当活动历史记录条目更改时，将触发popstate事件。
        window.addEventListener('popstate', function (ev) {
            if(ev.state){
                //事件
                var path = ev.state.path
                that.updateView(path)
            }else{
                that.updateView('/')
            }
        })
    }   
    route(path,calback){
        this.router[path] = calback;
    }
    updateView(path){
        this.currentPath = path
        this.router[this.currentPath] && this.router[this.currentPath]()
    }
}
// let route = new historyRouter();
// route.init()
// route.route("/",function(){
//     let target = document.querySelector(".targetNode");
//     target.innerHTML = 'test'
// })
// route.route("/menu",function(){
//      let target = document.querySelector(".targetNode");
//      target.innerHTML = 'test'
// })

hash 模式

function HashRouter(){
    this.currentPath = '/';
    this.router = {};
}
HashRouter.prototype = {
    init: function (){
         //DOMContentLoaded事件用于刷新页面后
         window.addEventListener('DOMContentLoaded', this.updateView.bind(this))
         window.addEventListener('hashchange', this.updateView.bind(this))
    },
    route: function(path,calback){
        this.router[path] = calback;
    },
    updateView:function(){
        this.currentPath = location.hash.substring(1) || '/',
        this.router[this.currentPath] && this.router[this.currentPath]();
    }
}
let route = new HashRouter();
route.init()
route.route("/menu",function(){
     let target = document.querySelector(".targetNode");
     target.innerHTML = 'test'
})