在 js 中，有一种方法，可以在不刷新页面的情况下，页面的内容进行变更，ajax 是一种，这里介绍另一种，就是 哈希路由原理

先看一个简单的路由和页面内容关联的例子，要实现两个功能：

1.1. 浏览器的路由变化，页面内容跟着变化

1.2.页面内容变换，浏览器的内容跟着变化

实现过程：

1.3.设定一个页面按钮，点击按钮时，改变页面的内容

1.4.设定浏览器的内容，跟随页面内容的变化而变化，即：直接赋值给浏览器的hash属性就可以了

1.5.监听浏览器的hash值，如果hsah改变了，则页面内容跟随变化

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script>

         window.onload = function(){

             var  getoneNum = function(start,end){

                 var rand_num = Math.random();

                 var range = end - start ;

                 return start + Math.round( (Math.random() * range) );

             };

             var getnums = function(start,end,n){

                 var arr = [];

                 for(var i=0;i<n;i++){

                     arr.push( getoneNum(start,end) );

                 };

                 return arr ;

             };

             function Ohash(){

                 this.ospan = document.querySelector('.ospan');

                 this.obtn = document.querySelector('input');

             };

             Ohash.prototype.bind = function(){

                 var that = this;

                 this.obtn.onclick = function(){

                       location.hash = getnums(3,108,6);

                       that.ospan.innerHTML = location.hash.substring(1) ;

                 };

                 window.onhashchange = function(){

                     that.ospan.innerHTML = location.hash.substring(1)||'' ;

                 };

             };

             var Oha = new Ohash();

             Oha.bind();

         }

     </script>

 </head>

 <body>

     <div class='box'>

        <input type="submit" value="触发按钮">

        <span class="ospan"></span>

     </div>

 </body>

 </html>

运行结果：实现了hash 值与页面内容的关联变化

2.类似的，通过页面的无刷新，仅改变页面的 hash 值，而达到页面内容的变更

2.1 构造一个路由函数

2.2 对路由的hash值进行监听，如果hash 发生改变，则执行加载函数

2.3 定义路由配置规则

2.4 对路由进行初始化即调用

html 代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="./css/router.css">

     <script src="./js/router.js"></script>

     <style>

     </style>

 </head>

 <body>

     <header>这里是头部</header>

     <nav>

         <li><a href="#/">aluoa</a>  </li>

         <li><a href="#/01">huanying2015</a> </li>

         <li> <a href="#/02">一代天骄</a> </li>

         <li> <a href="#/03">霸王</a> </li>

         <li><a href="#/04">秦始皇</a> </li>

         <li><a href="#/05">释迦摩尼</a> </li>

     </nav>

     <section>

         如果想看路由改变效果，请点击左边的链接

     </section>

     <div class="clear"></div>

     <footer>这里是尾部</footer>

 </body>

 </html>

css 代码：

  header,footer{

         height:5em;

         background: #cba;

         text-align: center;

         line-height: 5em;

     }

     nav{

         width:20%;

         height:30em;

         background: #391;

         float:left;

     }

     li{

         height:2em;

     }

     section{

         width:80%;

         background: #9a1;

         height:30em;

         float:right;

         line-height: 2em;

         text-align: center;

     }

     .clear{

         clear:both;

     }

js代码：

 window.onload = function(){

     (function(){

         var Router=function(){

             this.routes={};

             this.curUrl='/';

         };

          // 对路由的hash值进行监听，如果发生改变，则调用reloadPage()函数

         Router.prototype.init= function(){

             // 这里的两个this 是不一样的，需要注意

             window.addEventListener('hashchange',this.reloadPage.bind(this) );

         };

         // 调用reloadPage函数，实际上时执行routes[]()函数

         Router.prototype.reloadPage = function(){

             this.curUrl = location.hash.substring(1)||'/';

             this.routes[this.curUrl]();

         };

           // 路由配置的规则

         Router.prototype.map = function(key,callback){

             this.routes[key] = callback;

         }

         window.Router = Router;

         })();

         var ORouter = new Router();

         ORouter.init();

         // 以下为路由配置的设置，形象的当做一个路由与调用函数的映射表也可以

         ORouter.map('/',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "欢迎来到火星，这是一次非常的旅行，祝您路途愉快！";

         });

          ORouter.map('/01',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 ";

         });

          ORouter.map('/02',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "hehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehheheheh";

         });

          ORouter.map('/03',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  nihao  ";

         });

          ORouter.map('/04',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine ";

         });

         ORouter.map('/05',function(){

             var Osect = document.querySelector('section');

             Osect.innerHTML = "good night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night  ";

         });

 }

