前端路由与后端路由的思考

后端路由

* path（路由分发）
    针对不一样的路由对应不一样的回调函数处理(req, res, next)
    * req;获取请求参数
    * res：返回请求数据
    * next: 调用后续的回调函数

前端路由

* 路由是根据不一样的url去请求不一样的页面内容
* 前端路由就是把不一样路由对应不一样的内容或页面的任务交给前端来作，以前是经过服务端根据url不一样返回不一样的页面来实现。
* 利用H5的history.pushState 和 history.replaceState ，这两个history新增的api，为前端操控浏览器历史栈提供了可能性
* 这两个Api都会操做浏览器的历史栈，而不会引发页面的刷新。
* 不一样的是，pushState会增长一条新的历史记录，而replaceState则会替换当前的历史记录。
应用：单页面应用
优势和缺点：
    * 优势： 用户体验好，不须要每次向服务器发送请求请求页面数据，响应快
    * 缺点：使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存，

hash值得由来

历史：
    一、基于Ajax 的 Web 应用最为明显的特征在于使用了浏览器内部原生支持的 XMLHttpRequest对象与后台服务器进行数据通。
    二、因为这种通讯方式不须要页面的刷新动做，于是不管与后台发生了多少次通讯，浏览器的 URL 会一直保持在初始地址不变。
    三、这随之而来的一个问题即是不断变化的页面状态信息没法记录到浏览器的历史记录堆栈中，从而使得用户没法经过浏览器的前进 / 后退按钮在不一样状态页面间进行切换。

解决思路：

浏览器可以支持在用户访问过的页面间进行前进 / 后退的操做，依赖于内部维持的 history 对象。
出于安全性的考虑，浏览器并不容许 JavaScript 脚本对该对象进行增删改之类写操做，
而只是能够经过 history. back/forward() 等方法进行访问。既然在页面状态发生变化时，
没法经过脚本直接去影响浏览器的历史信息，那么只有经过 URL 的变化来触发浏览器增长一条新的历史记录。
这也就是说须要将 Ajax 应用的不一样页面状态与 URL 进行一种一对一的映射，而且可以在回退或前进到某一 URL 之时，
应用自己可以在页面无刷新的状况下跳转到正确的页面状态。如何对 Ajax 应用的初始 URL 进行改变，
而同时这种变化的切换又不会引发页面的从新加载呢？答案只有一个，那就是借助用于页面内资源片断定位目的
的“片断标识符”（fragment identifier），即 URL 中“#”符号后的字符串（hash string）。当浏览器向
服务器端请求资源时，片断标识符并不会连同 base URL 一同发往服务器端，而只是在获得服务器返回的结果
以后帮助浏览器快速定位到被相应的锚点（anchor）所标识的资源片断，即便没法找个对应的锚点，浏览器也并
不会报错。正是基于浏览器的这一特性，构建片断标识符与页面状态之间的映射关系成为了解决此类问题的基础。

• hash值

  • 将任意长度的二进制字符串经过必定的算法映射成一个固定长度的较小二进制字符串，这个字符串就是对应的hash值，主要特色就是惟一的，不可逆的。

• 前端路由的hash值(#)----->angular

  • hash一般应用在spa单页面应用中。由于经过不一样的hash值映射的url来是的浏览器添加一条不一样的url历史记录。

  • 经过浏览器的pushstate、replaceState来操做，请求不一样的浏览器记录达到请求不一样的页面的效果

  • H5中提供的两个操做hash值得API来操做hash值

  • window.location.hash读取#值

  • window.onhashchange = func 监听hash改变