想成為前端工程師，那么在大學(xué)期間應(yīng)該如何規(guī)劃？

先講一個(gè)我的一個(gè)學(xué)生的故事：

先說(shuō)一下他的背景吧，他是一名雙非理工科學(xué)校畢業(yè)，工作了兩年的前端工程師，目前年薪大概在30w左右。在大三的時(shí)候進(jìn)入學(xué)院的工作室開(kāi)始自學(xué)PHP并和同學(xué)一起做項(xiàng)目，大四去一家廣州的公司前端開(kāi)發(fā)實(shí)習(xí)、轉(zhuǎn)正。中間經(jīng)歷過(guò)一次跳槽，一直到現(xiàn)在從事的都是前端開(kāi)發(fā)工作。

對(duì)于剛?cè)雽W(xué)的大一大二學(xué)生們來(lái)說(shuō)，可能還在學(xué)習(xí)基礎(chǔ)通識(shí)課階段，可能還沒(méi)怎么接觸編程，或者剛接觸編程語(yǔ)言，那我的建議是專(zhuān)注計(jì)算機(jī)基礎(chǔ)理論的學(xué)習(xí)包括操作系統(tǒng)、計(jì)算機(jī)原理、算法和數(shù)據(jù)結(jié)構(gòu)、編程語(yǔ)言的學(xué)習(xí)，養(yǎng)成編程習(xí)慣為主。如果已經(jīng)是大三大四了，那么我們應(yīng)該把項(xiàng)目實(shí)踐放在第一位，作品是一個(gè)程序員最好的自描述，無(wú)論是參與開(kāi)源項(xiàng)目還是自己盡可能去模仿一些優(yōu)秀的互聯(lián)網(wǎng)項(xiàng)目產(chǎn)品都是很好的方式。

經(jīng)過(guò)近幾年的爆發(fā)式增長(zhǎng)，前端工程師這個(gè)崗位的市場(chǎng)熱度也是比較高的，而且入門(mén)門(mén)檻相對(duì)較低，上手快，前期初入行都是要從頁(yè)面做起的，所見(jiàn)即所得，能夠得到正反饋，比較容易獲得成就感，能夠激勵(lì)你深入學(xué)習(xí)。

現(xiàn)在，我們開(kāi)始進(jìn)入主題。總體思路大概是這樣的，作為一個(gè)剛接觸前端的小白，肯定對(duì)前端還沒(méi)有很深的概念，建議先囫圇吞棗式的先看一遍官方基礎(chǔ)文檔或經(jīng)典書(shū)籍（別太厚的否則容易勸退）腦子里有個(gè)大概知識(shí)輪廓；再跟著一些優(yōu)質(zhì)的視頻去敲代碼，在編碼工程中逐漸構(gòu)建起自己的前端知識(shí)體系；再回過(guò)頭來(lái)翻看一些經(jīng)典書(shū)籍和文檔，補(bǔ)全自己的一些缺漏。接下來(lái)圍繞這個(gè)思路我們講學(xué)習(xí)前端主要分為三個(gè)階段。

關(guān)于入門(mén)的文檔和書(shū)籍

第一階段

這個(gè)階段我們需要通過(guò)翻閱官方在線(xiàn)文檔及網(wǎng)上的前端入門(mén)基礎(chǔ)視頻，了解HTML、CSS、JavaScript的基礎(chǔ)語(yǔ)法（包括HTML5，CSS3，ES6-10的新特性）然后在代碼編輯器上驗(yàn)證其效果。這一階段學(xué)習(xí)成果驗(yàn)收標(biāo)準(zhǔn)：能夠以動(dòng)態(tài)交互頁(yè)面的形式臨摹出主流網(wǎng)站首頁(yè)。

第二階段

學(xué)習(xí)完前端基礎(chǔ)知識(shí)，不要著急去研究框架，什么Vue，React，Angular之類(lèi)框架的更新太快，你好不容易研究透了，等你畢業(yè)的時(shí)候，又會(huì)出來(lái)很多新的，所以掌握基礎(chǔ)最重要。這個(gè)階段，我們應(yīng)該花時(shí)間去了解軟件產(chǎn)品研發(fā)全鏈路的流程，明白前端交互，數(shù)據(jù)是怎么來(lái)的，數(shù)據(jù)是怎么存儲(chǔ)的，前端是怎么和后端通信的等這些問(wèn)題。所以我們就需要學(xué)一些后端語(yǔ)言如PHP,node.js；數(shù)據(jù)庫(kù)如mysql（關(guān)系型），mongoDB（非關(guān)系型）；網(wǎng)絡(luò)協(xié)議如HTTP，TCP/IP協(xié)議；服務(wù)器知識(shí)點(diǎn)如Linux命令，搭建基礎(chǔ)環(huán)境等。這一階段學(xué)習(xí)成果驗(yàn)收標(biāo)準(zhǔn)：能夠在服務(wù)器上自己搭建一個(gè)mvc模式的web服務(wù)，提供增刪改查的接口，進(jìn)行數(shù)據(jù)庫(kù)操作，并能和前端實(shí)現(xiàn)通信。

第三階段

經(jīng)過(guò)前兩步的學(xué)習(xí)，我們對(duì)前端有了大概的印象，了解前端演變的歷史；趁著大學(xué)有時(shí)間不妨把經(jīng)典主流的前端框架都過(guò)一遍，包括jquery,angular,vue,react等，才能讓你更加理解比對(duì)框架間的異同點(diǎn)。在這一階段，我們還會(huì)接觸到前端工程化如webpack，rollup，vite等；了解JS能用于不同端的技術(shù)如：Electron，各家的小程序等；了解基于前端框架二次開(kāi)發(fā)的框架如next，taro等。這一階段學(xué)習(xí)成果驗(yàn)收標(biāo)準(zhǔn)：能夠利用不同的框架做出一個(gè)最小的mvp的前端項(xiàng)目。

總結(jié)

其實(shí)寫(xiě)到這里，大家是不是已經(jīng)對(duì)前端學(xué)習(xí)有了一定的概念和規(guī)劃，基本上如果能按照上述的計(jì)劃去學(xué)習(xí)，相信大家都能達(dá)到初級(jí)甚至是中級(jí)前端開(kāi)發(fā)的標(biāo)準(zhǔn)，至于高級(jí)嘛...你是不是想多了少年，前面還有很多東西等著你呢。

關(guān)于學(xué)習(xí)技巧這一塊，我可以總結(jié)幾個(gè)關(guān)鍵詞：

最后希望大家都能好好學(xué)習(xí)，找到滿(mǎn)意的工作。