Open felix-cao opened 5 years ago
请先阅读
《JavaScript BOM --- history 浏览历史记录对象》 #104
JavaScript BOM --- history
《BOM 对象和 DOM 对象》 #97
BOM
DOM
通过上面两篇文章，我们知道 history 的主要作用
history
DOM window 对象通过 history 对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转
DOM window
history 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
然而，在进入 HTML5 时代之前，出于 WEB 安全考虑，我们仅能使用 back()，forward()，go() 三个方法来完成在用户历史记录中向后和向前的页面跳转。
HTML5
back()
forward()
go()
但是这并不能满足很多应用场景，从 HTML5 时代开始提供了对 history 栈中内容的操作。这个主要通过新增的三个函数实现的
history.pushState(stateData, title, url)
history.replaceState(stateData, title, url)
window.onpopState
history.pushState() 和 history.replaceState() 分别表示添加和修改历史记录条目
history.pushState()
history.replaceState()
需要注意的是
window.onpopstate
history.go()
history.back()
history.forward()
pushState()\replaceState()
众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。
因此有人提出来pjax技术，一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。pjax github
后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controller获取Model数据对象，并且将Model传递给View,最后View呈现界面。
前端路由： 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。 优点：1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。2、可以再浏览器中输入指定想要访问的url路径地址。3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。 缺点：1、对SEO不是很友好2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。3，初始加载时候由于加载所有模块渲染，会慢一点。
请先阅读
《
JavaScript BOM --- history浏览历史记录对象》 #104《
BOM对象和DOM对象》 #97一、简述
通过上面两篇文章，我们知道
history的主要作用DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转history以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。然而，在进入
HTML5时代之前，出于 WEB 安全考虑，我们仅能使用back()，forward()，go()三个方法来完成在用户历史记录中向后和向前的页面跳转。但是这并不能满足很多应用场景，从
HTML5时代开始提供了对history栈中内容的操作。这个主要通过新增的三个函数实现的history.pushState(stateData, title, url)，增加历史记录history.replaceState(stateData, title, url)， 修改历史记录window.onpopState， 监听状态history.pushState()和history.replaceState()分别表示添加和修改历史记录条目需要注意的是
window.onpopstate, 当调用history.go()、history.back()、history.forward()时触发；pushState()\replaceState()方法不触发。二、应用
2.1、 ajax载入实现浏览器历史的前进与后退
众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。
因此有人提出来pjax技术，一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。pjax github
2.2、现代路由框架
后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controller获取Model数据对象，并且将Model传递给View,最后View呈现界面。
前端路由： 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。 优点：1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。2、可以再浏览器中输入指定想要访问的url路径地址。3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。 缺点：1、对SEO不是很友好2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。3，初始加载时候由于加载所有模块渲染，会慢一点。
Reference