如何學(xué)好前端才能在日漸競(jìng)爭(zhēng)激烈的前端面試中脫穎而出？

其實(shí)不論是小白程序員還是有了工作經(jīng)驗(yàn)的成熟程序員，不同階段的人對(duì)前端學(xué)習(xí)和職業(yè)發(fā)展總有自己的迷茫，簡(jiǎn)單匯總了下，發(fā)現(xiàn)大家出現(xiàn)的問題主要是 3 種：

1、行業(yè)競(jìng)爭(zhēng)變大，初級(jí)前端工程師泛濫，發(fā)展預(yù)冷；

2、部分有技術(shù)追求和熱情的中級(jí)工程師，工作了幾年也開始接觸管理崗，但做了才發(fā)現(xiàn)，技術(shù)積累不夠，不僅跟不上節(jié)奏，在工作中只能是被動(dòng)地接受需求解決問題；

3、還有一些人，在 React、Vue 和 Angular 這些框架，以及 Flutter、Weex 等跨平臺(tái)開發(fā)工具中焦慮著，前端技術(shù)層出不窮，感覺學(xué)不動(dòng)了啊，咋整？

別焦慮，今天六星教育就來給大家系統(tǒng)的分析講一下如何如何系統(tǒng)的學(xué)習(xí)前端。

新手入門階段

前端學(xué)習(xí)是一個(gè)螺旋上升的過程，既要反復(fù)地看書，也要抓緊時(shí)間進(jìn)行實(shí)戰(zhàn)。只看書，看了就會(huì)忘，所以必須將看書和寫代碼相結(jié)合。只要你認(rèn)真學(xué)，入門前端的話三個(gè)月左右就可以了。

首先是 0 基礎(chǔ)入門的同學(xué)，你可以讀幾本經(jīng)典的前端教材，比如《JavaScript 高級(jí)程序設(shè)計(jì)》、《精通 CSS》等書籍，去閱讀一些參考性質(zhì)的網(wǎng)站也是不錯(cuò)的選項(xiàng)，比如 MDN 。

入門前端開發(fā)主要需要學(xué)習(xí) HTML，CSS 和 JavaScript 三大件。之后學(xué)習(xí)前端主流框架的使用，并基于已學(xué)內(nèi)容開發(fā)一個(gè)小項(xiàng)目進(jìn)行實(shí)戰(zhàn)。當(dāng)你把這些學(xué)習(xí)并理解透徹以后，也就算真正地入門前端了。

學(xué)完前端三大件，打好了大樹的根基，就可以開始擴(kuò)展技能樹了，開始學(xué)習(xí)前端框架。

前端的主流框架目前主要為 React，Vue 和 Angular。選擇哪個(gè)框架呢？你可以去Github或者其他網(wǎng)站搜一搜，然后根據(jù)你的個(gè)人喜好進(jìn)行選擇。一般是在 React 和 Vue 中選一個(gè)。

React 的開發(fā)體驗(yàn)更類似于寫原生的 JavaScript，要求你有較好的JavaScript 基礎(chǔ)。Vue 則引入了模版，將很多實(shí)現(xiàn)封裝成了 API，你需要記住并調(diào)用 API 來進(jìn)行開發(fā)，因?yàn)楹芏喽际欠庋b好的，所以學(xué)習(xí)起來較為簡(jiǎn)單，只是編程的感覺稍微弱了一些。

這兩個(gè)都是非常優(yōu)秀的框架，新人不必糾結(jié)于選擇哪個(gè)框架，學(xué)了一個(gè)，另一個(gè)也很容易學(xué)。

技術(shù)突破階段

如果你至少已經(jīng)有了一年以上的工作經(jīng)驗(yàn)，希望在技術(shù)上有一定突破，那么在這個(gè)階段六星教育將具體給你幾點(diǎn)建議：

試著建立自己的知識(shí)架構(gòu)

建立自己的知識(shí)架構(gòu)，并且在這個(gè)架構(gòu)上，不斷地進(jìn)行優(yōu)化。

