前端小白之每天学习记录简单的原生js路由

路由：
根据不同的url 显示不同的内容
方法:
hash(锚链接)实现路由
history对象

1.首先要了解什么是hash，在这里你可以认为hash就是网址后面加上的 #/xxx

当<a>标签被点击时

<a href="#/html">ches</a>
会在原网址后面加上<a>里面herf的内容，当该内容改变时，会产生一个事件 onhashchange

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            //当hash发生变化的时候， 会产生一个事件 onhashchange
            window.onhashchange = function(){
                alert( '你的hash改变了' );
                //location对象是 javascript内置的(自带的)
                console.log( location );
            }
        }
    </script>
</head>
<body>
   <a href="#/html">html</a> 
   <a href="#/css">css</a> 
</body>
</html>

2.实现一个简单的路由

location对象：

location对象是 javascript内置的(自带的)

location 对象包含有关当前 URL 的信息。（也就是网址）

以下代码可以让网页跳转到百度：

window.location="https://www.baidu.com/"；

一个简单的路由

实现的功能：点击时从1-33里随机出现五个数，并按照这五个随机数改变hash，在按钮下方显示五个随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        window.onload = function(){
            var oBtn = document.querySelector("input");//获取按钮
            var oDiv = document.querySelector("div");//获取随机数的输出div盒子
            //33->max  5->num
            function buildNum( max, num ){       //这个函数返回   1到33选出的5个随机数结合的数组
                var arr = [];
                for( var i = 0; i < max; i++ ){
                    arr.push( i + 1 );
                }      //1-33数字集合的数组
                var target = []; 
                for( var i = 0; i < num; i++ ){
                    target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );
                }    //从1-33这33个数字中 随机选出5个数放入target数组
                return target;
            }
            oBtn.onclick = function(){  
                var num = buildNum( 33, 5 );  
                // oDiv.innerHTML = num; 
                location.hash = num;    //点击时吧网址的hash改变成数组  eg：#20,14,6,22,30
            }
            window.onhashchange = function(){
                oDiv.innerHTML = location.hash.substring(1);//在div里面输出5个随机数  eg：20,14,6,22,30
            }
        }
    </script>
</head>
<body>
    <input type="button" value="33选5">
    <div></div>
</body>
</html>

