您的位置:首页 > Web前端 > JavaScript

js单页hash路由原理与应用实战

2017-08-15 14:28 459 查看
什么是路由?

通俗点说,就是不同的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         });


 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: