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         });