前端 101：給不瞭解前端的同窗講前端

時間 2019-11-17

標籤前端不瞭解同窗简体版

原文原文鏈接

簡介

有時候須要向新同窗科普前端，又不知道如何下手？先把這篇圖文分享丟給他吧！css

本文改編自魔法哥爲「百姓網暑期實習生訓練營」所做的前端入門講座。此講座面向在校大學生，內容比較初級，高手請飄過～前端

你們好，今天的分享主要分爲如下三個部分。面試

因爲目前計算機專業尚未爲 Web 前端技術設立專門的課程，每位同窗對前端的瞭解程度也不同，今天的講座會以最淺顯的方式來爲你們介紹「前端」，幫助你們創建一個基本的概念。數據庫

前端是什麼？

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

當咱們在瀏覽器中輸入網址並按回車以後，接下來會發生什麼？編程

咱們來簡單地看一看「網頁展示」的整個過程。後端

好比這裏有一個用戶，它須要訪問 abc.com 這個網址。通常來講，當用戶輸入一個域名時，是在請求一個 HTML 資源。當他完成域名解析以後，他的瀏覽器會向 abc.com 這個域名所指向的 Web 服務器發出請求。數組

有時候 Web 服務器直接就能夠返回用戶的請求了；有時候 Web 服務器還須要向數據庫查詢一些數據，而後才能把處理結果返回給用戶。瀏覽器

當用戶的瀏覽器拿到服務器返回的 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 等產品就是典型的單頁應用模式，百姓網的大多數後臺系統也都是單頁應用。
其它實用的知識點，就留待你們在工做中慢慢發掘吧。