　　3.简单路由的运用 (简单框架雏形的运用) （简单的html5标签的运用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header,
        footer {
            height: 100px;
            background: #ccc;
        }

        section {
             60%;
            height: 400px;
            background: #eee;
            float: left;
        }

        sidebar {
             40%;
            height: 400px;
            background: #999;
            float: left;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <header>
        头部
    </header>
    <section>
        <ul>
            <li><a href="#/">啥都没有</a></li>
            <li><a href="#/html">html</a></li>
            <li><a href="#/css">css</a></li>
            <li><a href="#/javascript">javascript</a></li>
        </ul>
    </section>
    <sidebar>
        右边
    </sidebar>
    <div class="clear"></div>
    <footer>
        底部
    </footer>
    <script>
        //框架雏形：1.用一个立即表达式把框架包起来，避免代码污染（定义的变量..等重复使用）
        //         2.在立即表达式里定义一个构造函数（这里指var Router）；
        //         3.最后加上语句window.objec = functionName;把函数暴露出来，
        //           附加到window对象上面这样(这里指window.oRou )；
        //         4.在构造函数的原型对象上添加函数（init，reloadPage...）
        //         5.用第3步附在window的构造函数构建一个新对象，//var oRouter2 = new oRou();
        //           这个对象(oRouter2)就可以使用刚刚第4步添加的函数了；

        (function () {    //立即表达式：(function(){代码内容})();
            var Router = function () {    //构造函数
                /*
                    this.routes['/'] = function(){}    
                    this.routes['/html'] = function(){}
                */
                this.routes = {};//用来保存路由
                this.curUrl = ''; //获取当前的hash
            }
            Router.prototype.init = function () { //监听路由变化 当hash变化时调用reloadPage函数
                //call,apply
                window.addEventListener('hashchange', this.reloadPage.bind(this));
                //第一个this指向window，bind里面的this指向调用这个函数的对象（这里是oRouter2）
            }
            Router.prototype.reloadPage = function () {
                this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
                this.routes[this.curUrl]();      //运行当前hsah值对应的函数
            }
            Router.prototype.map = function (key, callback) { //保存路由对应的函数：
                this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
                // console.log( this.routes );
            }
            window.oRou = Router;
        })();


        var oRouter2 = new oRou();
        oRouter2.init();
        oRouter2.map('/', function () {
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '你点，你再点，你点点点';
        });
        oRouter2.map('/html', function () {
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂拽 酷炫 吊炸天 的html';
        });
        oRouter2.map('/css', function () {
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂 拽 酷 炫 吊 炸 天 的css';
        });
        oRouter2.map('/javascript', function () {
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂拽酷炫吊炸天的javascript';
        });
    </script>
</body>

</html>

实现效果：点击时，右边的部分会根据点击的不同而改变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header,
        footer {
            height: 100px;
            background: #ccc;
        }

        section {
            width: 60%;
            height: 400px;
            background: #eee;
            float: left;
        }

        sidebar {
            width: 40%;
            height: 400px;
            background: #999;
            float: left;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <header>
        头部
    </header>
    <section>
        <ul>
            <li><a href="#/">啥都没有</a></li>
            <li><a href="#/html">html</a></li>
            <li><a href="#/css">css</a></li>
            <li><a href="#/javascript">javascript</a></li>
        </ul>
    </section>
    <sidebar>
        右边
    </sidebar>
    <div class="clear"></div>
    <footer>
        底部
    </footer>
    <script>
        //框架雏形：1.用一个立即表达式把框架包起来，避免代码污染（定义的变量..等重复使用）
            //         2.在立即表达式里定义一个构造函数（这里指var Router）；
            //         3.最后加上语句window.objec = functionName;把函数暴露出来，
            //           附加到window对象上面这样(这里指window.oRou )；
            //         4.在构造函数的原型对象上添加函数（init，reloadPage...）
            //         5.用第3步附在window的构造函数构建一个新对象，//var oRouter2 = new oRou();
            //           这个对象(oRouter2)就可以使用刚刚第4步添加的函数了；

        (function(){    //立即表达式：(function(){代码内容})();
            var Router = function(){    //构造函数
                /*
                    this.routes['/'] = function(){}    
                    this.routes['/html'] = function(){}
                */ 
                this.routes = {};//用来保存路由
                this.curUrl = ''; //获取当前的hash
            }
            Router.prototype.init = function(){ //监听路由变化 当hash变化时调用reloadPage函数
                //call,apply
                window.addEventListener( 'hashchange', this.reloadPage.bind(this) );
                //第一个this指向window，bind里面的this指向调用这个函数的对象（这里是oRouter2）
            }
            Router.prototype.reloadPage = function(){
                this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
                this.routes[this.curUrl]();      //运行当前hsah值对应的函数
            }
            Router.prototype.map = function( key, callback ){ //保存路由对应的函数：
                this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
                // console.log( this.routes );
            } 
            window.oRou = Router;
        })();
 
 
        var oRouter2 = new oRou();
        oRouter2.init();
        oRouter2.map( '/', function(){
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '你点，你再点，你点点点';
        });
        oRouter2.map('/html', function(){
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂拽 酷炫 吊炸天 的html';
        });
        oRouter2.map('/css', function(){
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂 拽 酷 炫 吊 炸 天 的css';
        });
        oRouter2.map('/javascript', function(){
            var oSidebar = document.querySelector("sidebar");
            oSidebar.innerHTML = '狂拽酷炫吊炸天的javascript';
        });



    </script>
</body>

</html>

相关阅读:
低效代码的危害
 使用datetime来控制timer的问题
 redis for windows
log4net支持用日期加时间指定文件名
 防止数据丢失的解决方法
 RabbitMQ默认情况下不保证每次都把消息传递
 UnitTest和Developer
spring+eureka+zuul
新工具解决消息丢失的bug
java_if_else__的应用1
原文地址：https://www.cnblogs.com/szlxb/p/7290012.html