js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解

更新時間：2017年08月14日 15:54:38 作者：ghostwu

本篇文章主要介紹了js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文主要介紹了js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解，分享給大家，具體如下：

什么是路由？

通俗點(diǎn)說，就是不同的URL顯示不同的內(nèi)容

什么是單頁應(yīng)用?

單頁，英文縮寫為SPA( Single Page Application)，就是把各種功能做在一個頁面內(nèi). 那所謂的單頁路由應(yīng)用就是：在一個頁面內(nèi)，通過切換地址欄的URL來實(shí)現(xiàn)切換內(nèi)容的變化.

如何知道URL切換了呢？

當(dāng)url后面的錨文本發(fā)生變化時，會觸發(fā)onhashchange事件。通過這個事件，我們就可以對不同的URL 做出不同的處理。錨文本就是 URL中 #后面的內(nèi)容，比如：

#/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(){
      //當(dāng)hash發(fā)生變化的時候， 會產(chǎn)生一個事件 onhashchange
      window.onhashchange = function(){
        console.log( '你的hash改變了' );
        //location對象是 javascript內(nèi)置的(自帶的)
        console.log( location );
      }
    }

上例，我們已經(jīng)通過hash( 就是錨文本 ) 變化，觸發(fā)了onhashchange事件，就可以把hash變化與內(nèi)容切換對應(yīng)起來，就實(shí)現(xiàn)了單頁路由的應(yīng)用！

接下來，我們通過一個小的彩票程序，來體驗(yàn)下單頁路由：

 <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個數(shù)字中 隨機(jī)選出5個數(shù)
        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個數(shù)字，生成5個隨機(jī)數(shù)，放入Div中，每次生成一組隨機(jī)數(shù)就更新div的內(nèi)容，最后通過瀏覽器的前進(jìn)，后退按鈕，就可以感覺，所有的隨機(jī)切換內(nèi)容像是在切換不同的URL頁面，實(shí)際的效果是沒有切換任何頁面，完全是在一個頁面中通過hash變化實(shí)現(xiàn)內(nèi)容切換.

最后，我們結(jié)合html5簡單的排版，利用hash來做一個選項(xiàng)卡切換的功能:

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 = ''; //獲取當(dāng)前的hash
      }
      Router.prototype.init = function(){ //監(jiān)聽路由變化
        //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 ){ //保存路由對應(yīng)的函數(shù)
        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基礎(chǔ)到精通系列課程，只要會開關(guān)機(jī)，就能學(xué)會';
    });
    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提供從入門到玩轉(zhuǎn)css3課程';
    });
    oRouter.map('/javascript', function(){
      var oSidebar = document.querySelector("sidebar");
      oSidebar.innerHTML = "ghostwu提供從0基礎(chǔ)到精通javascript系列課程";
    });

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。