我做前端已經(jīng)有五年的時間了，從大學(xué)剛畢業(yè)的時候，我是一個完全什么都不懂的小白。雖然我大學(xué)里學(xué)的是軟件工程專業(yè)，但是因為在大學(xué)里荒廢學(xué)業(yè)，每天只知道打游戲，基本上到大學(xué)畢業(yè)之前我是什么都不會的，而且大學(xué)里是沒有教前端相關(guān)的東西的。

我是在大學(xué)畢業(yè)之前，兩三個月，自學(xué)了一點點前端的皮毛，也就是會寫一點點的html和css。那個時候找工作也不容易，終于有一個公司收留了我，雖然說工資什么的我們暫時按下不提。但是至少他們要我，我就非常地開心了。

從那個時候開始，因為有了項目要做，所以我逼迫自己，每天去學(xué)習新的內(nèi)容。那個時候我從jQuery開始做，因為公司的項目比較特殊，就是單頁應(yīng)用，總共加起來大概就五六個頁面，但是要一次性全部加載完，后續(xù)的所有數(shù)據(jù)都是根據(jù)接口去獲取。那個時候沒有框架，沒有React，ngular也剛剛出來，還并不流行。所以那個時候我們就用jQuery。

然后我就想辦法去做，第一版做的非常的爛，就一個js文件我寫了3000多行代碼。所以在那個時候我逼迫自己想辦法去解決各種問題。我就針對自己當時的認知，比如說js文件太大了，應(yīng)該怎么辦？

然后我去網(wǎng)上搜，我發(fā)現(xiàn)了sea.js這個東西。我學(xué)習了它異步加載JavaScript的方法，后來才把它引用到項目里。

當我發(fā)現(xiàn)代碼量多了，很難去維護這個邏輯，還有頁面的切換。于是我就去網(wǎng)上搜資料學(xué)習，發(fā)現(xiàn)有backbone.js這個東西，它可以幫我解決這個問題。

在后來這段時間里，我積累了非常多的東西，也是我進步最快的一個時期。

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

當時，我還沒有模塊化的概念。

后來又做了一些項目，發(fā)現(xiàn)了很多的問題，我再去想辦法去解決。這個時候才會知道有Webpack這些模塊化組織代碼的工具。我就是在這種環(huán)境下一步一步成長起來的。我所有學(xué)的內(nèi)容，對于前端的了解，基本上都是基于我想要去解決一個問題，然后再去網(wǎng)上搜相關(guān)的內(nèi)容，然后去想辦法把這個問題解決掉。

所以對于我來說，學(xué)習這個東西，你要知道你要解決什么問題。然后你學(xué)的這個東西，它解決了什么問題。它適不適合用在你遇到的這些問題上，以及你在學(xué)習這個內(nèi)容之前，你必須要對它的整體有一個了解。不然的話，你就是瞎用。你用的方法可能根本就不是這個框架要解決的問題。

比如Vue，大家對于vue整體有一個概念之后，再去用到一個項目里面去。而項目一開始我們做的時候并不要求做的特別的復(fù)雜。只要你基礎(chǔ)扎實，你肯定有辦法去解決這些在項目里碰到的問題。而在解決問題的過程當中，才是你掌握了你學(xué)習到的東西，鞏固了你學(xué)習到的這些內(nèi)容的地方。

所以這就是我要談的學(xué)習。

談?wù)勄岸?/h2>

現(xiàn)在的前端跟五年前的前端是天壤之別。

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

我們寫好html、css，以及這個頁面上簡單的動畫效果，比如說點擊一下有什么事件之類的。然后這個東西寫好之后干嘛呢？丟給后端人員他們用后端模板，比如說最多的用Java，Java有jsp模板語言，接著把數(shù)據(jù)填進去，就OK了。

這個時候我們一個網(wǎng)站有很多頁面怎么辦呢？比如說我們寫了很多的html頁面，寫好之后交給后端人員，然后他們整合在模板，再把數(shù)據(jù)動態(tài)插進去。這樣的話，每個http的請求發(fā)送到后端那邊，后端根據(jù)這個http請求，返回不同的模板，并且把數(shù)據(jù)渲染進去，最終返回給用戶。

這就是以前的前端。那么現(xiàn)在的前端呢？

我們把渲染模板的操作從后端挪到了前端來做。因為把模板渲染這部分拿到前端來做，所以很多業(yè)務(wù)邏輯的判斷、渲染、數(shù)據(jù)獲取等都要在前端來做。這個時候就大大加深了前端的業(yè)務(wù)邏輯。它包含的內(nèi)容就比以前上升了好幾個量級。

在這種情況下，我們需要一個框架去整理代碼。而這個時候就會出現(xiàn)各種幫助我們前端開發(fā)者去處理這些內(nèi)容的東西，比如說我們有了前端路由的概念，我們有了store狀態(tài)管理的概念。以前MVC的時候，還有過其他的處理數(shù)據(jù)的方式，反正各種各樣的工具幫我們?nèi)ヌ幚磉@個問題。

伴隨著前端業(yè)務(wù)代碼越來越復(fù)雜，我們用以前的方式去寫JavaScript代碼，效率非常的低。因為我們寫的JavaScript代碼很多都受瀏覽器兼容的限制，或者是它的低版本的很多功能不支持，導(dǎo)致我們寫起來非常的蛋疼。

