1.单页面应用程序

下面构建一个简单的 todo list 来展现多页

后台

后台只需要设计好以下数据接口，让前端可以访问

Get： http://127.0.0.1:3000/todos

Post： http://127.0.0.1:3000/todos

前端

前端直接使用 ajax 异步请求后台的接口请求数据后渲染页面

index.html （渲染 todo list）

add.html （输入 todo 点击保存后跳转 index.html）

上述例子可以看出来前端后台职责明确，但多页需要整个页面重新渲染

单页开发可以通过增加 hash 进行页面标识（类似锚点），通过 window.onhashchange 事件判断 hash 值改变，进而通过 window.location.hash 获取 hash 值渲染对应的局部页面。（本案例服务端接口同前）

index.html

myTodoList.html

add.html

通过上述方式可以实现单页，但是这种方式有缺陷，在 *** 作 DOM 元素进行渲染的过程中，不同页面的 DOM 元素很可能冲突，一旦页面多了同样难以维护，因此诞生了三大前端框架：

teambition

cloud9

注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。（使用js控制渲染来替换html跳转）

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的 *** 作都在这张页面上完成，都由JavaScript来控制。

因此，对单页面应用来说，模块化的开发和设计显得相当重要。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

单页面应用的优缺点：

优点：

1、用户 *** 作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来 *** 作。

2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢

单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好

2、SEO不友好

SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

1、Hash模式：（也就是通过锚点？）

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 " www.baidu.com/#hashhash " ，其中 "#hashhash" 就是我们期望的 hash 值。

hash 值的变化不会导致浏览器像服务器发送请求，而且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

2、History模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中，history 新增了以下几个 API：

hash模式和history模式对比

1、hash 模式相比于 history 模式的优点：

兼容性更好，可以兼容到IE8

无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点：

看起来更丑。

会导致锚点功能失效。

相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

引用：

https://www.cnblogs.com/ppforever/p/5126640.html

https://www.jianshu.com/p/0c32c85c668b

https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1