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

我是在大學畢業之前，兩三個月，自學了一點點前端的皮毛，也就是會寫一點點的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又有什么用。當這些問題拋向你的時候，如果你平時沒有注意積累這方面的技術知識，此時的你是否依然會處于一個懵圈的狀態？

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

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

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