js 哈希路由原理实现
在 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 哈希路由原理实现的更多相关文章
- hash路由(哈希路由)
1.https://www.cnblogs.com/huanying2015/p/8047376.html (js 哈希路由原理实现) 2.https://www.cnblogs.com/yeer/a ...
- 前端路由原理及vue-router介绍
前端路由原理本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新.目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Ha ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- Mysql系列六：（Mycat分片路由原理、Mycat常用分片规则及对应源码介绍）
一.Mycat分片路由原理 我们先来看下面的一个SQL在Mycat里面是如何执行的: , ); 有3个分片dn1,dn2,dn3, id=5000001这条数据在dn2上,id=10000001这条数 ...
- vue-router路由原理
Vue-router路由原理 目前实现路由的方式有两中,vue通过参数mode来设置,默认是hash模式. 利用URL中的hash(‘#’)来实现 利用History interface在HTML5中 ...
- director.js实现前端路由
注:director.js的官网 https://github.com/flatiron/director director.js是什么? 理解:前端的route框架,director.js客户端的路 ...
- js 实现前端路由的方法
js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...
- 从路由原理出发，深入阅读理解react-router 4.0的源码
react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面.路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新.通过前 ...
- SQL Server2014 哈希索引原理
SQL Server2014 哈希索引原理 翻译自:http://www.sqlservercentral.com/blogs/sql-and-sql-only/2015/09/08/hekaton- ...
随机推荐
- mac android apk反编译
在mac os系统上反编译android apk,首先需要准备好以下3个文件: 1.apktool:https://ibotpeaches.github.io/Apktool/install/ 2.d ...
- jQuery添加删除节点例子第十节"员工增删表"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Linux系列教程（十五）——Linux用户和用户组管理之用户管理命令
上篇博客我们介绍了用户管理的相关配置文件,包括用户信息文件/etc/passwd,用户密码文件/etc/shadow:然后介绍了用户组信息文件/etc/group,用户组密码文件/etc/gshado ...
- windows下 sbulime text 安装less2css踩的几个坑
sublime 就不介绍了,less2css 是一个安装在sublime上的插件,可以让你书写less后自动生成css文件,而且还可以提示less的语法错误. 搜了一下相关的教程,很多都写的不全,按照 ...
- JavaScript系列----面向对象的JavaScript(1)
1.面向对象的编程 1.1.什么是面向对象编程 面向对象编程:即是把能够完成独立完成一部分功能的代码封装在一起,组成一个类. 举个例子来说: 这里有一把枪, 枪的种类很多,有步枪,机关枪,阻击枪... ...
- PHP基础入门（三）【PHP中的数组】
PHP数组的分类 按照下标的不同,PHP数组分为关联数组与索引数组: 索引数组:下标从0开始,依次增长: 关联数组: 下标为字符串格式,每个下标字符串与数组的值一一关联对应.(有点像对象的键值对) 关 ...
- 向ASP.NET Core迁移
有人说.NET在国内的氛围越来越不行了,看博客园文章的浏览量也起不来.是不是要转Java呢? 没有必要扯起语言的纷争,Java也好C#都只是语言是工具,各有各的使用场景.以前是C#非开源以及不能在Li ...
- c#params应用
params 是C#开发语言中关键字, params主要的用处是在给函数传参数的时候用,就是当函数的参数不固定的时候. 在方法声明中的 params 关键字之后不允许任何其他参数,并且在方法声明中只允 ...
- Dijkstra算法（Swift版）
原理 我们知道,使用Breadth-first search算法能够找到到达某个目标的最短路径,但这个算法没考虑weight,因此我们再为每个edge添加了权重后,我们就需要使用Dijkstra算法来 ...
- ANDROID基础ACTIVITY篇之ACTIVITY的生命周期（二）
除了Activity的七大生命周期方法外外,还有两个相当重要的方法需要大家熟记那就是onSavelnstanceState()和onRestoreinstanceState(). 那么什么时候会调用这 ...