感谢这两位大佬的分享：
暑期实习还是没有着落...HR们是不是都觉得，这位同学就实习两个月，东西学完了就跑了？
呜呜呜不是啊我会好好工作的
<!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>Router By Hash</title>
</head>
<body>
<ul>
<li><a href="#01">1</a></li>
<li><a href="#02">2</a></li>
<li><a href="#03">3</a></li>
<li><a href="#04">4</a></li>
</ul>
<div>
</div>
</body>
<script> window.onload = function(){ (//将路由函数包裹在IIFE内防止污染全局作用域
function(){ var Router = function(){ this.routes = {}; this.curUrl = '/'; }; Router.prototype.init= function(){ // 对路由的hash值进行监听，如果发生改变，则调用reloadPage()函数
// 这里的两个this 是不一样的，需要注意
window.addEventListener('hashchange',this.reloadPage.bind(this)); //bind()方法创建一个新的函数（称为绑定函数）, 当被调用时，将其this关键字设置为提供的值，
//在这里，当触发hashchange事件，会调用Router.prototype.reloadPage方法，如果直接this.reloadPage()，这个this会指向全局对象
//因此这样将其绑定
}; // 调用reloadPage函数，实际上时执行routes[]()函数
Router.prototype.reloadPage = function(){ //location.hash为#01，则this.curUrl为01，如果没找到，就为'/'
this.curUrl = location.hash.substring(1)||'/'; this.routes[this.curUrl]();//this.router[01]()方法，在原型对象的map方法中创建
}; // 路由配置的规则
Router.prototype.map = function(key,callback){ this.routes[key] = callback; //this.router[01] = callback
} //将其暴露出去
window.Router = Router; })(); var ORouter = new Router(); //初始化，当路由改变，执行以当前实例为调用对象的reloadPage方法
ORouter.init(); // 以下为路由配置的设置，形象的当做一个路由与调用函数的映射表也可以
ORouter.map('/',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "0"; }); ORouter.map('01',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "1"; }); ORouter.map('02',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "2"; }); ORouter.map('03',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "3"; }); ORouter.map('04',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "4"; }); ORouter.map('05',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "5"; }); } </script>
</html>