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 相关文章推荐
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP里的中文变量说明
2011/07/23 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
详解flask入门模板引擎
2018/07/18 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
师生聚会感言
2014/01/26 职场文书
工程承诺书怎么写
2014/05/24 职场文书
mysql 索引合并的使用
2021/08/30 MySQL