Hashbang與PushState的比較

網頁的前端工程，在2013年代的熱門程度已經是不爭的事實了，事實上，在這個網站上，你可以看到很多前端工程手工鑿作出來的痕跡，不信你按右鍵看一下網頁原始碼就會略知一二。

在這樣的浪潮下，為了追求更高的使用者操作體驗，AJAX已經變成是網站在實作時，不得不面對的技巧了。但是如果考量到搜尋引擎最佳化（Search Engine Optimization, SEO）後，你就會發現AJAX根本就是致命傷。有鑑於此，搜尋引擎龍頭Google在一篇「Making AJAX Applications Crawlable」文中提出，利用HashBang的實作，可以有效的讓Google把你AJAX後的新內容截取走。

但HashBang的實作並不是那麼的盡如人意，除了他對使用者在觀看網址上並不是那麼友善之外，另外一點就是它在跨瀏覽器上的支援度並不是那麼的好，像IE瀏覽器就不會自動在新增Hash變更之時，自動幫你push記錄到下一頁的資訊，讓使用者可以透過上／下頁的切換，就可以回去之前的HashBang狀態。尤其是IE8以下並不支援OnHashChange()事件的建立，使得你必須又要再設計一個輪詢的方式來達成跨瀏覽器的功能。下列就是一個很典型的HashBang Update實作：（說真的，實在是蠻蠢的。）

var cPreviousUrl;

$(document).ready(function(){
  cPreviousUrl = window.location.hash;
  if("onhashchange" in window){
    window.onhashchange = updateAjaxInformation;
  }else{
    setInterval(oldBrowserOnHashChange, 500);
  }
});

function oldBrowserOnHashChange() {
  if(cPreviousUrl != window.location.hash){
    cPreviousUrl = window.location.hash;
    updateAjaxInformation();
  }
}

function updateAjaxInformation() {
  //Do something here ...
}

到了HTML5時代，推出了Histroy API讓AJAX的SEO問題，一切都變的不同了，這種方法業界統稱為PushState，這種方法完全的解決掉HashBang的一些缺陷。Google當然又出了一篇文章，叫大家可以轉換設計到PushState了！詳見下面影片：

PushState範例程式可以參考下方：

$(document).ready(function(){
  window.onpopstate = updateAjaxInformation;
});

function updateAjaxInformation() {
  //Do something here ...
}

$(document).ready(function(){
  history.pushState({webPage: 1}, "Employee-1", "?id=1");
  history.replaceState({webPage: 2}, "Employee-2", "?id=2");
});

但是，有一好沒兩好，前端工程師總是命苦的，PushState要到IE10才有支援，以目前2013推出Windows 8.1的冷門程度狀態來看，相信有很多Windows 7的使用者還是沒更新停留在IE9吧，所以苦命的工程師如果不想被老闆或使用者罵，我認為此時最佳解還是HashBang。

※ 註：網路上有套件可以一次性解決相容問題，但我沒有用過，有興趣的人可以試看看！可以試著Google：History.js

Hashbang與PushState的比較

HashBang PushState HTML5 HistoryAPI