运行结果：

js 哈希路由原理实现的更多相关文章

  1. hash路由(哈希路由)

    1.https://www.cnblogs.com/huanying2015/p/8047376.html (js 哈希路由原理实现) 2.https://www.cnblogs.com/yeer/a ...

  2. 前端路由原理及vue-router介绍

    前端路由原理本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新.目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Ha ...

  3. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  4. Mysql系列六：（Mycat分片路由原理、Mycat常用分片规则及对应源码介绍）

    一.Mycat分片路由原理 我们先来看下面的一个SQL在Mycat里面是如何执行的: , ); 有3个分片dn1,dn2,dn3, id=5000001这条数据在dn2上,id=10000001这条数 ...

  5. vue-router路由原理

    Vue-router路由原理 目前实现路由的方式有两中,vue通过参数mode来设置,默认是hash模式. 利用URL中的hash(‘#’)来实现 利用History interface在HTML5中 ...

  6. director.js实现前端路由

    注:director.js的官网 https://github.com/flatiron/director director.js是什么? 理解:前端的route框架,director.js客户端的路 ...

  7. js 实现前端路由的方法

    js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...

  8. 从路由原理出发，深入阅读理解react-router 4.0的源码

      react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面.路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新.通过前 ...

  9. SQL Server2014 哈希索引原理

    SQL Server2014 哈希索引原理 翻译自:http://www.sqlservercentral.com/blogs/sql-and-sql-only/2015/09/08/hekaton- ...

随机推荐

  1. HDU1754 I hate it(线段树 单点修改)

    好久没打线段树,来一道练练手,但说句实话,I really hate it!!!!   很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感.  不管 ...

  2. 【机器学习实战】第14章 利用SVD简化数据

    第14章 利用SVD简化数据 SVD 概述 奇异值分解(SVD, Singular Value Decomposition): 提取信息的一种方法,可以把 SVD 看成是从噪声数据中抽取相关特征.从生 ...

  3. WPF 简易的喷泉效果

    这两天领导让我做个喷泉的效果,要把一个个UserControl从一个位置喷出,然后,最后落在最终需要在的位置. 喷泉效果说白了,就是两个步骤:1.放大,从0放大到需要的倍数:2.缩小,平移,从放大的倍 ...

  4. 前端面试题系列（1）：doctype作用 标准模式与兼容模式

    1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...

  5. WebService学习总结

    因为最近开发的项目需求中涉及到了webservice,正好对这块知识以前学过但是又忘记了,于是想着从新学习下,整理一个笔记,便于后面的复习.于是有了本文,下面开始介绍webservice. 一.简介 ...

  6. 最全Jenkins+SVN+iOS+cocoapods环境搭建及其错误汇总

    前言 持续集成是敏捷开发中重要的一部分,为保证新功能的开发,又保证旧功能的维护,从一个冲刺到下个冲刺.持续集成工具是我们保证开发和维护并行的护航者,现在流行的集成工具有很多,例如: 1.Jenkins ...

  7. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  8. java参数传值方式

     java参数有值类型和引用类型两种.所以java参数的传值也就从这两个方面分析. 从内存模型来说参数传递更为直观一些,这里涉及到两种类型的内存:栈内存(stack)和堆内存(heap).   基本类 ...

  9. 赢在面试之Java泛型篇(十二)

    139. Java中的泛型是什么 ? 使用泛型的好处是什么? 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数. 好处: 1.类型安全,提供编译期 ...

  10. LKD: Chapter 7 Interrupts and Interrupt Handlers

    Recently I realized my English is still far from good. So in order to improve my English, I must not ...