摘要：作者原文章知乎上有人問(wèn)比一個(gè)人吃火鍋更寂寞的是什么我想回答一個(gè)人寫(xiě)前后端，卻要裝成一個(gè)團(tuán)隊(duì)。預(yù)告下一篇我會(huì)介紹一個(gè)人的團(tuán)隊(duì)二神兵利器之和

作者 @zwhu
原文章 @github

知乎上有人問(wèn)「比一個(gè)人吃火鍋更寂寞的是什么？」我想回答「一個(gè)人寫(xiě)前后端，卻要裝成一個(gè)團(tuán)隊(duì)?！?/p>

我們?cè)谇捌陂_(kāi)發(fā)的過(guò)程中，更多是一個(gè)人單打獨(dú)斗，因?yàn)槭亲约阂粋€(gè)人，可以把代碼寫(xiě)的很隨意，也不用注意什么工程化的東西；但作為一個(gè)有追求的程序員，不能為未來(lái)的自己挖坑，堅(jiān)決走前端工程化的路線。

雖然我是一個(gè)人，但我是一個(gè)團(tuán)隊(duì)。

所以這是我自己在開(kāi)發(fā)過(guò)程中總結(jié)的一些知識(shí)，慢慢會(huì)寫(xiě)成一個(gè)系列吧。「單頁(yè)應(yīng)用」作為系列的第一篇。

對(duì)于單頁(yè)應(yīng)用我的定義是：在瀏覽器地址欄輸入地址之后，服務(wù)器獲取到HTML文檔，之后所有頁(yè)面的呈現(xiàn)都在這份HTML文檔之上進(jìn)行。

因?yàn)檫@是流行啊。即使我司對(duì)性能啥的完全沒(méi)有任何要求，我還是強(qiáng)行用了單頁(yè)應(yīng)用，自己不努力，沒(méi)人幫我學(xué)。具體有什么好處還是壞處，如果自己沒(méi)寫(xiě)過(guò)單頁(yè)應(yīng)用，即使別人說(shuō)一大堆好處壞處你也還是不懂。（這是吐槽，不用理會(huì)）

在瀏覽器地址欄輸入地址之后，會(huì)從服務(wù)器端下載HTML文檔并開(kāi)始渲染。（這個(gè)誰(shuí)能看懂，誰(shuí)看吧，反正我看不懂）在渲染的過(guò)程中，解析 script 標(biāo)簽，外部引入的話，就發(fā)起請(qǐng)求獲取 JavaScript 文件。
頁(yè)面渲染完成，之后所有網(wǎng)站的內(nèi)容都會(huì)在這個(gè)頁(yè)面上呈現(xiàn)，所有的操作也只會(huì)在這個(gè)頁(yè)面進(jìn)行。

假設(shè)我們?cè)跒g覽器輸入 http://xxxx.com 的時(shí)候，服務(wù)端會(huì)返回 index.html 文檔如下:

這里插一句為什么把 script 標(biāo)簽放到最后？瀏覽器在渲染的時(shí)候會(huì)被 script 標(biāo)簽阻塞，影響頁(yè)面的首次渲染。可能會(huì)因?yàn)?JavaScript 文件過(guò)大，等待加載時(shí)間過(guò)長(zhǎng)（如果是外部引入），頁(yè)面一直是空白。

我們?cè)跇?gòu)建單頁(yè)面應(yīng)用時(shí)，大部分的內(nèi)容通過(guò) JavaScript 生成。在 app.js 中，我們會(huì)生成一個(gè)導(dǎo)航:

var $nav = $("#nav")

var sLi = ["home","about","article","history"].reduce(function(pre, n) {
    return pre + "
" + n + "
";
}, "");

var sUl = "
" + sLi + "
";

$nav.html(sUl);
 

生成如下圖的導(dǎo)航條

之后我們想根據(jù)導(dǎo)航生成不同的頁(yè)面內(nèi)容：

var $container = $("#container")

$("#nav ul li").on("click", function() {
  $container.html("這是" + $(this).find("a").text() + "區(qū)域哦")
  return false;
})

然而現(xiàn)實(shí)中，我們的頁(yè)面多數(shù)是根據(jù)后端返回的數(shù)據(jù)來(lái)渲染，例如我們的后端提供了一個(gè)接口 /api/home， 通過(guò)這個(gè)接口可以獲得數(shù)據(jù) ["今", "天", "天", "氣", "不", "錯(cuò)", "啊"]，當(dāng)我們進(jìn)入 home 頁(yè)面的時(shí)候頁(yè)面上會(huì)結(jié)合通過(guò) api 接口獲取來(lái)的數(shù)據(jù)展示新的頁(yè)面：

