spa的意义及原理
-
设计意义
a、 前后端分离
b、减轻服务器压力
c、增强用户体验
d、Prerender预渲染优化SEO
-
工作原理
- History API 优雅
-
pushState
history.pushState(**stateObject**, title, url);history.pushState()主要是在不刷新浏览器的情况下，创建新的浏览记录并插入浏览记录队列中。
-
状态对象（stateObject）–stateObject是一个JavaScript对象，通过pushState方法可以将stateObject内容传递到新页面中。
-
标题（title）–几乎没有浏览器支持该参数，但是传一个空字符串会比较安全。
-
地址（url）–新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；浏览器在调用pushState()方法后不会加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
-
-
onpopstate事件
window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); };onpopstate事件，点击后退按钮(或者在JavaScript中调用
history.back()方法)时触发；
- Hash 不优雅、兼容性好
1. #含义
#代表网页中的一个位置。右面的自负就是代表的位置信息：如:
http://localhost：8080/cbuild/index.html#one 2. window.location.hash读取#值
window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
3. onhashchange事件
这是一个HTML5新增的事件，当#值发生变化时，就会触发这个事件。 使用方法如下:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange",func, false);
扫一扫
3054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
