感謝這兩位大佬的分享：
暑期實習還是沒有着落...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>