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

作者 @zwhu
原文章 @github

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

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

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

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

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

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

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

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

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

我們在構(gòu)建單頁面應(yīng)用時(shí)，大部分的內(nèi)容通過 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)航生成不同的頁面內(nèi)容：

var $container = $("#container")

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

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

$("#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īng)用時(shí)候比較頭疼的地方。

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

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

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

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

$("#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)在瀏覽器的地址中。不過，瀏覽器地址變化之后，點(diǎn)擊前進(jìn)后退，頁面并不會(huì)有什么變化。我們可以通過對 window 對象綁定 popstate 方法來解決

    window.addEventListener("popstate", show);

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

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

 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īng)用就算介紹完了。理解了單頁面應(yīng)用的原理，對于最近流行的 Angular， React， Vue 之類庫或框架的才算剛剛開始。

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

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