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 : clearloveaim : csdndate : 2018-9bug : 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

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

SPA（单页面应用）的基本实现原理相关推荐

（25）：SPA单页面的理解
对SPA单页面的理解,它的优缺点分别是什么,如何实现SPA应用一.什么是SPA 1.SPA(single-page application),翻译过来就是单页应用 2.SPA是一种网络应用程序或网站 ...
通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
[vue] 说说你对SPA单页面的理解，它的优缺点分别是什么？
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
spa单页面应用html缓存问题
一.背景浏览器的http请求都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存. 而spa单页面应用是通过路由切换来访问 ...
单页面应用的前端路由原理是什么？
前置知识在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么? 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件, ...
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
当spa单页面应用遇上SEO，蛋痛的经历
spa单页面应用优点当然毋庸置疑:效果酷炫,我在视觉和产品面前无从反驳:性能高速度快,全JS嘛当然快,我在运维和产品面前无言以对:运算分散,异步加载,又省硬件又省流量,我在开发和产品面前彻底投降:JS ...

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

SPA（单页面应用）的基本实现原理相关推荐

最新文章

热门文章