自造简单的Hash路由管理器

本文由清尘发表于2019-11-06 17:27属于javascript分类

整体的逻辑很简单,在应用初始化的时候添加所有路由。随后,在hashchange发生变化的时候调用相应的处理逻辑。对应的几个不同函数的相关说明如下:
◎ add,用于创建路由集、添加路由的key及其对应的函数。
◎ refresh,解析出当前路由的key,再根据key从路由集中找到并调用对应的路由处理函数。
◎ load,初始化路由相应的监听事件。
◎ navigate,跳转到对应的路由。
如果想使用如Angular一样的正则表达式路由方式,只需要在refresh函数中加以处理即可。接着,只需要添加路由,以及对应的处理逻辑,就可以完成一个完整可用的路由管理器
在这个路由示例中,我们添加了两个路由:
◎ “/”,用作Hash为“#/”的路由,即首页。
◎ “/blue”,用作Hash为“#/blue”的路由。
可以看到,两个路由添加了在跳转至该路由时修改页面的HTML的功能。对于如Angular这样的框架级路由来说,它们做的事情会稍微复杂一些,它们以完整的类的形式存在,有自己的生命周期。组件在运行的过程中按照这个生命周期来执行,但是对于多页面应用的前端路由来说,只需要适应前端页面的Hash变化,就可以做出一个不亚于多页面应用的复杂交互。
当前,这种路由变化引起直接的DOM更新的方式不合理。结合Virtual DOM来进行操作,会是一种更合理的方式

轻量级客户端库:Page.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
    <div id="demo"></div>
    <button id="blue">Router Blue</button>
    <button id="home">Router Home</button>
<script>
function Router(){
  this.routes = {};
  this.currentUrl = '';
}

Router.prototype.add = function(path,callback){
  this.routes[path] = callback || function(){};
}
Router.prototype.refresh = function(){
  this.currentUrl = location.hash.replace(/^#*/,'');
  this.routes[this.currentUrl]();
}
Router.prototype.load = function(){
  window.addEventListener('load',this.refresh.bind(this),false);
  window.addEventListener('hashchange',this.refresh.bind(this),false);
}
Router.prototype.navigate = function(path){
  path = path ? path : '';
  location.href = location.href.replace(/#(.*)$/,'') + '#' + path;
}

window.Router = new Router();
window.Router.load();
Router.add('', function () {
    document.getElementById('demo').innerHTML = "Router Home";
  });
  Router.add('/', function () {
    document.getElementById('demo').innerHTML = "Router Home";
  });
  Router.add('/blue', function () {
    document.getElementById('demo').innerHTML = "Router Blue";
  });


  document.getElementById("blue").addEventListener("click", function (ev) {
  Router.navigate("/blue")
});
document.getElementById("home").addEventListener("click", function (ev) {
  Router.navigate("/")
});
</script>
</body>
</html>