JS 手写简单的哈希路由

手写实现简单的 hash 路由

function Router() {
  // 切换到某路由执行回调
  this.routerList = {};
  // 当前页面
  this.currentUrl = '';
}

Router.prototype.change = function () {
  console.log('this :>> ', this);
  let hash = location.hash.slice(1);
  // 如果 hash 一致不进行操作，hash 不同执行回调
  if (hash && hash != this.currentUrl) {
    this.currentUrl = hash;
    if (hash in this.routerList) {
      this.routerList[hash]();
    }
  }
};

Router.prototype.add = function (path, callback) {
  // 注册一个页面对应的事件
  this.routerList[path] = callback;
};

Router.prototype.init = function () {
  // 监听页面 hash 变化执行回调
  window.addEventListener('load', this.change.bind(this), false);
  window.addEventListener('hashchange', this.change.bind(this), false);
};

测试

let test = new Router();
test.init();
test.add('123', () => {
  console.log('123');
});
test.add('456', () => {
  console.log('456');
});