js中單頁hash路由原理的示例分析

小編給大家分享一下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系列課程";
    });

以上是“js中單頁hash路由原理的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！