談談學習
我做前端已經有五年的時間了，從大學剛畢業的時候，我是一個完全什麼都不懂的小白。雖然我大學裡學的是軟體工程專業，但是因為在大學裡荒廢學業，每天只知道打遊戲，基本上到大學畢業之前我是什麼都不會的，而且大學裡是沒有教前端相關的東西的。
我是在大學畢業之前，兩三個月，自學了一點點前端的皮毛，也就是會寫一點點的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又有什麼用。當這些問題拋向你的時候，如果你平時沒有注意積累這方面的技術知識，此時的你是否依然會處於一個懵圈的狀態？
這些東西，對於一個純做前端，純做頁面的童鞋來說的話，你確實不用特別的瞭解。但是你一旦升級為一個工程師，你要去跟後端交流一些介面，你要去思考統籌整個專案的時候，你必須要了解。不然的話，你會踩非常多的坑，犯非常多的錯誤。導致你的整個專案到後期維護的時候，有很多的內容到後期是沒辦法去升級的。
講了這麼多關於學習、前端、面試等話題，終歸學習是要講效率的，如果你學了非常多的時間，發現自己還是不怎麼會，你就會特別沒有成就感。當時就不會想繼續學下去了。
最後，向內認知，向外行走。
謹以此文與君共勉。
以上內容參考自某大型網際網路公司前端架構師的心路歷程，在此表示感謝。
最新的文章都會第一時間更新在我的公眾號<閏土大叔>裡面，歡迎關注。
