欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 08:15:46
本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下: 什么是路由? 通俗点说,就是不同的url显示不同的内容 什么是单页应用? 单页...

本文主要介绍了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系列课程";
    });

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