前言

這篇文章，是在前幾天逛知乎的時候看到的文章，覺得很棒，正好也有這個需求，想向不了解前端的人介紹何為“前端”。不然，自己所在的群體中好像很少人能明白我一天到晚鉆研的東西是什么。下面與大家分享。

ps：本文為PPT演講的形式所作的圖文介紹，圖片較多。

本文轉(zhuǎn)自知乎：前端 101：給不了解前端的同學(xué)講前端
本演講原作者css魔法，文末有作者簡介

簡介

本文改編自魔法哥為 “百姓網(wǎng)暑期實習(xí)生訓(xùn)練營” 所作的前端入門講座。此講座面向在校大學(xué)生，內(nèi)容比較初級，高手請飄過～

大家好，今天的分享主要分為以下三個部分：

由于目前計算機(jī)專業(yè)還沒有為 Web 前端技術(shù)設(shè)立專門的課程，每位同學(xué)對前端的了解程度也不一樣，今天的講座會以最淺顯的方式來為大家介紹 “前端”，幫助大家建立一個基本的概念。

前端是什么？

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

當(dāng)我們在瀏覽器中輸入網(wǎng)址并按回車之后，接下來會發(fā)生什么？

我們來簡單地看一看 “網(wǎng)頁展現(xiàn)” 的整個過程。

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

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

當(dāng)用戶的瀏覽器拿到服務(wù)器返回的 HTML 資源之后，就開始解析并顯示 HTML 的內(nèi)容了。

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

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

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

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

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

大家都學(xué)過后端開發(fā)的相關(guān)課程，對后端這一塊應(yīng)該都比較熟悉了。那問題來了：在上面這個過程中，后端有哪些局限？

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

這意味著，只有當(dāng)用戶下一次向服務(wù)器請求資源時，服務(wù)器才有機(jī)會再次決定用戶看到的內(nèi)容。那么，用戶什么時候再向后端請求資源呢？

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

• 第二種情況是用戶提交表單。表單是最傳統(tǒng)的頁面交互方式之一，提交表單時瀏覽器會向服務(wù)器發(fā)出新請求——這意味著瀏覽器會跳轉(zhuǎn)到一個新的地址，服務(wù)器會在新頁面中顯示表單的處理結(jié)果。

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

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

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

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

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

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

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

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

前端需要用到哪些技術(shù)？

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

• HTML
• CSS
• JS

這是前端最核心的三項技術(shù)。

接下來，我們就會說到 “前端的分層架構(gòu)”。這個架構(gòu)的原則就是 “讓合適的技術(shù)去做合適的事情”。一個網(wǎng)頁從邏輯上可以視為這三層的有機(jī)結(jié)合體：

• 結(jié)構(gòu)層：這一層的作用是表述一個頁面中有哪些信息，以及這些信息之間的關(guān)系是什么。這一層在技術(shù)上是由 HTML 來實現(xiàn)的。

• 表現(xiàn)層：這一層決定了頁面中的信息會以什么樣的外觀呈現(xiàn)出來。這一層由 CSS 來實現(xiàn)。

• 行為層：這一層控制了頁面如何與用戶進(jìn)行交互。在傳統(tǒng)的展示型網(wǎng)頁中，可能只需要 “結(jié)構(gòu)層” 和 “表現(xiàn)層” 就足以提供完整的功能；而現(xiàn)代網(wǎng)頁承載了越來越多的交互，這就推動 “行為層” 的能力不斷增強(qiáng)。這一層由 JS 來實現(xiàn)。
  我們通過一個實例來理解這個分層架構(gòu)。

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

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

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

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

作為信息的發(fā)布者，我可能需要修改某條信息的內(nèi)容，或?qū)λM(jìn)行 “刷新” 之類的操作。在傳統(tǒng)的交互中，我需要在這個列表中點擊需要操作的信息，然后在信息的詳情頁選擇合適的操作。

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

由此可見，結(jié)構(gòu)層、表現(xiàn)層、行為層這三者各有所長，共同構(gòu)造了一個功能完備、體驗良好的網(wǎng)頁出來。

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

• HTTP 相關(guān)：由于前端資源都是瀏覽器通過網(wǎng)絡(luò)下載的，因此我們有必要了解相關(guān)的網(wǎng)絡(luò)協(xié)議。

• 瀏覽器相關(guān)：前端代碼運(yùn)行在瀏覽器中，我們需要了解瀏覽器的各種特性，以及瀏覽器向我們提供的各種接口。

