前端leader找我談心：我是如何從剛畢業的前端菜鳥一步步成長爲前端工程師的？

談談學習

我作前端已經有五年的時間了，從大學剛畢業的時候，我是一個徹底什麼都不懂的小白。雖然我大學裏學的是軟件工程專業，可是由於在大學裏荒廢學業，天天只知道打遊戲，基本上到大學畢業以前我是什麼都不會的，並且大學裏是沒有教前端相關的東西的。

我是在大學畢業以前，兩三個月，自學了一點點前端的皮毛，也就是會寫一點點的html和css。那個時候找工做也不容易，終於有一個公司收留了我，雖說工資什麼的咱們暫時按下不提。可是至少他們要我，我就很是地開心了。

從那個時候開始，由於有了項目要作，因此我逼迫本身，天天去學習新的內容。那個時候我從jQuery開始作，由於公司的項目比較特殊，就是單頁應用，總共加起來大概就五六個頁面，可是要一次性所有加載完，後續的全部數據都是根據接口去獲取。那個時候沒有框架，沒有React，ngular也剛剛出來，還並不流行。因此那個時候咱們就用jQuery。

而後我就想辦法去作，初版作的很是的爛，就一個js文件我寫了3000多行代碼。因此在那個時候我逼迫本身想辦法去解決各類問題。我就針對本身當時的認知，好比說js文件太大了，應該怎麼辦？

而後我去網上搜，我發現了sea.js這個東西。我學習了它異步加載JavaScript的方法，後來才把它引用到項目裏。

當我發現代碼量多了，很難去維護這個邏輯，還有頁面的切換。因而我就去網上搜資料學習，發現有backbone.js這個東西，它能夠幫我解決這個問題。

在後來這段時間裏，我積累了很是多的東西，也是我進步最快的一個時期。

當我再去接觸到這些Vue、React這些框架的時候，我先去學習了一遍它們主要是解決了什麼問題，它們主要的功能有哪些。而後我再嘗試用到項目裏面去。那個時候，我剛開始學的是Angular，當時也沒有了解到有構建工具這個概念。那時候最多隻知道有Grunt，幫你去壓縮一下js。

當時，我尚未模塊化的概念。

後來又作了一些項目，發現了不少的問題，我再去想辦法去解決。這個時候纔會知道有Webpack這些模塊化組織代碼的工具。我就是在這種環境下一步一步成長起來的。我全部學的內容，對於前端的瞭解，基本上都是基於我想要去解決一個問題，而後再去網上搜相關的內容，而後去想辦法把這個問題解決掉。

因此對於我來講，學習這個東西，你要知道你要解決什麼問題。而後你學的這個東西，它解決了什麼問題。它適不適合用在你遇到的這些問題上，以及你在學習這個內容以前，你必需要對它的總體有一個瞭解。否則的話，你就是瞎用。你用的方法可能根本就不是這個框架要解決的問題。

好比Vue，你們對於vue總體有一個概念以後，再去用到一個項目裏面去。而項目一開始咱們作的時候並不要求作的特別的複雜。只要你基礎紮實，你確定有辦法去解決這些在項目裏碰到的問題。而在解決問題的過程中，纔是你掌握了你學習到的東西，鞏固了你學習到的這些內容的地方。

因此這就是我要談的學習。

談談前端

如今的前端跟五年前的前端是天壤之別。

五年前的前端，框架之流剛剛興起，也就是Angular帶的頭，那個時候剛出來沒多久。那個時候流行什麼呢？就是寫頁面模板。

咱們寫好html、css，以及這個頁面上簡單的動畫效果，好比說點擊一下有什麼事件之類的。而後這個東西寫好以後幹嗎呢？丟給後端人員他們用後端模板，好比說最多的用Java，Java有jsp模板語言，接着把數據填進去，就OK了。

這個時候咱們一個網站有不少頁面怎麼辦呢？好比說咱們寫了不少的html頁面，寫好以後交給後端人員，而後他們整合在模板，再把數據動態插進去。這樣的話，每一個http的請求發送到後端那邊，後端根據這個http請求，返回不一樣的模板，而且把數據渲染進去，最終返回給用戶。

這就是之前的前端。那麼如今的前端呢？

咱們把渲染模板的操做從後端挪到了前端來作。由於把模板渲染這部分拿到前端來作，因此不少業務邏輯的判斷、渲染、數據獲取等都要在前端來作。這個時候就大大加深了前端的業務邏輯。它包含的內容就比之前上升了好幾個量級。

在這種狀況下，咱們須要一個框架去整理代碼。而這個時候就會出現各類幫助咱們前端開發者去處理這些內容的東西，好比說咱們有了前端路由的概念，咱們有了store狀態管理的概念。之前MVC的時候，還有過其餘的處理數據的方式，反正各類各樣的工具幫咱們去處理這個問題。