什么叫做知識(shí)架構(gòu)？我們可以把它理解為知識(shí)的“目錄”或者索引，它能夠幫助我們把零散的知識(shí)組織起來，也能夠幫助我們發(fā)現(xiàn)一些知識(shí)上的盲區(qū)。當(dāng)然，知識(shí)的架構(gòu)是有優(yōu)劣之分的，最重要的就是邏輯性和完備性。

對(duì)學(xué)習(xí)知識(shí)體系的態(tài)度，應(yīng)該不要去強(qiáng)求，而是去理解知識(shí)體系的完整性和框架，多面，多維度，多方面的去累積來補(bǔ)足，補(bǔ)全自己的知識(shí)體系。

以javascript為例，我們可以將它分成三個(gè)層級(jí)：

1、 文法：?分為詞法和語法
2、 語義
3、 運(yùn)行時(shí)：?分為類型和執(zhí)行過程

為什么這么劃分？以計(jì)算機(jī)語言來說，必定是“用規(guī)定的文法，去表達(dá)特定語義，最終操作運(yùn)行時(shí)”的一個(gè)過程。

這里有三個(gè)名詞：文法、語義、運(yùn)行時(shí)。這三個(gè)詞大部分同學(xué)都比較陌生，當(dāng)然我也是。第一次接觸到這些名詞時(shí)，可以先在心里混個(gè)眼熟，下次在出現(xiàn)這些名詞，就會(huì)有個(gè)印象。

當(dāng)我們?cè)偻录?xì)分的時(shí)候，就會(huì)看到熟悉的概念了，詞法中有各種直接量、關(guān)鍵字、運(yùn)算符，語法和語義則是表達(dá)式、語句、函數(shù)、對(duì)象、模塊，類型則包含了對(duì)象、數(shù)字、字符串等。

這樣逐層向下細(xì)分，知識(shí)框架就初見端倪了。在頂層和大結(jié)構(gòu)上，我們通過邏輯來保持完備性。

如果繼續(xù)往下，就需要一些技巧了，我們可以尋找一些線索。

比如在 JavaScript 標(biāo)準(zhǔn)中，有完整的文法定義，它是具有完備性的，所以我們可以根據(jù)它來完成，我們還可以根據(jù)語法去建立語義的知識(shí)架構(gòu)。實(shí)際上，因?yàn)?JavaScript 有一份統(tǒng)一的標(biāo)準(zhǔn)，所以相對(duì)來說不太困難。

如果是瀏覽器中的 API，那就困難了，它們分布在 w3c 的各種標(biāo)準(zhǔn)當(dāng)中，非常難找。但是我們要想找到一些具有完備性的線索，也不是沒有辦法。我喜歡的一個(gè)辦法，就是用實(shí)際的代碼去找：for in 遍歷 window 的屬性，再去找它的內(nèi)容。

學(xué)習(xí)的過程，實(shí)際上就是知識(shí)架構(gòu)不斷進(jìn)化的過程，通過知識(shí)架構(gòu)的自然延伸，我們可以更輕松地記憶一些原本難以記住的點(diǎn)，還可以發(fā)現(xiàn)被忽視的知識(shí)盲點(diǎn)。

學(xué)會(huì)追本溯源，找到知識(shí)的源頭

有一些知識(shí)，背后有一個(gè)很大的體系，例如，我們對(duì)比一下 CSS 里面的兩個(gè)屬性：opacity和display。

雖然都是“屬性”，但是它們背后的知識(shí)量完全不同，opacity 是個(gè)非常單純的數(shù)值，表達(dá)的意思也很清楚，而 display 的每一個(gè)取值背后都是一個(gè)不同的布局體系。我們要講清楚 display，就必須關(guān)注正常流（Normal Flow）、關(guān)注彈性布局系統(tǒng)以及 grid 這些內(nèi)容。

