前端是什么？

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供硚口網(wǎng)站建設(shè)、硚口做網(wǎng)站、硚口網(wǎng)站設(shè)計(jì)、硚口網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、硚口企業(yè)網(wǎng)站模板建站服務(wù)，10年硚口做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

在回答這個(gè)問(wèn)題之前，我想到了一道面試題：

當(dāng)我們?cè)跒g覽器中輸入網(wǎng)址并按回車之后，接下來(lái)會(huì)發(fā)生什么？

我們來(lái)簡(jiǎn)單地看一看 “網(wǎng)頁(yè)展現(xiàn)” 的整個(gè)過(guò)程。

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

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

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

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

一般來(lái)說(shuō)，HTML 頁(yè)面需要 CSS 資源來(lái)描述頁(yè)面的樣式。比如瀏覽器在解析 HTML 時(shí)發(fā)現(xiàn)了一個(gè) CSS 外鏈 abc.com/a.css，它就會(huì)去請(qǐng)求這個(gè)資源。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• HTML
• CSS
• JS

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

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

• 結(jié)構(gòu)層：這一層的作用是表述一個(gè)頁(yè)面中有哪些信息，以及這些信息之間的關(guān)系是什么。這一層在技術(shù)上是由 HTML 來(lái)實(shí)現(xiàn)的。
• 表現(xiàn)層：這一層決定了頁(yè)面中的信息會(huì)以什么樣的外觀呈現(xiàn)出來(lái)。這一層由 CSS 來(lái)實(shí)現(xiàn)。
• 行為層：這一層控制了頁(yè)面如何與用戶進(jìn)行交互。在傳統(tǒng)的展示型網(wǎng)頁(yè)中，可能只需要 “結(jié)構(gòu)層” 和 “表現(xiàn)層” 就足以提供完整的功能；而現(xiàn)代網(wǎng)頁(yè)承載了越來(lái)越多的交互，這就推動(dòng) “行為層” 的能力不斷增強(qiáng)。這一層由 JS 來(lái)實(shí)現(xiàn)。

我們通過(guò)一個(gè)實(shí)例來(lái)理解這個(gè)分層架構(gòu)。

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

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

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

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

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

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

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

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

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

（在講座中設(shè)立了一個(gè) demo 環(huán)節(jié)，我會(huì)現(xiàn)場(chǎng)演示如何從零開始創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，并實(shí)踐 “前端的分層架構(gòu)” 這一指導(dǎo)思想。）

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

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

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

舉例來(lái)看吧，以下三個(gè)例子展示了代碼書寫方式的演化。

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

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

在 CSS 方面，預(yù)處理器一方面通過(guò)更簡(jiǎn)潔的語(yǔ)法減輕開發(fā)者的書寫負(fù)擔(dān)，另一方面通過(guò)內(nèi)置的邏輯能力增強(qiáng)了代碼的表現(xiàn)力。舉個(gè)例子，在使用原生 CSS 來(lái)寫代碼時(shí)，不同元素采用的相同顏色只能分散在代碼各處；而采用了 CSS 預(yù)處理器之后，我們可以把相同意義的顏色通過(guò)變量的形式抽象出來(lái)，然后在代碼各處調(diào)用即可。這樣不僅便于后期維護(hù)，在平時(shí)讀代碼時(shí)也更容易理解代碼意圖。

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

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

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

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

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

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

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

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

• 包管理：如何將開源社區(qū)中的優(yōu)秀組件為我所用？這就不能不提 “npm” 這個(gè)最主流的 JS 包管理器。前端界優(yōu)秀的開源項(xiàng)目幾乎都發(fā)布到了 npm 的包倉(cāng)庫(kù)，我們?nèi)粘ｉ_發(fā)中用到的第三方庫(kù)也都是由 npm 來(lái)管理的。

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

• 組件化：在傳統(tǒng)的前端開發(fā)中，HTML、CSS、JS 這三塊的代碼有各自獨(dú)立的文件，這些文件往往也分散在不同的目錄結(jié)構(gòu)中。

• 如果頁(yè)面功能區(qū)塊的劃分足夠清晰，開發(fā)者就可以用 “組件” 的概念來(lái)把頁(yè)面拆分，整個(gè)頁(yè)面會(huì)被視為多個(gè)組件的嵌套和組合；同時(shí)，開發(fā)者也傾向于把每個(gè)組件相關(guān)的 HTML、CSS、JS 代碼整合到同一個(gè)目錄（或同一個(gè)文件）中，便于管理和維護(hù)。

• 這就是 “組件化” 的開發(fā)模式。要實(shí)現(xiàn)這樣的開發(fā)模式，通常需要前端框架和構(gòu)建工具的配合。

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

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