写在前面
我们应该都使用过网易云音乐或者是别的一些逼格比较高的网页，他们比较厉害的一点是页面看起来只有一个，不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作，这个逼格那么高的页面是怎么实现的呢？今天博主就简单的将实现的原理写一下，鄙人能力有限，写的不好的，或者您有自己的想法的，可以随时联系我，这里写的是原生的js实现，不是使用vue或者react的路由实现，所以我明白那些每天使用框架的人看到以后的感觉，肯定是没有vue或者react又或者别的一些数据双向绑定的框架使用起来方便，不过这个是入门的基本原理，所以大神莫怪！
源码已经上传到Github上：spa应用的简单实现
我们首先看一下效果：
那么之前我说过，遇到一个问题怎么办？首先分析一下问题包括几个部分，这里可以看到，想实现这样效果，有两个前提，第一是页面不可以刷新，第二个是怎么可以获取到URL中#（锚部分）后面的东西，如果可以控制#后面的值那么我们就可以用它来写文章。
OK，问题定位到了以后，下面就是怎么解决的问题，首先我们都知道，不刷新页面其实很简单，就是使用ajax就可以了，ajax的异步请求是完全可以满足我们第一个问题的解决方案的，第二个怎么做呢？其实呢也简单，我们都知道页面的location对象，他有很多自己的属性：
我们可以看到第一个hash不正是我们要找的吗？
解决方案有了，下面就是编码了，怎么实现呢？看代码：
那Json里面其实也很简单，只是三条我们需要展示的数据：
[ { "name": "hi,我是tom", "text": "这是tom的部分" },{ "name": "hi,我是jim", "text": "这是jim的部分" },{ "name": "hi,我是jary", "text": "这是jary的部分" } ]
H5的源码是这样的：
<!DOCTYPE html> <!-- author : clearlove aim : csdn date : 2018-9 bug : no --> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> a{ text-decoration: none; margin-left: 1rem; } input{ width: 10rem; height: 2rem; border: 1px solid black; margin-top: 1rem; } </style> </head> <body> <a href="#tom">Tom</a> <a href="#jim">Jim</a> <a href="#jary">Jary</a><br /> <input type="text" name="" id="name" value="" readonly="readonly"/> <input type="text" name="" id="text" value="" readonly="readonly"/> <script type="text/javascript"> /* 监听hash改变的事件 */ window.addEventListener('hashchange',function(){ /* 将hash的值拿到 */ var hash = document.location.hash; /* 使用switch判断hash的值是多少 */ switch(hash){ case '#tom' : $.ajax({ url:'./json/all_name.json', success:function(data){ $("#name").val(data[0].name); $("#text").val(data[0].text); } }); break; case '#jim' : $.ajax({ url:'./json/all_name.json', success:function(data){ $("#name").val(data[1].name); $("#text").val(data[1].text); } }); break; case '#jary' : $.ajax({ url:'./json/all_name.json', success:function(data){ $("#name").val(data[2].name); $("#text").val(data[2].text); } }); break; default : $.ajax({ url:'./json/all_name.json', success:function(data){ $("#name").val(data[0].name); $("#text").val(data[0].text); } }); } }); </script> </body> </html>
PS：这里不要忘记引用jquery，上面的switch觉得看着不舒服的，使用if-else也是一样可以实现的！
这里有的人可能不是很明白，hashchange是个什么东西，下面简单的介绍一下：
①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号） ②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性： window.addEventListener('hashchange',function(e) { console.log(e.oldURL); console.log(e.newURL) },false);
OVER
至此就基本结束了，哪里不明白的或者觉得我哪里写的是错的可以直接联系我， 我会立刻更新。谢谢阅读！