還有一些知識(shí)，涉及的概念本身經(jīng)歷了各種變遷，變得非常復(fù)雜和有爭(zhēng)議性，比如 MVC，從 1979 年至今，概念變化非常大。這種時(shí)候，就是我們做一些考古工作的時(shí)候了：追本溯源——關(guān)注技術(shù)提出的背景，關(guān)注原始的論文或者文章，關(guān)注作者說的話。

追本溯源的過程，可以幫助我們理解一些看上去不合理的東西，還可以幫我們更好的理解前端開發(fā)的歷史進(jìn)程。

當(dāng)然，學(xué)習(xí)這件事還是比較困難的，技術(shù)這個(gè)東西都是日積月累積累出來的，短期成就不了什么，你想要成為真正的web前端技術(shù)大牛，那你就應(yīng)該“鉆”進(jìn)去。

如何深度學(xué)習(xí)，將前端學(xué)習(xí)路徑貫穿我們的整個(gè)職業(yè)生涯？

1、 制定好一下系統(tǒng)的web前端學(xué)習(xí)規(guī)劃
每天定量，學(xué)完什么知識(shí)點(diǎn)就掌握，能自己應(yīng)用，而不是能看懂，寫不出來東西。

2、 老師很重要
不要自己一個(gè)人悶頭學(xué)，這樣很難就業(yè)的，一定要找一個(gè)指導(dǎo)的，不推薦去培訓(xùn)，但是在線上花點(diǎn)錢找個(gè)能帶你學(xué)習(xí)，幫你解答問題的老師是必要的，如果你舍不得花這個(gè)錢，就很難能夠找到好的web前端工作。

3、 機(jī)會(huì)都是留給有準(zhǔn)備的人
堅(jiān)持每天學(xué)習(xí)也考驗(yàn)?zāi)愕哪托院鸵懔?，中途如果沒有什么事情千萬不能松懈，一天都不可以，保持一周6天的學(xué)習(xí)狀態(tài)，周日可以休息一下。

4、 多接觸項(xiàng)目
學(xué)這個(gè)就是為了做項(xiàng)目，學(xué)完了做不了項(xiàng)目的，趁早停止，技術(shù)的成長(zhǎng)都是在項(xiàng)目中提升的，所以一定多接觸項(xiàng)目。不要怕遇到問題，因?yàn)橹挥杏龅絾栴}解決問題，經(jīng)驗(yàn)才會(huì)積累下來。

5、 培養(yǎng)獨(dú)立解決問題的能力
學(xué)習(xí)過程中要不斷把自己培養(yǎng)成一個(gè)可以獨(dú)立解決問題的人，因?yàn)橹挥羞@樣你才能獨(dú)當(dāng)一面，剛開始不懂可以有人帶你入門，但是不要依賴別人的解答，逐漸的要靠自己，別人不能幫你一輩子。

6. 掌握得當(dāng)?shù)膶W(xué)習(xí)方法
初期自己別盲目，多跟別人去請(qǐng)教一下學(xué)習(xí)方法，如何學(xué)習(xí)才能變得更加有效率，不至于自己走太多彎路，覺得自己不適合，往往都是我們的方式錯(cuò)誤了。

最后一點(diǎn)，對(duì)于開發(fā)人員來說，經(jīng)常被忽視但確實(shí)非常重要的是一點(diǎn)就是獲取一些軟技能。

雖然了解事物的技術(shù)層面是很有用的，但知道如何在團(tuán)隊(duì)中交流也同樣重要。

有同理心、懂得與團(tuán)隊(duì)合作交流、平易近人和樂于助人、有耐心.......這些閃光點(diǎn)都可以幫你成為更好的前端開發(fā)者，永遠(yuǎn)記?。焊呒?jí)開發(fā)人員最重要的交付物是更高級(jí)的開發(fā)人員。

以上就是本次分享全部?jī)?nèi)容，想學(xué)習(xí)更多編程技巧，歡迎持續(xù)關(guān)注六星教育！