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

首页 > 代码库 > 前端小白之每天学习记录----简单的原生js路由

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

2024-11-18 02:47:02 202人阅读

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

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

当<a>标签被点击时

<a href="http://www.mamicode.com/#/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="http://www.mamicode.com/#/html">html</a> 
   <a href="http://www.mamicode.com/#/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="http://www.mamicode.com/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 {
            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="http://www.mamicode.com/#/">啥都没有</a></li>
            <li><a href="http://www.mamicode.com/#/html">html</a></li>
            <li><a href="http://www.mamicode.com/#/css">css</a></li>
            <li><a href="http://www.mamicode.com/#/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>

<head>

<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>

<ul>

<li><a href="#/javascript">javascript</a></li>

</ul>

</section>

右边

</sidebar>

底部

</footer>

//框架雏形：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>

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 前端小白之每天学习记录----简单的原生js路由

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

看完仍有疑问？有类似问题直接问程序猿