SPA（单页面应用）的基本实现原理

63 阅读 0 评论 42 点赞

我是靠谱客的博主含蓄小兔子，最近开发中收集的这篇文章主要介绍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

至此就基本结束了，哪里不明白的或者觉得我哪里写的是错的可以直接联系我，我会立刻更新。谢谢阅读！