SPA页面初试
之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location.hash是什么东西)
其实,SPA的原理就是,一开始将一些必要的页面都加载进来,当你在页面输入别的路由的时候,其实还是待在当前的页面,只不过是他识别出你想要去的地址,然后将那个页面的内容获取到,替代掉当前页面的内容,并且相应的改变url地址,这样给人看起来就好像到了另一个页面,实际上你还是在这个页面里,没有离开过.
比如,例如当前你在localhost:8080/index.html这个页面时,你想跳转到#list-view页面(使用hashChange),或者你点击某个跳转按钮要跳转到那个页面的时候,他先获取你那个#list-view页面的内容,然后将当前页面的内容清除掉,然后再把list-view的内容呈现出来,并没有跳转到别的页面,你从头到尾都是在这个页面里,不过url地址会变化,因此看起来就像你到了另一个页面,这样给人的用户体验特别好,因为不需要等待页面加载过程.
说了这么多,我们来根据他的原理做一个SPA的小应用吧(里面的html和css代码直接复制了我之前看的那个博客的作者的,因为懒得自己设计)
html代码如下:
<!DOCTYPE html>
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式