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

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

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

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

什么是路由？

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

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

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

如何知道URL切換了呢？

當(dāng)url后面的錨文本發(fā)生變化時(shí)，會(huì)觸發(fā)onhashchange事件。通過(guò)這個(gè)事件，我們就可以對(duì)不同的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ā)生變化的時(shí)候， 會(huì)產(chǎn)生一個(gè)事件 onhashchange
      window.onhashchange = function(){
        console.log( '你的hash改變了' );
        //location對(duì)象是 javascript內(nèi)置的(自帶的)
        console.log( location );
      }
    }

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

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

 <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個(gè)數(shù)字中 隨機(jī)選出5個(gè)數(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);
      }
    }

上例，我們通過(guò)1-33個(gè)數(shù)字，生成5個(gè)隨機(jī)數(shù)，放入Div中，每次生成一組隨機(jī)數(shù)就更新div的內(nèi)容，最后通過(guò)瀏覽器的前進(jìn)，后退按鈕，就可以感覺(jué)，所有的隨機(jī)切換內(nèi)容像是在切換不同的URL頁(yè)面，實(shí)際的效果是沒(méi)有切換任何頁(yè)面，完全是在一個(gè)頁(yè)面中通過(guò)hash變化實(shí)現(xiàn)內(nèi)容切換.

最后，我們結(jié)合html5簡(jiǎn)單的排版，利用hash來(lái)做一個(gè)選項(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 = {};//用來(lái)保存路由
        this.curUrl = ''; //獲取當(dāng)前的hash
      }
      Router.prototype.init = function(){ //監(jiān)聽(tīng)路由變化
        //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 ){ //保存路由對(duì)應(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ǔ)到精通系列課程，只要會(huì)開(kāi)關(guān)機(jī)，就能學(xué)會(huì)';
    });
    oRouter.map('/html', function(){
      var oSidebar = document.querySelector("sidebar");
      oSidebar.innerHTML = 'ghostwu提供html5從入門(mén)到精通的課程';
    });
    oRouter.map('/css', function(){
      var oSidebar = document.querySelector("sidebar");
      oSidebar.innerHTML = 'ghostwu提供從入門(mén)到玩轉(zhuǎn)css3課程';
    });
    oRouter.map('/javascript', function(){
      var oSidebar = document.querySelector("sidebar");
      oSidebar.innerHTML = "ghostwu提供從0基礎(chǔ)到精通javascript系列課程";
    });

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