js 哈希路由原理实现

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

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

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

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

实现过程：

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

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

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

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         window.onload = function(){ 
 8             var  getoneNum = function(start,end){
 9                 var rand_num = Math.random();
10                 var range = end - start ;
11                 return start + Math.round( (Math.random() * range) );
12             };
13             var getnums = function(start,end,n){
14                 var arr = [];
15                 for(var i=0;i<n;i++){
16                     arr.push( getoneNum(start,end) );
17                 };
18                 return arr ;
19             };
20             function Ohash(){
21                 this.ospan = document.querySelector('.ospan');
22                 this.obtn = document.querySelector('input');
23             };
24             Ohash.prototype.bind = function(){
25                 var that = this;
26                 this.obtn.onclick = function(){
27                       location.hash = getnums(3,108,6);
28                       that.ospan.innerHTML = location.hash.substring(1) ;
29                 };
30                 window.onhashchange = function(){
31                     that.ospan.innerHTML = location.hash.substring(1)||'' ;
32                 };
33             };
34             var Oha = new Ohash();
35             Oha.bind();
36         }
37     </script>
38 </head>
39 <body>
40     <div class='box'> 
41        <input type="submit" value="触发按钮">
42        <span class="ospan"></span>
43     </div>
44 </body>
45 </html>

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

js 哈希路由原理实现

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

2.1 构造一个路由函数

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

2.3 定义路由配置规则

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

html 代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="./css/router.css">
 7     <script src="./js/router.js"></script>
 8     <style>
 9    
10     </style>
11 
12 </head>
13 <body>
14     <header>这里是头部</header>
15     <nav>
16         <li><a href="#/">aluoa</a>  </li>
17         <li><a href="#/01">huanying2015</a> </li>
18         <li> <a href="#/02">一代天骄</a> </li>
19         <li> <a href="#/03">霸王</a> </li>
20         <li><a href="#/04">秦始皇</a> </li>
21         <li><a href="#/05">释迦摩尼</a> </li>
22     </nav>
23     <section>
24         如果想看路由改变效果，请点击左边的链接
25     </section>
26     <div class="clear"></div>
27     <footer>这里是尾部</footer>
28 </body>
29 </html>

View Code