微客导航 » 文章资讯 » js单页hash路由原理与应用实战详解

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

2023-09-26 12:28:07 324

本文主要介绍了js单页hash路由原理与应用实战详解，分享给大家，具体如下：

什么是路由？

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

什么是单页应用?

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

如何知道URL切换了呢？

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

#/html

#/css

#/javascript

html课程
css课程

window.onload=function(){
//当hash发生变化的时候，会产生一个事件onhashchange
window.onhashchange=function(){
console.log('你的hash改变了');
//location对象是javascript内置的(自带的)
console.log(location);
}
}

上例，我们已经通过hash(就是锚文本)变化，触发了onhashchange事件，就可以把hash变化与内容切换对应起来，就实现了单页路由的应用！

接下来，我们通过一个小的彩票程序，来体验下单页路由：

window.onload=function(){
varoBtn=document.querySelector("input");
varoDiv=document.querySelector("div");
//33->max5->num
functionbuildNum(max,num){
vararr=[];
for(vari=0;i
上例，我们通过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;
}



头部



全部
html课程
css课程
javascript课程



右边

(function(){
varRouter=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;
})();

varoRouter=newRouter();
oRouter.init();
oRouter.map('/',function(){
varoSidebar=document.querySelector("sidebar");
oSidebar.innerHTML='ghostwu提供html,css,javascript从0基础到精通系列课程，只要会开关机，就能学会';
});
oRouter.map('/html',function(){
varoSidebar=document.querySelector("sidebar");
oSidebar.innerHTML='ghostwu提供html5从入门到精通的课程';
});
oRouter.map('/css',function(){
varoSidebar=document.querySelector("sidebar");
oSidebar.innerHTML='ghostwu提供从入门到玩转css3课程';
});
oRouter.map('/javascript',function(){
varoSidebar=document.querySelector("sidebar");
oSidebar.innerHTML="ghostwu提供从0基础到精通javascript系列课程";
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