【单页应用巨坑之History】细数History带给单页应用的噩梦

在我们日常的网页浏览中，我们非常喜欢做一个操作：点击浏览器的前进后退
在Ajax技术出现后，有些时候前进后退就会给开发者带来困扰，甚至一些开发者试图去干掉History
随着Html5的发展，移动端的兴旺，单页应用出现了，于是History的处理被不得不提上议程了！
要知道，这一直是一项让人不愿意去碰的巨坑，但是单页应用却不得不去解决

首先History的处理逻辑看似简单，实则复杂，稍不注意就会出问题，我们这里来探讨下单页中History的处理规则

基础知识

javascript中History的历史对象包含用户已经浏览的URL信息，这就是我们传说中的历史记录
我们一般会用到forward/back两个方法与一个length接口，或者使用go具体到哪一层

后面一点，浏览器厂商发现History对象确实被管的过紧，于是又释放了两个关键接口，pushState以及replaceState，用于操作History对象

【单页应用巨坑之History】细数History带给单页应用的噩梦

于是我们今天的一个重点便是这里的pushState以及replaceState，这两位同学可以向History中压入对象，并且在浏览器前进后退时会被触发

pushState

pushState会往History中写入一个对象，他造成的结果便是
① History length +1
② url 改变
③ 该索引History对应有一个State对象

这个时候若是点击浏览器的后退，便会触发popstate事件，将刚刚的存入数据对象读出，这里举一个简单例子

<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <title></title>
  <style type="text/css">
    div { margin: 10px; }
    .msgBtn { margin: 10px; padding: 10px; border: 1px solid black; }
  </style>
    <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
</head>
<body>
  <div id="msg">
    消息框</div>
    <br><br>
  <span class="msgBtn">去第一页</span> <span class="msgBtn">去第二页</span> <span class="msgBtn">去第三页</span>
  <script src="../../jquery-1.7.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    var _loc = location.href;

    function showMsg(el, msg) {
      el.html(msg);
    }

    window.addEventListener('popstate', function (e) {
      if (!e.state) return;
      showMsg($('#msg'), e.state);
    });

    $('.msgBtn').click(function (e) {
      var msg = $(e.target).html();
      showMsg($('#msg'), msg);
      history.pushState(msg, msg, _loc + '/' + msg);
    });

  </script>



        <style></style>
                <script></script>
    
<!-- Generated by RunJS (Wed May 07 18:05:27 CST 2014) 1ms --></body></html>

View Code