手写路由

前期知识准备

History: 接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录。
window 中有个 hashchange 事件，当 url 的 hash 发生变化时，会触发该事件

思路：

初始化参数
- currentUrl
- 路由回调数组 routers
初始化监听
- 监听首次加载：load
- 监听页面更新：hashchange
- 监听器注意绑定 bind(this)
更新路由 refresh
- 根据 location.href 提取路由到 currentUrl
- 存入路由回调数组this.routers[this.currentUrl]
触发路由回调函数 route
- 根据路径查找回调数组
- 不存在直接返回
- 存在存入函数
- 执行函数

class MyRoute{
  constructor(){
  this.currentUrl = ''; //当前路由
    this.routers = {};    //存储路由回调函数,以传入的路径为key,callback为value
  }
  // 初始化
  init(){
    // 当页面及资源完全加载后，会触发该事件
    window.addEventListener('load',this.refresh.bind(this))
    // 当 url 的 hash 发生变化时，会触发该事件
    window.addEventListener('hashchange',this.refresh.bind(this))
  }
  // 更新页面，其实就是执行注册的回调函数
  refresh(){
    this.currentUrl = window.location.hash.slice(1) || '/'; // 不存在就跳到根“/”路径
    this.routers[this.currentUrl];// 历史记录
  }
  // 跳转路由路径和存储回调函数
  route(path,callback){
    if(!this.routers[path]) return false
    this.routers[path] = callback || function () {}
    // 执行函数
    this.routers[path]()
  }
}

使用方法：

<ul>
  <li><a href="#/">index</a></li>
  <li><a href="#/page1">page1</a></li>
  <li><a href="#/page2">page2</a></li>
</ul>
<p class="text"></p>

<script>
  // 初始化
  window.Router = new MyRoute()
  Router.init()

  var text = document.querySelector('.text')
  Router.route('/', function () {
    text.innerHTML = '这里是首页'
  })
  Router.route('/page1', function () {
    text.innerHTML = '这里是page1'
  })
  Router.route('/page2', function () {
    text.innerHTML = '这里是page2'
  })
</script>

参考

手写一个 router

手写路由

前期知识准备​

参考​

前期知识准备

参考