了解SPA:单页富应用程序
概念:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成。
速度:更好的用户体验,让用户在web app感受native app的速度和流畅。
路由:通过前端路由进行地址映射,在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载,也即是页面不会重新去刷新一下,重新与后台进行交互。有两种方式进行:
第一种:URL的 hash
URL的hash也就是锚点(#),本质上是改变window.location的href属性,所以我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新动作:
第二种:HTML5的history模式,pushState
PS:push在栈(先进后出的规则)里面用的很多,pushState是把参数压入到一个栈里面(栈底:home|about|hao|demo 栈顶),然后URL里面永远是显示栈顶的那个参数,此时栈顶的参数是demo,所以地址里面显示的是demo这个URL:
此时,如果退回一个栈(back()函数),则会退回到上一个参数:hao这个URL地址:
以此类推,所以pushState类似一个栈,push是入栈,back是出栈,遵循先进后出。
第三种:HTML5的history模式,replaceState
所以这个是替换的方式,不保留历史的参数。
第四种:HTML5的history模式,go,只能在栈里面使用(pushState)
当前页面是demo,这时候用history.go(-1),则显示为hao的页面:
PS:history.go跳转到第几个页面
history.back()等价于history.go(-1)
history.forward()等价于history.go(1)
这三个接口等同于浏览器界面的前进、后退