[router] a simple web router #utils

router.js

// the router should be sigleton
class Router {
  constructor(routeMap) {
    this._routeMap = routeMap;
    this.bindEvent();
  }
  
  init(url) {
    let fn = this._routeMap[url];
    window.history.replaceState({url: url}, '', url);
    if (fn) fn();
    let navElements = document.querySelectorAll('a');
    navElements.forEach(ele => ele.addEventListener('click', (e) => {
      e.preventDefault();
      router.navigate(e.target.getAttribute('href'));
    }));
  }
  
  navigate(url) {
    let fn = this._routeMap[url];
    window.history.pushState({url: url}, '', url);
    if (fn) fn();
    let navElements = document.querySelectorAll('a');
    navElements.forEach(ele => ele.addEventListener('click', (e) => {
      e.preventDefault();
      router.navigate(e.target.getAttribute('href'));
    }));
  }
  
  bindEvent() {
    window.addEventListener('popstate', (obj) => {
      if (!obj.state && !obj.state instanceof Object) return;
      let url = obj.state.url;
      this.navigate(url);
    });
  }
}

let routeMap = {
  '/home': () => {
    document.body.innerHTML = '<div>home<br><a href="/error">error</a><br><a href="/happy">happy</a></div>';
  },
  '/error': () => {
    document.body.innerHTML = '<div>error</div>';
  },
  '/happy': () => {
    document.body.innerHTML = '<div>happy</div>';
  }
};
let router = new Router(routeMap);
router.init(location.pathname);