小程序制作技巧分享_js单页hash路由原理与应用实

发布时间:2021-01-11 15:19 作者:jianzhan

摘要: js宣传单页hash路由器基本原理与运用实战演练详细说明 文中关键详细介绍了js宣传单页hash路由器基本原理与运用实战演练详细说明,共享给大伙儿,实际以下:什么叫路由器?通

js单页hash路由原理与应用实战详解       本篇文章主要介绍了js单页hash路由原理与应用实战详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文主要介绍了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 

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

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

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

 input type="button" value="33选5" 
 div /div 

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;

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 /div footer /footer
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系列课程";

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


  • 互动交流手机游戏《身亡

    模拟题目:互动交流沟通交流手机上手机游戏《不幸身亡成真》开售预告 餐饮店连坏杀人案 即将于6月2五日登陆Switch,iOS和安卓系统系统软件的真人版版互动交流沟通交流手机上手机游

  • 怎样提高手机游戏社交媒

    原题目:怎样提高手机游戏社交媒体性? 谈推动游戏玩家互动交流的13种体制 手机游戏陀螺独家代理编译程序,转截请标明出處! 编译程序/手机游戏陀螺Kevin 游戏玩家互动交流是当代

  • 父母与孩子在家最好的互

    小孩小的情况下能够玩小孩喜爱的各种各样亲子游互动交流手机游戏,跟孩子能够玩对玩游戏,跟闺女能够玩过家家等。 小孩大一点了,能够和爸爸妈妈一起做饺子,小孩在餐厅厨

  • 【晓琳栏目】给大学毕业

    下面大伙儿来试一下实际上中家能喝彩多少钱次,同学们们们本身计数,老师喊停的状况下停止喝彩。老师的动态性动态口令是:同学们们们,提早提前准备好了之后,大家就进入倒数

  • 20天进行两亿人金融业安全

    模拟题目:20天开展两亿人金融业业安全性性文化艺术文化教育 支付宝用互动交流沟通交流手机上手机游戏确保了 【CNMO新闻报道报导】“吃了吗?”它是很多相声中描述两个人见面的普