科普web前端開發如何學習，圖文全面解析

前端是什么？

在回答這個問題之前，我想到了一道面試題：

當我們在瀏覽器中輸入網址并按回車之后，接下來會發生什么？

我們來簡單地看一看 “網頁展現” 的整個過程。

比如這里有一個用戶，它需要訪問 abc.com 這個網址。一般來說，當用戶輸入一個域名時，是在請求一個 HTML 資源。當他完成域名解析之后，他的瀏覽器會向 abc.com 這個域名所指向的 Web 服務器發出請求。

有時候 Web 服務器直接就可以返回用戶的請求了；有時候 Web 服務器還需要向數據庫查詢一些數據，然后才能把處理結果返回給用戶。

在這里小編建了一個前端學習交流扣扣群：132667127，我自己整理的最新的前端資料和高級開發教程，如果有想需要的，可以加群一起學習交流

當用戶的瀏覽器拿到服務器返回的 HTML 資源之后，就開始解析并顯示 HTML 的內容了。

一般來說，HTML 頁面需要 CSS 資源來描述頁面的樣式。比如瀏覽器在解析 HTML 時發現了一個 CSS 外鏈 abc.com/a.css，它就會去請求這個資源。

HTML 頁面往往還需要加載外部的 JS 資源，比如 abc.com/a.js，此時瀏覽器同樣會向服務器請求這個資源。

當所需的資源都加載完成之后，這個頁面就可以提供完整的外觀和功能了。整個過程差不多就是這個樣子了。

我們看一看這張流程圖，可以在中間畫一道豎線，把它分成左右兩個部分。

我們會發現，這道線左側的事情發生在瀏覽器端，我們稱之為 “前端”；右側的事情發生在服務器端，稱為 “后端”。（“前端” 之所以叫 “前端”，是因為它離用戶更近一些。）

大家都學過后端開發的相關課程，對后端這一塊應該都比較熟悉了。那問題來了：在上面這個過程中，后端有哪些局限？

• 服務器一旦把資源提供給瀏覽器之后，便失去對內容的影響。
• 服務器無法得知用戶在瀏覽器里做了什么，無法與用戶交互。

這意味著，只有當用戶下一次向服務器請求資源時，服務器才有機會再次決定用戶看到的內容。那么，用戶什么時候再向后端請求資源呢？

第一種情況是 “導航動作”。比如用戶刷新頁面、點擊鏈接、點擊瀏覽器的前進/后退等等。

第二種情況是用戶提交表單。表單是最傳統的頁面交互方式之一，提交表單時瀏覽器會向服務器發出新請求——這意味著瀏覽器會跳轉到一個新的地址，服務器會在新頁面中顯示表單的處理結果。

還有一種特殊情況，就是服務器在給瀏覽器返回 HTML 資源時，在頁面中插入一個特殊的標記，瀏覽器看到這個標記就會在一定的時間后自動刷新當前頁面或跳轉到其它頁面，相當于服務器強制用戶再次發出請求。可想而知，這種非用戶意愿驅動的頁面跳轉行為并不討人喜歡，因此已經不常用了。

在傳統網頁中，上述幾種用戶與服務器之間的交互方式也算夠用了。不過隨著網頁形態的不斷演進，用戶對網頁體驗提出了更高的要求，很多時候網頁不僅僅是一篇靜止的文檔，而更像是一個應用程序，用戶隨時可能與之互動。這個時候，前端的價值就體現出來了。

• 用戶從停留在當前頁面到發起新請求的這段時間內，前端可以控制頁面內容。
• 當用戶停留在當前頁面時，前端有能力與用戶交互。由于前端的 JS 可以監聽用戶在瀏覽器中的各種行為（比如鼠標點擊、鍵盤輸入、滾動頁面等等），前端就可以針對這些行為作出相應的反饋。

在前端與用戶的交互過程中，有些事情光靠前端就可以做出響應。比如我們在網頁上做了一個計算器的功能，當用戶輸入算式之后，JS 就可以直接計算出結果并顯示給用戶。整個過程不需要服務器的參與就可以完成。

但有些事情，光有前端是無法完成的。此時前端就需要交給后端來處理，拿到處理結果之后再交給用戶。在這個過程中，前端可以讓用戶一直停留在當前頁面，交互過程具有良好的連續性。

那么，前端如何把任務交給后端并拿到后端處理的結果呢？主要有兩種方式：Ajax 和 Socket 連接。

