路由切换：监听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>