spa

spa

spa全称:single-page application(单页应用)

是一种特殊的Web应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML,从而实现UI与用户的交互。

SPA百度百科

最显著的特点:正常情况下,我们会在一个页面中链接到其他的很多个页面,进行页面的跳转,但是如果使用单页面应用的话,我们始终在一个页面中。

由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

得益于ajax,我们可以实现无跳转刷新

又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。

实现spa

要实现spa,最关键的便是处理#后面的字符,也就是大家常说的URL的锚。

首先得了解一个对象:Location

  • Location 对象包含有关当前 URL 的信息。
  • Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

Location 对象的W3Cschool详细介绍

了解了Location 对象之后,我们可以知道,#后面的字符,其实location对象的hash属性的值,即是说,我们可以轻松拿到这个#后面字符的变化值,代码如下:

let hash = document.location.hash;

然而仅仅能够获取hash属性,是无法实现spa的,我们还需要能够改变hash值。我们可以直接使用a标签跳转:

<a href="#xiaoming">小明</a>
<a href="#xiaofang">小芳</a>
<a href="#xiaodong">小冬</a>
<a href="#xiaowang">小王</a>

到这里,我们还需要一个能监听hash值变化的事件:hashchange

见名知意,通过hashchange事件,我们可以监视#后面字符,一旦发生改变,就会触发此事件。

搞清楚实现方法之后,我们就可以开始写代码了。

我的小demo:

文件夹结构:

html:

css:

js:

json实例:

实现结果:

这只是一个小demo,实际上,现在主流的很多框架特别适合用于开发spa页面,如angularJS,vueJs,React,backbone,extjs等。

最后,再来谈一谈spa的优缺点

优点:

  • 分离前后端关注点,前端负责view,后端负责model,各司其职;
  • 服务器只接口提供数据,不用展示逻辑和页面合成,提高性能;
  • 同一套后端程序代码,不用修改兼容Web界面、手机;
  • 用户体验好、快,内容的改变不需要重新加载整个页面
  • 可以缓存较多数据,减少服务器压力
  • 单页应用像网络一样,几乎随处可以访问—不像大多数的桌面应用,用户可以通过任务网络连接和适当的浏览器访问单页应用。如今,这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。

缺点

  • 刚开始的时候加载可能慢很多
  • 用户操作需要写逻辑,前进、后退等;
  • 页面复杂度提高很多,复杂逻辑难度成倍

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GopherCoder

『Go 语言学习专栏』-- 第十期

1673
来自专栏社区的朋友们

fetch api 浅谈

作为传说中的xhr替代品,现在fetch api已经被开始在一些前端项目中使用了,比如阿里的一些产品已经将jq的ajax模块切换到fetch下了。个人感觉fet...

6490
来自专栏闰土大叔

记一次前端大厂面试

链接:https://juejin.im/post/5b9770056fb9a05d2f3692ce

2587
来自专栏我的博客

PHP引号转义(解决POST,GET,Mysql数据自动转义问题)

      今天做了一个小项目,给别人之后发现post数据被自动转义了,我郁闷了半天,我google了一下发现是PHP魔术引号在作怪。。。我煞费苦心终于找到了原...

3984
来自专栏极客猴

多线程爬取 unsplash 图库

我公众号文章的封面配图都在 Unsplash 上找的。因为 Unsplash 是一个完全免费的、无版权的高清图片资源网站。

2633
来自专栏即时通讯技术

金蝶随手记团队分享:还在用JSON? Protobuf让数据传输更省更快(实战篇)

本文接上篇《金蝶随手记团队分享:还在用JSON? Protobuf让数据传输更省更快(原理篇)》,以iOS端的Objective-C代码为例,向您演示如何使用P...

982
来自专栏晨星先生的自留地

从协议提取到多功能RDP识别脚本

3658
来自专栏圣杰的专栏

事件总线知多少(1)

源码路径:Github-EventBus 事件总线知多少(1) 事件总线知多少(2) 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布...

3657
来自专栏landv

c语言_代码段_快说你是猪

4973
来自专栏Seebug漏洞平台

TCTF/0CTF2018 XSS Writeup

刚刚4月过去的TCTF/0CTF2018一如既往的给了我们惊喜,其中最大的惊喜莫过于多道xss中Bypass CSP的题目,其中有很多应用于现代网站的防御思路。

1.2K8

扫码关注云+社区

领取腾讯云代金券