摘要：部分比較重要部分比較重要重點(diǎn)是下面的，這里操作我們借助實(shí)現(xiàn)的邏輯不難，但是利用總是沒有所謂前端路由的那種味，必然也不是主流方法。而現(xiàn)在的前端路由也是基于這個(gè)原理實(shí)現(xiàn)的。和異曲同工，而且前者可以在該事件之外任何地方隨時(shí)使用。

通常 SPA 中前端路由有2中實(shí)現(xiàn)方式，本文會(huì)簡(jiǎn)單快速總結(jié)這兩種方法及其實(shí)現(xiàn)：

修改 url 中 Hash

利用 H5 中的 history

我們都知道 url 中可以帶有一個(gè) hash， 比如下面 url 中的 page2

https://www.abc.com/index.html#page2

window 對(duì)象中有一個(gè)事件是 onhashchange，以下幾種情況都會(huì)觸發(fā)這個(gè)事件：

直接更改瀏覽器地址，在最后面增加或改變#hash；

通過(guò)改變location.href或location.hash的值；

通過(guò)觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接；

4）瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化，前提是兩個(gè)網(wǎng)頁(yè)地址中的hash值不同。

這個(gè)事件有 2 個(gè)重要的屬性：oldURL 和 newURL，分別表示點(diǎn)擊前后的 url

click me

這樣我們可以這樣建立一個(gè) DOM

  
  

    

      
This is index page
    
    

      
This is info page
    
    

      
This is detail page
    
    

      
This is show page
    
    

      
This is contact page
    
  

為了好看我們加上 css， 比較重要的樣式已經(jīng)在代碼里標(biāo)出來(lái)了。

body{
  padding:0;
  margin: 0;
}
h1{
  margin: 0 0 0 160px;
}
nav{
  width: 150px;
  height: 150px;
  float: left;
}
nav a{
  display: block;
  background: #888;
  border: 1px solid #fff;
  border-top: none;
  width: 150px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #333;
  text-decoration: none;
}
.container{
  height: 154px;
}
/* page 部分比較重要*/
.page{
  display: none;
}
.page.active{
  display: block;
}
/* page 部分比較重要*/
nav a.active, .container{
  background: #ffffd;
  border-right-color: #ffffd;
}

重點(diǎn)是下面的 javascript，這里 DOM 操作我們借助 jQuery

  var containers = $(".container");
  var links = $(".item");

  window.onhashchange = function(e){
    var currLink = $("[href=""+ location.hash + ""]").eq(0);
    var target = currLink.attr("data-target");

    currLink.addClass("active").siblings("a.item").removeClass("active");
    $(target).addClass("active").siblings(".page").removeClass("active");
  }

實(shí)現(xiàn)的邏輯不難，但是利用 hash 總是沒有所謂前端路由的那種味，必然也不是主流方法。同樣的效果如果需求簡(jiǎn)單不考慮兼容性的話，利用 css3 中 target 偽類就可以實(shí)現(xiàn)，這不是本文的重點(diǎn)，這里就不展開了。

作為一種主流方法，我們下面看看 history 如何實(shí)現(xiàn)。

history 其實(shí)瀏覽器歷史棧的一個(gè)借口，去過(guò)只有 back(), forward(), 和 go() 方法實(shí)現(xiàn)堆棧跳轉(zhuǎn)。到了 HTML5 ， 提出了 pushState() 方法和 replaceState() 方法，這兩個(gè)方法可以用來(lái)向歷史棧中添加數(shù)據(jù)，就好像 url 變化了一樣（過(guò)去只有 url 變化歷史棧才會(huì)變化），這樣就可以很好的模擬瀏覽歷史和前進(jìn)后退了。而現(xiàn)在的前端路由也是基于這個(gè)原理實(shí)現(xiàn)的。

這里我們先簡(jiǎn)單認(rèn)識(shí)一下 history：

go(n) 方法接受一個(gè)整數(shù)參數(shù)， n大于0會(huì)發(fā)生前進(jìn) n 個(gè)歷史棧頁(yè)面; n小于0會(huì)后退 -n 個(gè)歷史棧頁(yè)面；

forward() 前進(jìn)一個(gè)頁(yè)面

back() 后退一個(gè)頁(yè)面

以上三個(gè)方法會(huì)靜默失敗

pushSate(dataObj, title, url) 方法向歷史棧中寫入數(shù)據(jù)，其第一個(gè)參數(shù)是要寫入的數(shù)據(jù)對(duì)象（不大于640kB)，第二個(gè)參數(shù)是頁(yè)面的 title, 第三個(gè)參數(shù)是 url (相對(duì)路徑)。這里需要說(shuō)明的有3點(diǎn)：

