js单页hash路由原理与应用实战详解

2019-11-19 15:48:23

字体：大中小

来源：转载

供稿：网友

本文主要介绍了js单页hash路由原理与应用实战详解，分享给大家，具体如下：

什么是路由？

通俗点说，就是不同的URL显示不同的内容

什么是单页应用?

单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址栏的URL来实现切换内容的变化.

如何知道URL切换了呢？

当url后面的锚文本发生变化时，会触发onhashchange事件。通过这个事件，我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容，比如：

#/html

#/css

#/javascript

<a href="#/html" rel="external nofollow" rel="external nofollow" >html课程</a> <a href="#/css" rel="external nofollow" rel="external nofollow" >css课程</a>

window.onload = function(){      //当hash发生变化的时候， 会产生一个事件 onhashchange      window.onhashchange = function(){        console.log( '你的hash改变了' );        //location对象是 javascript内置的(自带的)        console.log( location );      }    }

上例，我们已经通过hash( 就是锚文本 ) 变化，触发了onhashchange事件，就可以把hash变化与内容切换对应起来，就实现了单页路由的应用！

接下来，我们通过一个小的彩票程序，来体验下单页路由：

 <input type="button" value="33选5"> <div></div>

window.onload = function(){      var oBtn = document.querySelector("input");      var oDiv = document.querySelector("div");      //33->max 5->num      function buildNum( max, num ){        var arr = [];        for( var i = 0; i < max; i++ ){          arr.push( i + 1 );        }        var target = []; //从1-33这33个数字中 随机选出5个数        for( var i = 0; i < num; i++ ){          target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );        }        return target;      }      oBtn.onclick = function(){        var num = buildNum( 33, 5 );        oDiv.innerHTML = num;        location.hash = num;      }      window.onhashchange = function(){        oDiv.innerHTML = location.hash.substring(1);      }    }

上例，我们通过1-33个数字，生成5个随机数，放入Div中，每次生成一组随机数就更新div的内容，最后通过浏览器的前进，后退按钮，就可以感觉，所有的随机切换内容像是在切换不同的URL页面，实际的效果是没有切换任何页面，完全是在一个页面中通过hash变化实现内容切换.

最后，我们结合html5简单的排版，利用hash来做一个选项卡切换的功能:

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

<header>    头部  </header>  <section>    <ul>      <li><a href="#/" rel="external nofollow" >全部</a></li>      <li><a href="#/html" rel="external nofollow" rel="external nofollow" >html课程</a></li>      <li><a href="#/css" rel="external nofollow" rel="external nofollow" >css课程</a></li>      <li><a href="#/javascript" rel="external nofollow" >javascript课程</a></li>    </ul>  </section>  <sidebar>    右边  </sidebar>  <div class="clear"></div>  <footer>    底部  </footer>

(function(){      var Router = function(){        /*          this.routes['/'] = function(){}            this.routes['/html'] = function(){}        */         this.routes = {};//用来保存路由        this.curUrl = ''; //获取当前的hash      }      Router.prototype.init = function(){ //监听路由变化        //call,apply        window.addEventListener( 'hashchange', this.reloadPage.bind(this) );      }      Router.prototype.reloadPage = function(){        this.curUrl = location.hash.substring(1) || '/';        this.routes[this.curUrl]();          }      Router.prototype.map = function( key, callback ){ //保存路由对应的函数        this.routes[key] = callback;        // console.log( this.routes );      }       window.Router = Router;    })();    var oRouter = new Router();    oRouter.init();    oRouter.map( '/', function(){      var oSidebar = document.querySelector("sidebar");      oSidebar.innerHTML = 'ghostwu提供html,css,javascript从0基础到精通系列课程，只要会开关机，就能学会';    });    oRouter.map('/html', function(){      var oSidebar = document.querySelector("sidebar");      oSidebar.innerHTML = 'ghostwu提供html5从入门到精通的课程';    });    oRouter.map('/css', function(){      var oSidebar = document.querySelector("sidebar");      oSidebar.innerHTML = 'ghostwu提供从入门到玩转css3课程';    });    oRouter.map('/javascript', function(){      var oSidebar = document.querySelector("sidebar");      oSidebar.innerHTML = "ghostwu提供从0基础到精通javascript系列课程";    });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery绑定事件方法及区别(bind,click,on,live,one)

下一篇：jQuery选择器特殊字符与属性空格问题