伴隨着前端業務代碼愈來愈複雜，咱們用之前的方式去寫JavaScript代碼，效率很是的低。由於咱們寫的JavaScript代碼不少都受瀏覽器兼容的限制，或者是它的低版本的不少功能不支持，致使咱們寫起來很是的蛋疼。

彼時前端界不缺人才，他們發明了各類各樣的工具，好比用babel讓咱們能提早享受到最新的JavaScript語法帶來的不少很好用的功能。當咱們有了React這類框架以後，但願前端的應用以js做爲入口，而不是以html做爲入口。咱們html裏顯示的內容都是從js裏面渲染出來的。

因爲整個應用基本上以js做爲入口，咱們就須要用js來處理css、圖片等其餘靜態資源。這個時候咱們發現，js自己不是用來處理這些東西的，而咱們又迫切須要一些工具來處理這個問題，所以又出現了webpack。

因此前端的發展速度在整個編程界來講，是相對特別快的。主要的緣由就是由於之前的前端它的標準實在是過低了。如今補充的不少js 的標準、前端的一些標準都是之前發展緩慢，落下來的。因此說，如今只能說是慢慢地變成了一個正常的狀態，而不是說已經超前很是多了。

前端如今要入門的童鞋，對大家來講，其實不算是一個特別好的時機。

若是你以前是有基礎的，那麼還能夠。若是你以前一點基礎都沒有，你會發現前端進來以後，你要學的東西特別的多，各類各樣的東西。在這種魚龍混雜的時候，你必需要保持一顆好奇心，保持一個吸取新知識的能力。你要常常去看一些文章，或者是GitHub，或者是一些厲害的程序員的博客。他們有發現新的東西，好玩的東西，都會分享出來。而後你要立馬去學習，由於它有可能就是未來的主流。

因此如今去學習前端，你要時刻保持一種學習的心態。

談談面試

如今的前端狀態有點混亂，發展節奏有點快，你僅僅是想把vue學好是不可能的。你要學vue就必需要學webpack。固然你能夠直接用vue-cli去生成一個項目。可是對於好奇的你，確定會想，vue-cli裏面到底作了哪些東西。

而後當你之後出去面試的時候，你跟面試官說，你作過vue的項目。而後面試官確定會問你一些webpack相關的一些東西。這個時候你又說不出個因此然來。他會問你，那你的項目是怎麼生成的，你會說用vue-cli腳手架生成的。他會問你，那你有沒有看過vue-cli裏面生成的一些代碼，而後這個時候你又說沒有。那麼他對你的指望值就會變得很是的低。

固然有的面試官還會不厭其煩地問你，爲何咱們用webpack生成的文件名後面要帶上一串哈希碼？這個問題至少我問過不少初中級的童鞋，他們都是不知道的，不太清楚，或者只是清楚一些有概念叫作緩存。可是至於這個文件名後面加一堆哈希碼，究竟是作什麼事情，他們不太清楚。瀏覽器如何去緩存，他們也不太清楚。

因此webpack是一個逃不開的話題。而後還有vue-router、vuex這些已經算是vue項目開發的三駕馬車。所以當你想學好vue的時候，意味着你還要學好webpack、vue-router、vuex。

固然，服務端渲染也是值得討論的話題。這些東西要去所有學習好，對於基礎比較差的童鞋來說，確實有點難，他一會兒接收的東西實在太多了。一旦涉及到webpack，而webpack又是跑在node端的，因此你還要學習用node.js如何去寫腳本。

固然，若是對於追求上進的你來講，還想學習下SSR服務端渲染，首先你要去學習用node.js如何去寫一個server，而後還有服務端的接口實現，雖然這是一個純後端的實現內容。

當你覺得這就結束了的話，你就錯了。若是你面試的是BATJ等互聯網大廠，面試官可能還會問你http相關的內容。好比說，面試官會問你，像http的get、post、put、delete這些request methods它們又有什麼用，有什麼區別？從語義上來說，http的code又有什麼用。當這些問題拋向你的時候，若是你平時沒有注意積累這方面的技術知識，此時的你是否依然會處於一個懵圈的狀態？

這些東西，對於一個純作前端，純作頁面的童鞋來講的話，你確實不用特別的瞭解。可是你一旦升級爲一個工程師，你要去跟後端交流一些接口，你要去思考統籌整個項目的時候，你必需要了解。否則的話，你會踩很是多的坑，犯很是多的錯誤。致使你的整個項目到後期維護的時候，有不少的內容到後期是沒辦法去升級的。

講了這麼多關於學習、前端、面試等話題，終歸學習是要講效率的，若是你學了很是多的時間，發現本身仍是不怎麼會，你就會特別沒有成就感。當時就不會想繼續學下去了。

最後，向內認知，向外行走。

謹以此文與君共勉。

以上內容參考自某大型互聯網公司前端架構師的心路歷程，在此表示感謝。

最新的文章都會第一時間更新在個人公衆號<閏土大叔>裏面，歡迎關注。