js单页hash路由原理与应用实战详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js单页hash路由原理与应用实战详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3885字,纯文字阅读大概需要6分钟。
内容图文
![js单页hash路由原理与应用实战详解](/upload/InfoBanner/zyjiaocheng/342/c9b4cd57c7814d87b78354e38c0ab735.jpg)
本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下:
什么是路由?
通俗点说,就是不同的URL显示不同的内容
什么是单页应用?
单页,英文缩写为SPA( Single Page Application),就是把各种功能做在一个页面内. 那所谓的单页路由应用就是:在一个页面内,通过切换地址栏的URL来实现切换内容的变化.
如何知道URL切换了呢?
当url后面的锚文本发生变化时, 会触发onhashchange事件。通过这个事件,我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容,比如:
#/html
#/css
#/javascript
<a href="#/html" rel="external nofollow" rel="external nofollow" >html课程</a> <a href="#/css" rel="external nofollow" rel="external nofollow" >css课程</a>
window.onload = function(){ //当hash发生变化的时候, 会产生一个事件 onhashchange window.onhashchange = function(){ console.log( '你的hash改变了' ); //location对象是 javascript内置的(自带的) console.log( location ); } }
上例,我们已经通过hash( 就是锚文本 ) 变化, 触发了onhashchange事件, 就可以把hash变化 与 内容 切换对应起来,就实现了单页路由的应用!
接下来,我们通过一个小的彩票程序,来体验下单页路由:
<input type="button" value="33选5"> <div></div>
window.onload = function(){ var oBtn = document.querySelector("input"); var oDiv = document.querySelector("div"); //33->max 5->num function buildNum( max, num ){ var arr = []; for( var i = 0; i < max; i++ ){ arr.push( i + 1 ); } var target = []; //从1-33这33个数字中 随机选出5个数 for( var i = 0; i < num; i++ ){ target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) ); } return target; } oBtn.onclick = function(){ var num = buildNum( 33, 5 ); oDiv.innerHTML = num; location.hash = num; } window.onhashchange = function(){ oDiv.innerHTML = location.hash.substring(1); } }
上例,我们通过1-33个数字,生成5个随机数,放入Div中, 每次生成一组随机数就更新div的内容, 最后通过浏览器的前进,后退按钮,就可以感觉,所有的随机切换内容像是在切换不同的URL页面, 实际的效果是没有切换任何页面,完全是在一个页面中通过hash变化实现内容切换.
最后,我们结合html5简单的排版,利用hash来做一个选项卡切换的功能:
header, footer { height: 100px; background: #ccc; } section { width: 60%; height: 400px; background: #eee; float: left; } sidebar { width: 40%; height: 400px; background: #999; float: left; } .clear { clear: both; }
<header> 头部 </header> <section> <ul> <li><a href="#/" rel="external nofollow" >全部</a></li> <li><a href="#/html" rel="external nofollow" rel="external nofollow" >html课程</a></li> <li><a href="#/css" rel="external nofollow" rel="external nofollow" >css课程</a></li> <li><a href="#/javascript" rel="external nofollow" >javascript课程</a></li> </ul> </section> <sidebar> 右边 </sidebar> <div class="clear"></div> <footer> 底部 </footer>
(function(){ var Router = function(){ /* this.routes['/'] = function(){} this.routes['/html'] = function(){} */ this.routes = {};//用来保存路由 this.curUrl = ''; //获取当前的hash } Router.prototype.init = function(){ //监听路由变化 //call,apply window.addEventListener( 'hashchange', this.reloadPage.bind(this) ); } Router.prototype.reloadPage = function(){ this.curUrl = location.hash.substring(1) || '/'; this.routes[this.curUrl](); } Router.prototype.map = function( key, callback ){ //保存路由对应的函数 this.routes[key] = callback; // console.log( this.routes ); } window.Router = Router; })(); var oRouter = new Router(); oRouter.init(); oRouter.map( '/', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html,css,javascript从0基础到精通系列课程,只要会开关机,就能学会'; }); oRouter.map('/html', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html5从入门到精通的课程'; }); oRouter.map('/css', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供从入门到玩转css3课程'; }); oRouter.map('/javascript', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = "ghostwu提供从0基础到精通javascript系列课程"; });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的js单页hash路由原理与应用实战详解全部内容,希望文章能够帮你解决js单页hash路由原理与应用实战详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。