前端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又有什麼用。當這些問題抛向你的時候，如果你平時沒有注意積累這方面的技術知識，此時的你是否依然會處于一個懵圈的狀态？

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

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

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

謹以此文與君共勉。

原文釋出時間為：2018年05月14日

原文作者：閏土大叔

本文來源：

https://juejin.im/post/5af891316fb9a07ac0225812 掘金 https://juejin.im/entry/5b3a29f95188256228041f46

如需轉載請聯系原作者