Ajax 是最常見的前后端交互方式。它以 “請求→響應” 的方式來完成前后端的信息傳遞。傳統的表單交互需求幾乎都可以由 Ajax 改造為 “原地提交并獲取反饋” 的交互方式，不需要跳轉頁面，從而有效提升用戶體驗。

而對于實時性比較高的場景，Socket 連接就是一個更好的選擇。它的工作方式是前后端建立一個持續的連接，信息可以隨時由前端發向后端，或由后端推送到前端。如果我們要建立一個實時對話的應用，通常就會用到 Socket 連接了。

前端需要用到哪些技術？

說到前端技術，我們通常都會說到 “三大塊”：

• HTML
• CSS
• JS

這是前端最核心的三項技術。

接下來，我們就會說到 “前端的分層架構”。這個架構的原則就是 “讓合適的技術去做合適的事情”。一個網頁從邏輯上可以視為這三層的有機結合體：

• 結構層：這一層的作用是表述一個頁面中有哪些信息，以及這些信息之間的關系是什么。這一層在技術上是由 HTML 來實現的。
• 表現層：這一層決定了頁面中的信息會以什么樣的外觀呈現出來。這一層由 CSS 來實現。
• 行為層：這一層控制了頁面如何與用戶進行交互。在傳統的展示型網頁中，可能只需要 “結構層” 和 “表現層” 就足以提供完整的功能；而現代網頁承載了越來越多的交互，這就推動 “行為層” 的能力不斷增強。這一層由 JS 來實現。

我們通過一個實例來理解這個分層架構。

比如我是一個百姓網的用戶，我打開了 “用戶中心” 中的 “我發布的信息” 這個頁面。

這個頁面的 HTML 描述了信息以及信息的結構。即使沒有 CSS 和 JS 的輔助，這個頁面仍然可以呈現出可理解的內容（參見上圖）。頁面頂部是一些導航元素，接下來的 “顯示中的信息” 是一個標題，它又引出了一個列表。這個列表自然就是我在百姓網發布的所有信息了。（除了 “顯示中的信息” 以外，頁面后半段還有 “已刪除的信息”，這里不再贅述。）

接下來，我們會在表現層下功夫，通過 CSS 來為頁面中的各個元素設定外觀。經過這一層的修飾之后，頁面中的內容更加美觀了；更重要的是，各元素的功能職責也更加直觀易懂了（參見上圖）。

這已經是一個挺不錯的網頁了，但接下來，我們還會通過 JS 來豐富它的功能，提升用戶的使用效率。

作為信息的發布者，我可能需要修改某條信息的內容，或對它進行 “刷新” 之類的操作。在傳統的交互中，我需要在這個列表中點擊需要操作的信息，然后在信息的詳情頁選擇合適的操作。

我們可以把這個流程簡化一下：我們在這個列表中為每條信息添加一個操作按鈕，當用戶點擊某條信息的操作按鈕時，我們就在頁面中彈出一個操作面板，用戶可以直接選擇想要的操作，減少了中間環節（參見上圖）。

由此可見，結構層、表現層、行為層這三者各有所長，共同構造了一個功能完備、體驗良好的網頁出來。

除了基本的 “三大塊” 之外，作為前端工程師，我們還需要掌握以下知識和技能：

• HTTP 相關：由于前端資源都是瀏覽器通過網絡下載的，因此我們有必要了解相關的網絡協議。
• 瀏覽器相關：前端代碼運行在瀏覽器中，我們需要了解瀏覽器的各種特性，以及瀏覽器向我們提供的各種接口。
• 前端性能優化：讓網頁更快，減少用戶的等待，這也是前端工程師面臨的重要課題。優化網頁的前端性能，需要我們具備上面兩項知識，并且掌握性能優化相關的工具和方法。
• 圖形圖像：網頁信息不僅包含文字，還包含圖片、視頻等多媒體信息。圖片作為最常用媒體資源，需要我們掌握與其相關的技能。比如了解各種圖片格式適用的場景、基本的圖片處理方法等等。

（在講座中設立了一個 demo 環節，我會現場演示如何從零開始創建一個簡單的網頁，并實踐 “前端的分層架構” 這一指導思想。）

前端的開發方式是怎樣的？

前面我們已經介紹了前端技術 “三大塊”，然而在如今，當我們在編寫這三塊的代碼時，已經不再 “裸寫” 了。這意味著我們在開發階段編寫的代碼與實際在瀏覽器環境中運行的代碼已經不一樣了，詳細來說：

• 我們通過模板語言來生成 HTML。
• 通過 CSS 預處理器來生成 CSS 代碼。
• 通過 ES6+ 的語法和特性來編寫 JS 代碼。

