科普web前端開發(fā)如何學(xué)習(xí)，圖文全面解析

前端是什么？

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

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

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

我們來簡單地看一看 “網(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é)果返回給用戶。

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

當(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è)樣子了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

說到前端技術(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)。

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

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

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

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

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

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

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

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

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

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

（在講座中設(shè)立了一個(gè) demo 環(huán)節(jié)，我會(huì)現(xiàn)場演示如何從零開始創(chuàng)建一個(gè)簡單的網(wǎng)頁，并實(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ì)來說：

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

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

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

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

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

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

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

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

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

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

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

在企業(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 的包倉庫，我們?nèi)粘ｉ_發(fā)中用到的第三方庫也都是由 npm 來管理的。

• 打包工具可以把我們寫的模塊化的源碼和第三方包整合到一起，形成頁面所需的完整 JS 資源?！鞍芾砥鳌薄ⅰ澳K化”、“打包工具” 的相互結(jié)合，基本上就是日常的 JS 代碼組織方式。

• 組件化：在傳統(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)建工具的配合。

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

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

標(biāo)題名稱：科普web前端開發(fā)如何學(xué)習(xí)，圖文全面解析
瀏覽路徑：http://muchs.cn/article28/gdeocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、建站公司、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、標(biāo)簽優(yōu)化、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)