當(dāng) pushState 執(zhí)行一個(gè)瀏覽器的 url 會(huì)發(fā)生變化，而頁(yè)面不會(huì)刷新，只有當(dāng)觸發(fā)的前進(jìn)后退等事件瀏覽器才會(huì)刷新；

這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網(wǎng)站 url 用來(lái)欺騙用戶。所以當(dāng)違背同源策略時(shí)將會(huì)報(bào)錯(cuò);

火狐目前會(huì)忽略 title 參數(shù)

replaceState(dataObj, title, url) 這個(gè)和上一個(gè)的區(qū)別就在于它不是寫入而是替換棧頂記錄，其余和 pushState 一模一樣

History 還有1個(gè)靜態(tài)只讀屬性：

History.length：當(dāng)然歷史堆棧長(zhǎng)度

還有的都是已經(jīng)廢除的老古董了，這里就不提了

了解了這么多，那么可以研究一下如何利用 history 實(shí)現(xiàn)一個(gè)前端路由了，這里只考慮 javascript 部分，css 部分和上文一致。這里我們修改部分 html:

page1
page2
page3
paga4-1
paga4-2

我們修改了 a 標(biāo)簽的 href，這樣的鏈接看上去才不是錨點(diǎn)了，不過(guò)這個(gè)過(guò)程我們要處理比較多的工作。首先為了簡(jiǎn)單一些，我們的這里僅僅對(duì) .html 或沒有擴(kuò)展名結(jié)尾的鏈接設(shè)置前端路由：

// 通過(guò)委托的方法組織默認(rèn)事件
var routerRxp = /.html$|/[^.]*$|/;
$(document).click(function(e){
  var href = e.target.getAttribute("href");
  if(href && routrRxp.test(href)){
    e.preventDefault();
  }
});

而后我們?cè)邳c(diǎn)擊時(shí)把數(shù)據(jù)寫入歷史棧，并控制 class 效果：

$(document).click(function(e){
  var href = e.target.getAttribute("href");

  if(href && routerRxp.test(href)){
    var id = e.target.getAttribute("data-target");
    history.pushState({targetId: id}, "History demo", href);
    $(id).addClass("active").siblings(".page").removeClass("active");
    e.preventDefault();
  }
});

到這里，鏈接就可以點(diǎn)擊了，但是瀏覽器的前進(jìn)后退還不能用，我們加入 onpopstate 事件：

$(window).on("popstate",function(e){
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

這樣前進(jìn)后退就可以用了，但是我們發(fā)現(xiàn)這樣并不能退回主頁(yè)，因?yàn)槲覀兊闹黜?yè)默認(rèn)就是 page1 標(biāo)簽頁(yè)，所以沒有為主頁(yè)添加 state，簡(jiǎn)單處理就讓其自己刷新好啦：

var indexPage = location.href;
$(window).on("popstate",function(e){
  if(location.href === indexPage){
    location.reload();
  }
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

注意，這里不能使用重置 location.href 的方法刷新，那樣就不能再前進(jìn)了。

下面附上 history 方法的完整 js 代碼

var indexPage = location.href;
  var routerRxp = /.html$|/[^.]*$|/;
  $(document).click(function(e){
    var href = e.target.getAttribute("href");

    if(href && routerRxp.test(href)){
      var id = e.target.getAttribute("data-target");
      history.pushState({targetId: id}, "History demo", href);
      $(id).addClass("active").siblings(".page").removeClass("active");
      e.preventDefault();
    }
  });

$(window).on("popstate",function(e){
  if(location.href === indexPage){
    location.reload();
  }
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

最后，關(guān)于兩種方法有一些比較重要的特性總結(jié)一下：

有的文章提到“Firfox，Chrome在頁(yè)面首次打開時(shí)都不會(huì)觸發(fā)popstate事件，但是safari會(huì)觸發(fā)該事件”，經(jīng)實(shí)測(cè)現(xiàn)在的 safari 不存在這個(gè)問(wèn)題。

Mozilla指出，在 popstate 事件中，e.originalEvent.state 屬性是存在硬盤里的，觸發(fā)該事件后讀取的歷史棧信息是通過(guò) pushState 或 replaceState 寫入的才會(huì)有值，否則改屬性為 null。

history.state 和 e.originalEvent.state 異曲同工，而且前者可以在該事件之外任何地方隨時(shí)使用。

由于 pushSate, onpopstate 屬于 H5 的部分，存在一定兼容問(wèn)題，可以使用 History.js (Github) 的 polyfill 解決這個(gè)問(wèn)題。