SPA（单页面应用）的基本实现原理
写在前面
我们应该都使用过网易云音乐或者是别的一些逼格比较高的网页，他们比较厉害的一点是页面看起来只有一个，不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作，这个逼格那么高的页面是怎么实现的呢？今天博主就简单的将实现的原理写一下，鄙人能力有限，写的不好的，或者您有自己的想法的，可以随时联系我，这里写的是原生的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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读