一名前端工程師的職業(yè)經(jīng)歷

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

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

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

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

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

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

在后來這段時(shí)間里，我積累了非常多的東西，也是我進(jìn)步最快的一個(gè)時(shí)期。

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

當(dāng)時(shí)，我還沒有模塊化的概念。

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

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

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

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

談?wù)勄岸?/h2>

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

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

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

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

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

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

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

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

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

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

所以前端的發(fā)展速度在整個(gè)編程界來說，是相對(duì)特別快的。主要的原因就是因?yàn)橐郧暗那岸怂臉?biāo)準(zhǔn)實(shí)在是太低了。現(xiàn)在補(bǔ)充的很多js 的標(biāo)準(zhǔn)、前端的一些標(biāo)準(zhǔn)都是以前發(fā)展緩慢，落下來的。所以說，現(xiàn)在只能說是慢慢地變成了一個(gè)正常的狀態(tài)，而不是說已經(jīng)超前非常多了。

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

如果你之前是有基礎(chǔ)的，那么還可以。如果你之前一點(diǎn)基礎(chǔ)都沒有，你會(huì)發(fā)現(xiàn)前端進(jìn)來之后，你要學(xué)的東西特別的多，各種各樣的東西。在這種魚龍混雜的時(shí)候，你必須要保持一顆好奇心，保持一個(gè)吸收新知識(shí)的能力。你要經(jīng)常去看一些文章，或者是GitHub，或者是一些厲害的程序員的博客。他們有發(fā)現(xiàn)新的東西，好玩的東西，都會(huì)分享出來。然后你要立馬去學(xué)習(xí)，因?yàn)樗锌赡芫褪菍淼闹髁鳌?/p>

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

談?wù)劽嬖?/h2>

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

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

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

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

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

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

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

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

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

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