彼時前端界不缺人才，他們發(fā)明了各種各樣的工具，比如用babel讓我們能提前享受到最新的JavaScript語法帶來的很多很好用的功能。當我們有了React這類框架之后，希望前端的應(yīng)用以js作為入口，而不是以html作為入口。我們html里顯示的內(nèi)容都是從js里面渲染出來的。

由于整個應(yīng)用基本上以js作為入口，我們就需要用js來處理css、圖片等其他靜態(tài)資源。這個時候我們發(fā)現(xiàn)，js本身不是用來處理這些東西的，而我們又迫切需要一些工具來處理這個問題，因此又出現(xiàn)了webpack。

所以前端的發(fā)展速度在整個編程界來說，是相對特別快的。主要的原因就是因為以前的前端它的標準實在是太低了。現(xiàn)在補充的很多js 的標準、前端的一些標準都是以前發(fā)展緩慢，落下來的。所以說，現(xiàn)在只能說是慢慢地變成了一個正常的狀態(tài)，而不是說已經(jīng)超前非常多了。

前端現(xiàn)在要入門的童鞋，對你們來說，其實不算是一個特別好的時機。

如果你之前是有基礎(chǔ)的，那么還可以。如果你之前一點基礎(chǔ)都沒有，你會發(fā)現(xiàn)前端進來之后，你要學(xué)的東西特別的多，各種各樣的東西。在這種魚龍混雜的時候，你必須要保持一顆好奇心，保持一個吸收新知識的能力。你要經(jīng)常去看一些文章，或者是GitHub，或者是一些厲害的程序員的博客。他們有發(fā)現(xiàn)新的東西，好玩的東西，都會分享出來。然后你要立馬去學(xué)習，因為它有可能就是將來的主流。

所以現(xiàn)在去學(xué)習前端，你要時刻保持一種學(xué)習的心態(tài)。

談?wù)劽嬖?/h2>

現(xiàn)在的前端狀態(tài)有點混亂，發(fā)展節(jié)奏有點快，你僅僅是想把vue學(xué)好是不可能的。你要學(xué)vue就必須要學(xué)webpack。當然你可以直接用vue-cli去生成一個項目。但是對于好奇的你，肯定會想，vue-cli里面到底做了哪些東西。

然后當你以后出去面試的時候，你跟面試官說，你做過vue的項目。然后面試官肯定會問你一些webpack相關(guān)的一些東西。這個時候你又說不出個所以然來。他會問你，那你的項目是怎么生成的，你會說用vue-cli腳手架生成的。他會問你，那你有沒有看過vue-cli里面生成的一些代碼，然后這個時候你又說沒有。那么他對你的期望值就會變得非常的低。

當然有的面試官還會不厭其煩地問你，為什么我們用webpack生成的文件名后面要帶上一串哈希碼？這個問題至少我問過很多初中級的童鞋，他們都是不知道的，不太清楚，或者只是清楚一些有概念叫做緩存。但是至于這個文件名后面加一堆哈希碼，到底是做什么事情，他們不太清楚。瀏覽器如何去緩存，他們也不太清楚。

所以webpack是一個逃不開的話題。然后還有vue-router、vuex這些已經(jīng)算是vue項目開發(fā)的三駕馬車。因此當你想學(xué)好vue的時候，意味著你還要學(xué)好webpack、vue-router、vuex。

當然，服務(wù)端渲染也是值得討論的話題。這些東西要去全部學(xué)習好，對于基礎(chǔ)比較差的童鞋來講，確實有點難，他一下子接收的東西實在太多了。一旦涉及到webpack，而webpack又是跑在node端的，所以你還要學(xué)習用node.js如何去寫腳本。

當然，如果對于追求上進的你來說，還想學(xué)習下SSR服務(wù)端渲染，首先你要去學(xué)習用node.js如何去寫一個server，然后還有服務(wù)端的接口實現(xiàn)，雖然這是一個純后端的實現(xiàn)內(nèi)容。

當你以為這就結(jié)束了的話，你就錯了。如果你面試的是BATJ等互聯(lián)網(wǎng)大廠，面試官可能還會問你http相關(guān)的內(nèi)容。比如說，面試官會問你，像http的get、post、put、delete這些request methods它們又有什么用，有什么區(qū)別？從語義上來講，http的code又有什么用。當這些問題拋向你的時候，如果你平時沒有注意積累這方面的技術(shù)知識，此時的你是否依然會處于一個懵圈的狀態(tài)？

這些東西，對于一個純做前端，純做頁面的童鞋來說的話，你確實不用特別的了解。但是你一旦升級為一個工程師，你要去跟后端交流一些接口，你要去思考統(tǒng)籌整個項目的時候，你必須要了解。不然的話，你會踩非常多的坑，犯非常多的錯誤。導(dǎo)致你的整個項目到后期維護的時候，有很多的內(nèi)容到后期是沒辦法去升級的。

講了這么多關(guān)于學(xué)習、前端、面試等話題，終歸學(xué)習是要講效率的，如果你學(xué)了非常多的時間，發(fā)現(xiàn)自己還是不怎么會，你就會特別沒有成就感。當時就不會想繼續(xù)學(xué)下去了。

最后，向內(nèi)認知，向外行走。