前端是什么？在回答這個(gè)問題之前，我想到了一道面試題：當(dāng)我們?cè)跒g覽器中輸入網(wǎng)址并按回車之后，接下來會(huì)發(fā)生什么？

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

比如這里有一個(gè)用戶，他需要訪問 abc.com 這個(gè)網(wǎng)址。一般來說，當(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ù)庫查詢一些數(shù)據(jù)，然后才能把處理結(jié)果返回給用戶。當(dāng)用戶的瀏覽器拿到服務(wù)器返回的 HTML 資源之后，就開始解析并顯示 HTML 的內(nèi)容了。

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

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

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

說到前端技術(shù)，我們通常都會(huì)說到 “三大塊”：HTML、CSS、JS，這是前端最核心的三項(xiàng)技術(shù)。

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

結(jié)構(gòu)層

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

表現(xiàn)層

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

行為層

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

前端工程師的必備技能

?

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

1

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

2

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

3

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

......

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

1

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

2

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

3

打包工具：可以把我們寫的模塊化的源碼和第三方包整合到一起，形成頁面所需的完整 JS 資源。

4

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

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

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

以上就是本次分享的全部內(nèi)容了，希望對(duì)你有所幫助，六星云課堂為你打造編程世界，歡迎前往~