js單頁hash路由原理與應用實戰

什麼是路由？

通俗點說，就是不一樣的URL顯示不一樣的內容

什麼是單頁應用?

單頁，英文縮寫爲SPA( Single Page Application)，就是把各類功能作在一個頁面內. 那所謂的單頁路由應用就是：在一個頁面內，經過切換地址欄的URL來實現切換內容的變化.

如何知道URL切換了呢？

當url後面的錨文本發生變化時， 會觸發onhashchange事件。經過這個事件，咱們就能夠對不一樣的URL 作出不一樣的處理。錨文本就是 URL中 #後面的內容，好比：

#/html

#/css

#/javascript

1 <a href="#/html">html課程</a> 
2 <a href="#/css">css課程</a> 

1         window.onload = function(){
2             //當hash發生變化的時候， 會產生一個事件 onhashchange
3             window.onhashchange = function(){
4                 console.log( '你的hash改變了' );
5                 //location對象是 javascript內置的(自帶的)
6                 console.log( location );
7             }
8         }

上例，咱們已經經過hash( 就是錨文本 ) 變化， 觸發了onhashchange事件， 就能夠把hash變化 與 內容 切換對應起來，就實現了單頁路由的應用！

接下來，咱們經過一個小的彩票程序，來體驗下單頁路由：

1 <input type="button" value="33選5">
2  <div></div>

 1         window.onload = function(){
 2             var oBtn = document.querySelector("input");
 3             var oDiv = document.querySelector("div");
 4             //33->max  5->num
 5             function buildNum( max, num ){
 6                 var arr = [];
 7                 for( var i = 0; i < max; i++ ){
 8                     arr.push( i + 1 );
 9                 }
10                 var target = []; //從1-33這33個數字中 隨機選出5個數
11                 for( var i = 0; i < num; i++ ){
12                     target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );
13                 }
14                 return target;
15             }
16             oBtn.onclick = function(){
17                 var num = buildNum( 33, 5 );
18                 oDiv.innerHTML = num;
19                 location.hash = num;
20             }
21             window.onhashchange = function(){
22                 oDiv.innerHTML = location.hash.substring(1);
23             }
24         }

上例，咱們經過1-33個數字，生成5個隨機數，放入Div中，  每次生成一組隨機數就更新div的內容，  最後經過瀏覽器的前進，後退按鈕，就能夠感受，全部的隨機切換內容像是在切換不一樣的URL頁面， 實際的效果是沒有切換任何頁面，徹底是在一個頁面中經過hash變化實現內容切換.

最後，咱們結合html5簡單的排版，利用hash來作一個選項卡切換的功能:

 1 header,
 2         footer {
 3             height: 100px;
 4             background: #ccc;
 5         }
 6 
 7         section {
 8             width: 60%;
 9             height: 400px;
10             background: #eee;
11             float: left;
12         }
13 
14         sidebar {
15             width: 40%;
16             height: 400px;
17             background: #999;
18             float: left;
19         }
20 
21         .clear {
22             clear: both;
23         }

 1 <header>
 2         頭部
 3     </header>
 4     <section>
 5         <ul>
 6             <li><a href="#/">所有</a></li>
 7             <li><a href="#/html">html課程</a></li>
 8             <li><a href="#/css">css課程</a></li>
 9             <li><a href="#/javascript">javascript課程</a></li>
10         </ul>
11     </section>
12     <sidebar>
13         右邊
14     </sidebar>
15     <div class="clear"></div>
16     <footer>
17         底部
18     </footer>

 1 (function(){
 2             var Router = function(){
 3                 /*
 4                     this.routes['/'] = function(){}    
 5                     this.routes['/html'] = function(){}
 6                 */ 
 7                 this.routes = {};//用來保存路由
 8                 this.curUrl = ''; //獲取當前的hash
 9             }
10             Router.prototype.init = function(){ //監聽路由變化
11                 //call,apply
12                 window.addEventListener( 'hashchange', this.reloadPage.bind(this) );
13             }
14             Router.prototype.reloadPage = function(){
15                 this.curUrl = location.hash.substring(1) || '/';
16                 this.routes[this.curUrl]();       
17             }
18             Router.prototype.map = function( key, callback ){ //保存路由對應的函數
19                 this.routes[key] = callback;
20                 // console.log( this.routes );
21             } 
22             window.Router = Router;
23         })();
24 
25         var oRouter = new Router();
26         oRouter.init();
27         oRouter.map( '/', function(){
28             var oSidebar = document.querySelector("sidebar");
29             oSidebar.innerHTML = 'ghostwu提供html,css,javascript從0基礎到精通系列課程，只要會開關機，就能學會';
30         });
31         oRouter.map('/html', function(){
32             var oSidebar = document.querySelector("sidebar");
33             oSidebar.innerHTML = 'ghostwu提供html5從入門到精通的課程';
34         });
35         oRouter.map('/css', function(){
36             var oSidebar = document.querySelector("sidebar");
37             oSidebar.innerHTML = 'ghostwu提供從入門到玩轉css3課程';
38         });
39         oRouter.map('/javascript', function(){
40             var oSidebar = document.querySelector("sidebar");
41             oSidebar.innerHTML = "ghostwu提供從0基礎到精通javascript系列課程";
42         });