舉例來看吧，以下三個例子展示了代碼書寫方式的演化。

采用了 Jade 和 Jedi 這兩種模板語言。在上圖的代碼中，我們僅僅使用了模板語言最基本的標記語法，還沒有插入使用模板語言的任何邏輯能力。僅此一步，就可以看出模板語言帶來的好處。

原先我們在寫 HTML 代碼時，會花費大量的精力在 <、/、> 這樣的語法噪音上；同時，識別標簽的嵌套關系也很費眼。幸運的是，Jade 和 Jedi 這樣的現代模板語言把前端工程師解放了出來。它們通過縮進來表達嵌套關系，層級關系一目了然；語法更精練，表現力更強。

在 CSS 方面，預處理器一方面通過更簡潔的語法減輕開發者的書寫負擔，另一方面通過內置的邏輯能力增強了代碼的表現力。舉個例子，在使用原生 CSS 來寫代碼時，不同元素采用的相同顏色只能分散在代碼各處；而采用了 CSS 預處理器之后，我們可以把相同意義的顏色通過變量的形式抽象出來，然后在代碼各處調用即可。這樣不僅便于后期維護，在平時讀代碼時也更容易理解代碼意圖。

在 JS 方面，我們開始享受 ES6+ 帶來的新特征福利。ES（ECMAScript）是定義 JS 這門語言的標準規范，從第六版開始，ES 以每年一版的節奏持續快速地擴展著 JS 語言的能力。

在以往，如果我們要實現 “在數組中找出符合特定條件的成員” 的需求，往往需要借助 Underscore 這樣的工具庫，調用它的 _.find() 方法。而在 ES6 中，語言本身就擴展了數組的能力，我們只需要直接調用 Array#find() 接口即可。另外，像箭頭函數這樣的新語法也可以令代碼進一步簡化。

在 HTML、CSS、JS 這三大塊，我們放棄 “裸寫”，采用 “更高級” 語言的目的在于：

• 利用高級語言提供的 “邏輯能力” 來增強代碼的表現力。
• 利用高級語言的 “語法糖” 和 “新特性” 來提升開發效率和舒適度。

當然，采用這些更高級的語言也不是完全沒有成本的。我們在開發階段所用的語言已經不是純粹的 HTML、CSS、JS 了，瀏覽器無法直接識別和運行。因此，當我們放棄 “裸寫”，也就意味著：

• 在部署流程中需要設立構建環節，把源碼編譯到瀏覽器環境可以運行的目標代碼。
• 在開發階段，需要有工具來實時監視并編譯有變動的源碼，以確保頁面上呈現的是我們修改過的最新效果。

在企業級的前端開發中，我們還需要了解如下知識點：

• 模塊化：模塊化是最常見的編程實踐之一，令我們的代碼組織更加清晰、易維護。ES6 為 JS 增加了完善的模塊化方案，我們的日常開發也已經遷移到了 ES6 模塊規范之下。

• 包管理：如何將開源社區中的優秀組件為我所用？這就不能不提 “npm” 這個最主流的 JS 包管理器。前端界優秀的開源項目幾乎都發布到了 npm 的包倉庫，我們日常開發中用到的第三方庫也都是由 npm 來管理的。

• 打包工具可以把我們寫的模塊化的源碼和第三方包整合到一起，形成頁面所需的完整 JS 資源。“包管理器”、“模塊化”、“打包工具” 的相互結合，基本上就是日常的 JS 代碼組織方式。

• 組件化：在傳統的前端開發中，HTML、CSS、JS 這三塊的代碼有各自獨立的文件，這些文件往往也分散在不同的目錄結構中。

• 如果頁面功能區塊的劃分足夠清晰，開發者就可以用 “組件” 的概念來把頁面拆分，整個頁面會被視為多個組件的嵌套和組合；同時，開發者也傾向于把每個組件相關的 HTML、CSS、JS 代碼整合到同一個目錄（或同一個文件）中，便于管理和維護。

• 這就是 “組件化” 的開發模式。要實現這樣的開發模式，通常需要前端框架和構建工具的配合。

• 單頁應用：HTML5 的 History API 為前端提供了控制瀏覽器導航行為的能力，配合 Ajax 無刷新更新頁面內容的特性，我們可以在一個頁面內實現應用的多視圖切換，避免頁面的頻繁跳轉，提供類似桌面應用的體驗。比如 Gmail 等產品就是典型的單頁應用模式，百姓網的大多數后臺系統也都是單頁應用。

• 其它實用的知識點，就留待大家在工作中慢慢發掘吧。