關於history.js的使用

     項目地址： https://github.com/browserstate/history.js

     做wap端的時候，有些時候一個頁面里有很多小頁面或者標簽，希望刷新瀏覽器或者按返回鍵的時候，能夠被當成一個頁面去處理。所以就去找html5是否提供這樣的接口。

最后發現確實有這個接口，但兼容性 不好。

      后來發現這個插件 history.js,可以兼容各大瀏覽器。 html4是使用Hash值進行兼容。所以在獲取url 問好后面的值時，需要判斷是否是兼容模式。

      js中如果是hash兼容模式 window.location.hash 這個值是不為空，如果不是hash兼容模式 window.location.hash值為空。

history.js 提供的demo也很簡單

(function(window,undefined){
  // Bind to StateChange Event
  History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
  });
  // Change our States
  History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
  History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
  History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
  History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
  History.back(); // logs {state:3}, "State 3", "?state=3"
  History.back(); // logs {state:1}, "State 1", "?state=1"
  History.back(); // logs {}, "Home Page", "?"
  History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);

　　初次看，壓根沒看懂是如何使用的。。。。

      經過實踐,特來解釋下上邊的代碼

//History主要改變的問號后面的鍵值。。
//這個是向瀏覽歷史壓入一條新紀錄
//記錄為當前url且問號后面的值為 state=1,
//將一個{state:1}對象壓入該鏈接中,供下面的歷史事件觸發時調用，
//State 1 為其新的標題 (即head title);
//這個動作會觸發下面statechange 事件
History.pushState({state:1}, "State 1", "?state=1");

//改變當前url問好后面的值
//不觸發statechange事件
//不增加歷史記錄
History.replaceState({state:3}, "State 3", "?state=3");


//前提是通過History.pushState 增加的歷史記錄。
// 向前跳或者向后跳都會出發這個事件，刷新不會
//State對象中的data就是 上面存入的對象 {state:3}
History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); instead of event.state
});

所以無論是將一條url壓入歷史中、返回上一頁、向前跳一頁等等（不包括刷新和原來的歷史記錄），都會觸發statechange事件。 剩下的自己發揮。

原先我不知道壓入的時候會觸發，后面調試的時候才發現，也會。 這是個坑。。。