初識 HTTP/2（二）

Ben發表於2017-01-13
HTTP

HTTP/2 時代的開啟為前端開發帶來了最佳體驗。

如果你對 HTTP/2 有所瞭解，那你可能用過它，或者至少想過怎樣能把它融入你的專案中。儘管有很多關於它如何改變工作流程，提高 Web 速度和效率等方面的猜想，但最佳使用方式還沒有定下來。這裡我想講的就是我在之前的專案中所發現的 HTTP/2 的最佳實踐。

如果你還不確定什麼是 HTTP/2，或者為什麼它能改進你的工作，可以先看看我介紹背景方面的第一篇文章。

記住：開始之前，我要告訴你，儘管你的瀏覽器可能支援 HTTP/2，但你的伺服器可能不支援。檢查你的主機託管服務，看看他們是否提供 HTTP/2 的支援。否則你可能要建立你自己的伺服器。這篇文章並不會涉及這方面該如何做，但你可以檢視 http2 github 頁面，找一找這方面的工具。 

熱身工作

首先組織好你的檔案。看一看下面的檔案樹結構，作為組織你的樣式表的起點：

/styles
|── /setup
|     /* 變數、混入（minin）和函式 */
|── /global
|     /* 能放在任何元件和部分中的可重用元件 */
|── /components
|     /* 特殊元件和部分 */
|── setup.scss // setup 樣式索引
|── global.scss // 全域性樣式索引

這會把你的樣式分到三個目錄下面：setup、global 和 componenets。接下來我會說明這些目錄對你的專案有什麼用。 

setup 目錄

setup 目錄儲存所有的變數、函式、混入（minin）以及一些正常編譯需要的其它檔案的定義。要想讓這個目錄物盡其用，把這個目錄下所有內容匯入到 setup.scss 檔案中是個很不錯的主意，這樣這個檔案就會像下面所展示的一樣：

/* setup.scss */

/* 變數 */
@import "setup/variables/colors";

/* 混入 */
@import "setup/mixins/color";

/* 函式 */
@import "setup/functions/color";

... 等等

現在我們能快速引用這個站點中的所有定義，應該確保在所有的樣式檔案頂部包含我們這裡建立的這個檔案。

global 目錄

接下來的目錄，global 目錄，應該包含可在當前站點的多個部分或者每一個頁面中重複使用的元件。像按鈕、文字、主要樣式，以及你的瀏覽器預設設定應該放在這裡。我不建議把頁面的頭部或底部樣式放在這兒，因為某些專案中沒有頭部，或者不同頁面頭部不同。而且，底部永遠是頁面的最後一個元素，所以在使用者載入完當前站點的其它東西前，不必過分優先考慮載入底部樣式。

記住，如果沒有那些定義在 setup 目錄下的東西，你的 global 樣式就可能沒有作用，你的 global 檔案看起來應該像這樣：

/* global.scss */

/* 應用定義 */
@import "setup";

/* 全域性樣式 */
@import "global/reset";
@import "global/buttons";
@import "global/typography";
@import "global/grid";

... 等等

注意，首先要做的就是匯入 setup 樣式。這樣的話，之後的檔案都可以引用這個樣式裡的定義。

由於站點內的每個頁面都需要 global 樣式，我們可以用典型的方式，在 <head> 標籤內用一個 <link> 標籤來載入它們。你所看到的將是一個十分小巧的 css 檔案，或者說理論上小巧的，這取決於你需要多少全域性樣式。

最後，你的元件

注意，我沒有在上述目錄樹中的 components 目錄裡包含索引檔案。這是 HTTP/2 所帶來的效用。直到現在，我們已經按照標準步驟構建了一個典型的站點，保持相當簡單的結構，僅選擇全域性化那些最重要的樣式。元件充當它們自己的索引檔案。

大多數開發者有獨特的組織元件的方式，因此我並不想影響你的策略。但是，你所有的元件看起來應該像這樣：

/* header.scss */

/* 應用定義 */
@import "../setup";

header {
  // 樣式
}

... 等等

同樣的，你要把 setup 樣式包含進來，確保所有東西在編譯時都定義過。除了編譯這些檔案，以及可能要把他們放到 /assets 目錄，以便很容易找到模版，對這些檔案你不必 拼接concatenate、壓縮minify 它們或者改變什麼。

現在樣式表已經差不多了，構建站點應該很簡單。

構建元件

或許對於模板語言你有自己的選擇，這取決於你的專案，有可能是 Twig、Rails、Jade 或者 Handlebars。我認為考慮元件最好的方式是它是否有自己的模版檔案，它該有個與名字相應的樣式。這樣你的專案中，模版和樣式的比例就會是個不錯的 1:1 的比例，而且你知道哪個檔案有哪些東西，哪裡有哪個檔案，因為它們的命名是有規律的。

現在它正步入正軌，用好 HTTP/2 的多種功能十分簡單，讓我們做一個模版：

{# header.html #}

{# compiled header styles #}
<link href="assets/components/header.css" rel="stylesheet" media="all">

<header>
  <h1>This Awesome HTTP/2 Site</h1>
  ... 等等

非常好！在模版裡你可能有更簡單的方式連結到資源，但這裡顯示你所要做的僅是在開始構建時，在模版檔案中連結一個小小的頭部樣式。這將允許你的站點僅僅載入特定資源到任意給定頁面的元件中，而且，能夠設定頁面從頭到腳的元件的優先順序。

結合在一起

現在所有的元件都有結構，瀏覽器將會類似以下方式來渲染它們：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" media="all" href="/assets/global.css">
  </head>
  <body>

    <link rel="stylesheet" media="all" href="/assets/components/header.css">
    <header>
      ... etc
    </header>

    <link rel="stylesheet" media="all" href="/assets/components/title.css">
    <section class="title">
      ... etc
    </section>

    <link rel="stylesheet" media="all" href="/assets/components/image-component.css">
    <section class="image-component">
      ... etc
    </section>

    <link rel="stylesheet" media="all" href="/assets/components/text-component.css">
    <section class="text-component">
      ... etc
    </section>

    <link rel="stylesheet" media="all" href="/assets/components/footer.css">
    <footer>
      ... etc
    </footer>

  </body>
</html>

這是一個高階別方法，但你的專案中可能有調整的更細緻的元件。例如，在頭部的 <nav> 元件可能要載入自己的樣式表。盡你所能地自由發揮，讓元件更有作用 - HTTP/2 不會因這些需求而阻礙你！

結論

這只是一個關於如何在前端用 HTTP/2 構建專案的基本介紹，僅是皮毛而已。你可能注意到我上面所用的方法有的還有改進的空間。請不吝賜教！正如我在第一篇文章中所說的，HTTP/2 可能顛覆自 HTTP/1 以來我們所熟知的某些標準，所以要慎重思考和實踐，以便高效使用 HTTP/2 的開發環境。

via: https://www.viget.com/articles/getting-started-with-http-2-part-2

作者：Ben 譯者：GitFuture 校對：jasminepeng

本文由 LCTT 組織編譯，Linux中國 榮譽推出

相關文章