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


Posted in Javascript onAugust 14, 2017

本文主要介绍了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系列课程";
    });

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

Javascript 相关文章推荐
jQuery 回车事件enter使用示例
Feb 18 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
详解升级react-router 4 踩坑指南
Aug 14 #Javascript
javaScript封装的各种写法
Aug 14 #Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 #Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 #Javascript
jQuery实现手势解锁密码特效
Aug 14 #jQuery
Vue+Element使用富文本编辑器的示例代码
Aug 14 #Javascript
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php利用事务处理转账问题
2015/04/22 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript动态加载二
2012/08/22 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
基于python实现KNN分类算法
2020/04/23 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python连接字符串过程详解
2020/01/06 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python 在函数上添加包装器
2020/07/28 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
毕业生教师求职信
2013/10/20 职场文书
中层干部培训方案
2014/06/16 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL