[js高手之路]js单页hash路由原理与应用实战

摘要：什么是路由通俗点说，就是不同的显示不同的内容什么是单页应用单页，英文缩写为，就是把各种功能做在一个页面内那所谓的单页路由应用就是在一个页面内，通过切换地址栏的来实现切换内容的变化如何知道切换了呢当后面的锚文本发生变化时，会触发事件。

什么是路由？

通俗点说，就是不同的URL显示不同的内容

什么是单页应用?

单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址栏的URL来实现切换内容的变化.

如何知道URL切换了呢？

当url后面的锚文本发生变化时， 会触发onhashchange事件。通过这个事件，我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容，比如：

1 html课程 
2 css课程 
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 
2  

 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 

 2         头部
 3     
 4     

 5         

 6             
全部
 7             
html课程
 8             
css课程
 9             
javascript课程
10         
11     
12     
13         右边
14     
15     

16     

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