原文地址:https://github.com/HolyZheng/...
多页应用和单页应用
多页应用
- 多页应用中每个html页面作为一个功能组件,通过刷新,请求等方式,组合这些htm页面。前端充当一个展示层,项目的重心偏向后端,往往由后端来主导项目。
- 当页面有所变化时,页面就会刷新,会造成资源的浪费和用户体验的下降
单页应用
- 路由处理和数据层前置到前端,后端只需提供相关数据api,良好的前后端分离,减轻后端压力。
- 后端的一套api可用于网页和移动端app等
- 内容改变无须再刷新整个页面,提高用户体验。
单页应用的缺点
- 首次加载大量资源,因为要在一个页面上提高所有功能。
- 不利于SEO,因为数据在前端渲染。
前端路由
传统路由时在后端出现的,简单说路由就是用来和后端服务器进行交互的一种方式,通过不同路路径,请求不同的资源。
提一下ajax,ajax让我们可以在不刷新页面的情况下进行交互,提升了用户体验,而前端路由使得我们可以无刷新的实现页面跳转。
前端路由实现方式
History API
重点在于 history.pushState
和history.replaceState
这两个api,pushState会增加一条新的历史记录,replaceState会替换当前的历史记录,他们都接收三个参数(不支持跨域)
- state,存储当前路由对应状态
- title,标题
- url,地址
这两个api操作浏览器的历史记录,但是不会引起页面的刷新,可以通过
window.history.pushState({page: 1, ....}, null, "https://xxxx");
window.history.pushState({....}, null, "?name=orange");
添加历史记录,并根据新的url手动更新页面组件。当我们在历史记录中切换的时候,会触发popState事件,我们可以在返回的事件对象中e.state中获取到历史记录对应的state。
window.addEventListener('popstate', e => {...})
整体流程图
图转载自hwencc同学
ps: window.history 还有 back()回退,forward()前进,go()前进或退后等api
hash
原理是url中hash部分的值改变的时候,浏览器不刷新页面,但是会触发hashchange事件,所以我们可以在hashchange事件中,根据新的hash值,手动更新页面组件
window.addEventListener('hashchange', () => {})
ps:window.location属性有 href 整个url,protocol协议,host域名,port端口,hash哈希,origin来源域名
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。