详解H5中的history单页面，手动实现单页面开发，细说h5单页面原理

就目前来看，前端的单页面开发占了很大一部分，一方面无刷新的切换增强了体验，并且浏览器记录依然存在，前进后退都没问题，在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用，但是#的形式总是令人不爽，幸好h5新增了history.pushState与history.replaceState。

1.介绍API

history.pushState(data, title [, url])：

往历史记录堆栈顶部添加一条记录； data会在onpopstate事件触发时作为参数传递过去，title为页面标题，当前所有浏览器都会 忽略此参数（我们在自己实现的时候可以随便填写），url为页面地址，就是如果history.pushState({name:'home'},'home page' ,'home')则地址栏就成了/home，更神奇的是此时不会向后端发送请求，仅仅是url改变。

history.replaceState(data, title [, url]) ：

更改当前的历史记录，参数跟history.pushState(data, title [, url])一致，只不过不会像浏览器历史栈添加数据，而是替代之前的历史记录；

history.state：用于存储以上方法的data数据，

window.onpopstate：响应pushState或replaceState的调用；

2.介绍实现单页面原理

通过以上几个方法我们完全可以改变url并且监听到url的变化，比如url由localhost:8000改变成localhost:8000/home，此时我们通过onpopstate监听到了这个变化，并且拿到data数据，假设拿到了name，此时假设有以下对应路由表，其实可以随便定义,

let route = {
    home:{
        name:'home',
        url:'./home.html',
        des:'home page'
    },
     class:{
         name:'class',
         url:'./class.html',
         des:'class page'
      }
}

　　那我们就知道此时home对应应该是./home.html，于是我们利用ajax将./home.html加载过来，此时我们拿到了home.html的所有信息，于是跟vue或者其他框架一样挂载到当前页面的一个元素上。

注意点：

我们主动 利用history.pushState({name:'home'},'home page' ,'home')时候并不会触发onpopstate，就是说此时是无法知道url变动了，为了让页面顺利跳转又触发我们提供的ajax，那么我们就要修改一下history.pushState

var pushState = history.pushState;   // 存储原生 replaceState
history.pushState = function(state, param) {     // 改写 replaceState
        var urlName = arguments[2];
        var url = route[urlName].url;
        ajax(url)
        return pushState.apply(history, arguments);    // 调用原生的 replaceState
 };

　　如上，我们不仅在使用 history.pushState时候，触发我们自己定义的ajax函数，加载了页面，又调用了原生的方法，是不会影响原生历史记录和跳转等问题。

现在我们知道我们每次调用history.pushState都会触发ajax函数

<div id="app"></div>

    <script>
        function ajax(url){
            //步骤一:创建异步对象
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get',url);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {
                if (ajax.readyState==4 &&ajax.status==200) {
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
            　　　　 //输入相应的内容
                    document.querySelector('#app').innerHTML = ajax.responseText
            　　}
            }
        }
    <script>

　　利用这个ajax就可以将别的页面的内容加载到本页面的#app这个元素上，实现了单页面跳转。

3.需要注意的地方和坑：

1.在尝试该方法前，需要其启动服务器代理html文件，即静态的html文件打开会报错

2.我们在通过history.pushState改变url浏览器并不会跟处理普通url一样新发送请求，但是我们在刷新的时候浏览器还是会发送请求，即localhost:8000/home刷新浏览器就会请求这个接口，就会导致后台根本没有这个路由返回404，（这也是vue-route经常会出现刷新404问题的原因）解决办法就是遇到404的都代理给index.html，我测试使用express来起服务的，有一个插件叫 connect-history-api-fallback，使用之后就不会出现这个问题。

如果有想要自己尝试的，这里附上我们demo：https://github.com/jiangzhenfei/h5History，下载还只要执行node server.js即可，打开浏览器就可以尝试了。