$("#nav ul li").on("click", function() {
  var route = $(this).find("a").text()
  if("home" === route) {
    $.get("/api/home", function(data) {
      $container.html(data.join("") + "!")
    })
  } else {
    $container.html("這是" + route + "區(qū)域哦")
  }
  return false;
})

這是我剛接觸單頁(yè)應(yīng)用時(shí)候比較頭疼的地方。

沒(méi)有路由，我就不知道你在哪兒。 --- by 我要某上頭條君

通過(guò) Ajax 可以獲取服務(wù)器的數(shù)據(jù)然后再渲染到頁(yè)面上，這個(gè)方法雖然交互很友好，不需要重新刷新頁(yè)面就可以看到新的內(nèi)容；但是有一點(diǎn)不好，那就是當(dāng)點(diǎn)擊導(dǎo)航后，瀏覽器地址欄的鏈接不會(huì)有變化，用戶(hù)完全不知道現(xiàn)在在哪個(gè)頁(yè)面。

不過(guò)這里有個(gè)知識(shí)點(diǎn)是需要大家理解的，當(dāng)我們?cè)跒g覽器地址欄輸入地址或者通過(guò)其他頁(yè)面的外鏈跳轉(zhuǎn)到這個(gè)頁(yè)面時(shí)，整個(gè)頁(yè)面都會(huì)刷新一遍，從服務(wù)器獲取 HTML 文檔渲染。在 JavaScript 中，可以通過(guò) location.href 修改地址，但是這個(gè)方法和瀏覽器輸入地址的效果是相同的，那有沒(méi)有辦法只修改瀏覽器的地址欄，而不刷新整個(gè)頁(yè)面呢？

還好我們有 HTML5 的 History Api 來(lái)解決這個(gè)問(wèn)題，當(dāng)然低版本的IE瀏覽器也可以通過(guò) location.hash 的方法實(shí)現(xiàn)，hash 來(lái)解決的方法不在這里深究了。畢竟低版本瀏覽器已經(jīng)沒(méi)必要支持了。

$("#nav ul li").on("click", function() {
  var route = $(this).find("a").text()
  history.pushState({ title: route }, route, route)
  show()
  return false;
})

function show() {
  var route = window.location.pathname
  if("/home" === route) {
    $.get("/api/home", function(data) {
      $container.html(data.join("") + "!")
    })
  } else {
    $container.html("這是" + route + "區(qū)域哦")
  }
}

在點(diǎn)擊導(dǎo)航之后，會(huì)將當(dāng)前的路由體現(xiàn)在瀏覽器的地址中。不過(guò)，瀏覽器地址變化之后，點(diǎn)擊前進(jìn)后退，頁(yè)面并不會(huì)有什么變化。我們可以通過(guò)對(duì) window 對(duì)象綁定 popstate 方法來(lái)解決

    window.addEventListener("popstate", show);

傳統(tǒng)的網(wǎng)站，用戶(hù)通常輸入具體 url 來(lái)進(jìn)入相關(guān)頁(yè)面，例如：我們進(jìn)入 GitHub 自己的主頁(yè)是輸入的是 github.com/user；但是單頁(yè)面應(yīng)用，我們的頁(yè)面都是在一個(gè)空的 html文檔中通過(guò) JavaScript 生成的頁(yè)面，所以服務(wù)器不能通過(guò)url來(lái)返回具體的頁(yè)面（其實(shí)是可以的，同構(gòu)，不在這里展開(kāi)），那么應(yīng)該怎么做呢？

對(duì)于服務(wù)器來(lái)說(shuō)，不用管那么多，當(dāng)用戶(hù)輸入 url 之后，只要 url 符合一定的規(guī)則(例如：請(qǐng)求頭的 accept 是 "text/html" 或者所有非 /api/ 開(kāi)頭的 url 等)，都返回默認(rèn)的 index.html。JavaScript 可以通過(guò)當(dāng)前的路由來(lái)渲染：

 function show() {
  var route = window.location.pathname
  if("/home" === route) {
    $.get("/api/home", function(data) {
      $container.html(data.join("") + "!")
    })
  } else if("/" !== route) {
    $container.html("這是" + route + "區(qū)域哦")
  }
}

// 初始化的時(shí)候就調(diào)用
show()

到此為止，單頁(yè)面的應(yīng)用就算介紹完了。理解了單頁(yè)面應(yīng)用的原理，對(duì)于最近流行的 Angular， React， Vue 之類(lèi)庫(kù)或框架的才算剛剛開(kāi)始。

如果覺(jué)得本文對(duì)你有幫助的話，就點(diǎn)個(gè)推薦唄。

下一篇我會(huì)介紹 一個(gè)人的團(tuán)隊(duì)（二）--- 神兵利器之 webpack 和 webpack-dev-server