本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下:
什么是路由?
通俗点说,就是不同的URL显示不同的内容
什么是单页应用"htmlcode">
上例,我们已经通过hash( 就是锚文本 ) 变化, 触发了onhashchange事件, 就可以把hash变化 与 内容 切换对应起来,就实现了单页路由的应用! 接下来,我们通过一个小的彩票程序,来体验下单页路由: 上例,我们通过1-33个数字,生成5个随机数,放入Div中, 每次生成一组随机数就更新div的内容, 最后通过浏览器的前进,后退按钮,就可以感觉,所有的随机切换内容像是在切换不同的URL页面, 实际的效果是没有切换任何页面,完全是在一个页面中通过hash变化实现内容切换. 最后,我们结合html5简单的排版,利用hash来做一个选项卡切换的功能: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
<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 );
}
}
<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);
}
}
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系列课程";
});
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。