一、更改路由配置

一、
<!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>
一、更改路由配置

猜你喜欢