• 前端性能優(yōu)化：讓網(wǎng)頁更快，減少用戶的等待，這也是前端工程師面臨的重要課題。優(yōu)化網(wǎng)頁的前端性能，需要我們具備上面兩項知識，并且掌握性能優(yōu)化相關(guān)的工具和方法。

• 圖形圖像：網(wǎng)頁信息不僅包含文字，還包含圖片、視頻等多媒體信息。圖片作為最常用媒體資源，需要我們掌握與其相關(guān)的技能。比如了解各種圖片格式適用的場景、基本的圖片處理方法等等。

前端的開發(fā)方式是怎樣的？

前面我們已經(jīng)介紹了前端技術(shù) “三大塊”，然而在如今，當(dāng)我們在編寫這三塊的代碼時，已經(jīng)不再 “裸寫” 了。這意味著我們在開發(fā)階段編寫的代碼與實際在瀏覽器環(huán)境中運(yùn)行的代碼已經(jīng)不一樣了，詳細(xì)來說：

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

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

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

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

在 CSS 預(yù)處理器方面：

• 通過更簡潔的語法減輕開發(fā)者的書寫負(fù)擔(dān)
• 通過內(nèi)置的邏輯能力增強(qiáng)了代碼的表現(xiàn)力。

舉個例子，在使用原生 CSS 來寫代碼時，不同元素采用的相同顏色只能分散在代碼各處；而采用了 CSS 預(yù)處理器之后，我們可以把相同意義的顏色通過變量的形式抽象出來，然后在代碼各處調(diào)用即可。這樣不僅便于后期維護(hù)，在平時讀代碼時也更容易理解代碼意圖。

在 JS 方面，我們開始享受 ES6+ 帶來的新特征福利。ES（ECMAScript）是定義 JS 這門語言的標(biāo)準(zhǔn)規(guī)范，從第六版開始，ES 以每年一版的節(jié)奏持續(xù)快速地擴(kuò)展著 JS 語言的能力。

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

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

• 利用高級語言提供的 “邏輯能力” 來增強(qiáng)代碼的表現(xiàn)力。
• 利用高級語言的 “語法糖” 和 “新特性” 來提升開發(fā)效率和舒適度。

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

• 在部署流程中需要設(shè)立構(gòu)建環(huán)節(jié)，把源碼編譯到瀏覽器環(huán)境可以運(yùn)行的目標(biāo)代碼。
• 在開發(fā)階段，需要有工具來實時監(jiān)視并編譯有變動的源碼，以確保頁面上呈現(xiàn)的是我們修改過的最新效果。

在百姓網(wǎng)，前端架構(gòu)組已經(jīng)搭建好了必要的開發(fā)環(huán)境，開發(fā)者們只需要關(guān)注開發(fā)本身就可以了。

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

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

• 包管理：如何將開源社區(qū)中的優(yōu)秀組件為我所用？這就不能不提 “npm” 這個最主流的 JS 包管理器。前端界優(yōu)秀的開源項目幾乎都發(fā)布到了 npm 的包倉庫，我們?nèi)粘ｉ_發(fā)中用到的第三方庫也都是由 npm 來管理的。打包工具可以把我們寫的模塊化的源碼和第三方包整合到一起，形成頁面所需的完整 JS 資源?！鞍芾砥鳌薄ⅰ澳K化”、“打包工具” 的相互結(jié)合，基本上就是日常的 JS 代碼組織方式。

• 組件化：在傳統(tǒng)的前端開發(fā)中，HTML、CSS、JS 這三塊的代碼有各自獨立的文件，這些文件往往也分散在不同的目錄結(jié)構(gòu)中。如果頁面功能區(qū)塊的劃分足夠清晰，開發(fā)者就可以用 “組件” 的概念來把頁面拆分，整個頁面會被視為多個組件的嵌套和組合；同時，開發(fā)者也傾向于把每個組件相關(guān)的 HTML、CSS、JS 代碼整合到同一個目錄（或同一個文件）中，便于管理和維護(hù)。這就是 “組件化” 的開發(fā)模式。要實現(xiàn)這樣的開發(fā)模式，通常需要前端框架和構(gòu)建工具的配合。

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

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

今天想跟大家分享的主要內(nèi)容就是這些了，感謝閱讀，再見！

作者簡介

作者：CSS魔法@前端架構(gòu)
簡介：百姓網(wǎng)前端架構(gòu) TL，《CSS 揭秘》譯者，CSS Conf 講師，自稱 “披著工程師外衣的設(shè)計師”。