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

阅读量：6977 次

发布时间：2019-06-27

本文共 4378 字，大约阅读时间需要 14 分钟。

什么是路由？

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

什么是单页应用?

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

如何知道URL切换了呢？

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

/html

/css

/javascript

1 html课程 2 css课程 1         window.onload = function(){2             //当hash发生变化的时候， 会产生一个事件 onhashchange3             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     
    
     17         底部18

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

转载地址：http://juypl.baihongyu.com/

你可能感兴趣的文章