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

作者 @zwhu
原文章 @github

知乎上有人問「比一個人吃火鍋更寂寞的是什么？」我想回答「一個人寫前后端，卻要裝成一個團隊。」

我們在前期開發的過程中，更多是一個人單打獨斗，因為是自己一個人，可以把代碼寫的很隨意，也不用注意什么工程化的東西；但作為一個有追求的程序員，不能為未來的自己挖坑，堅決走前端工程化的路線。

雖然我是一個人，但我是一個團隊。

所以這是我自己在開發過程中總結的一些知識，慢慢會寫成一個系列吧。「單頁應用」作為系列的第一篇。

對于單頁應用我的定義是：在瀏覽器地址欄輸入地址之后，服務器獲取到HTML文檔，之后所有頁面的呈現都在這份HTML文檔之上進行。

因為這是流行啊。即使我司對性能啥的完全沒有任何要求，我還是強行用了單頁應用，自己不努力，沒人幫我學。具體有什么好處還是壞處，如果自己沒寫過單頁應用，即使別人說一大堆好處壞處你也還是不懂。（這是吐槽，不用理會）

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

假設我們在瀏覽器輸入 http://xxxx.com 的時候，服務端會返回 index.html 文檔如下:

這里插一句為什么把 script 標簽放到最后？瀏覽器在渲染的時候會被 script 標簽阻塞，影響頁面的首次渲染。可能會因為 JavaScript 文件過大，等待加載時間過長（如果是外部引入），頁面一直是空白。

我們在構建單頁面應用時，大部分的內容通過 JavaScript 生成。在 app.js 中，我們會生成一個導航:

var $nav = $("#nav")

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

var sUl = "
" + sLi + "
";

$nav.html(sUl);
 

生成如下圖的導航條

之后我們想根據導航生成不同的頁面內容：

var $container = $("#container")

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

然而現實中，我們的頁面多數是根據后端返回的數據來渲染，例如我們的后端提供了一個接口 /api/home， 通過這個接口可以獲得數據 ["今", "天", "天", "氣", "不", "錯", "啊"]，當我們進入 home 頁面的時候頁面上會結合通過 api 接口獲取來的數據展示新的頁面：

$("#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 + "區域哦")
  }
  return false;
})

這是我剛接觸單頁應用時候比較頭疼的地方。

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

通過 Ajax 可以獲取服務器的數據然后再渲染到頁面上，這個方法雖然交互很友好，不需要重新刷新頁面就可以看到新的內容；但是有一點不好，那就是當點擊導航后，瀏覽器地址欄的鏈接不會有變化，用戶完全不知道現在在哪個頁面。

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

還好我們有 HTML5 的 History Api 來解決這個問題，當然低版本的IE瀏覽器也可以通過 location.hash 的方法實現，hash 來解決的方法不在這里深究了。畢竟低版本瀏覽器已經沒必要支持了。

$("#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 + "區域哦")
  }
}

在點擊導航之后，會將當前的路由體現在瀏覽器的地址中。不過，瀏覽器地址變化之后，點擊前進后退，頁面并不會有什么變化。我們可以通過對 window 對象綁定 popstate 方法來解決

    window.addEventListener("popstate", show);

傳統的網站，用戶通常輸入具體 url 來進入相關頁面，例如：我們進入 GitHub 自己的主頁是輸入的是 github.com/user；但是單頁面應用，我們的頁面都是在一個空的 html文檔中通過 JavaScript 生成的頁面，所以服務器不能通過url來返回具體的頁面（其實是可以的，同構，不在這里展開），那么應該怎么做呢？

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

 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 + "區域哦")
  }
}

// 初始化的時候就調用
show()

到此為止，單頁面的應用就算介紹完了。理解了單頁面應用的原理，對于最近流行的 Angular， React， Vue 之類庫或框架的才算剛剛開始。

如果覺得本文對你有幫助的話，就點個推薦唄。

下一篇我會介紹 一個人的團隊（二）--- 神兵利器之 webpack 和 webpack-dev-server