路由切换：监听hashchange事件实现
感谢这两位大佬的分享：
暑期实习还是没有着落...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>
