水平“僅供參考”

你很可能是通過搜索找到這篇文章的。

剛?cè)胄心菚?huì)兒，整個(gè)小團(tuán)隊(duì)就我一只前端。我沒有參考坐標(biāo)系，不知道自己水平是什么程度，不知道大家是什么水平，更不知道就業(yè)市場(chǎng)對(duì)一年工作經(jīng)驗(yàn)的要求是怎樣的。那種感覺，就像是高三了，全班只有自己一個(gè)。模擬考考了 XXX 分，但自己也不知道自己能上什么學(xué)校。

說白了，對(duì)于自己有多菜，完全沒有自知之明。沒有自知之明的人，容易自大，同時(shí)也容易自卑。對(duì)此，常常感到惆悵。

當(dāng)然，一年經(jīng)驗(yàn)的前端應(yīng)該達(dá)到什么水平，這是沒有標(biāo)準(zhǔn)答案的。但是有參考總比沒有參考好。

我上網(wǎng)找過不少參考文章，也沒有找到什么數(shù)據(jù)充分的，統(tǒng)計(jì)意義上的一年前端水平總結(jié)。一年前端的個(gè)人總結(jié)還是能找到不少的。于是也想貢獻(xiàn)自己一部分力量，寫這么一篇僅供參考的文章。

落筆的現(xiàn)在，我已經(jīng)入行一年多了。本文中的技術(shù)水平描述，是根據(jù)幾個(gè)月前的初稿還原的，水平描述略有偏差，敬請(qǐng)諒解。

獨(dú)當(dāng)一面的螺絲工

雖然剛?cè)胄袝r(shí)比較菜，一年時(shí)間還是足夠成為一個(gè)合格的螺絲工的。

入職時(shí)，剛好從零開始一個(gè)新項(xiàng)目。一年，主導(dǎo)這個(gè)兩萬行級(jí)別的小項(xiàng)目?，F(xiàn)在若新開一個(gè)復(fù)雜頁(yè)面，大體也能知道怎么做，有哪些難點(diǎn)?？傮w坑踩的還不夠多，有些地方還是有種踩下去不知道有多深的感覺的。

下面從編碼能力、工程能力、管理能力三方面復(fù)盤一下自己一年成長(zhǎng)。

編碼能力大幅提升。編碼能力就是編程語言的駕馭能力。就螺絲工人而言，就是擰螺絲的能力了。雖然現(xiàn)在還不敢說精通 js，但好歹也算是熟練了。回頭看自己一年前寫的代碼，會(huì)有一種摔鍵盤的感覺——寫的什么鬼東西。

工程能力小幅的增長(zhǎng)。工程能力，可以簡(jiǎn)單理解為在有限的資源和時(shí)間里，達(dá)到預(yù)期指標(biāo)的能力。擰螺絲工人腦袋想的是，怎樣把這個(gè)面板固定在盒子外面。一般可以擰十字螺絲；不想用戶隨便打開就用三角螺絲；對(duì)于時(shí)間特別趕的臨時(shí)面板，甚至可以貼膠布。合理的技術(shù)選型是工程能力的一部分。組件之間如何合理劃分，怎樣才能讓組件高內(nèi)聚，低耦合，也是要思考的問題。噢，對(duì)了，一年前我連什么是高內(nèi)聚，低耦合都不知道。

管理能力增長(zhǎng)不大。螺絲工面對(duì)一批工件，和幾個(gè)幫手，怎樣組織大家一起完成工作，每天跟蹤進(jìn)度和控制風(fēng)險(xiǎn)，就是管理能力。這一年管理能力沒上去，一方面是前半年團(tuán)隊(duì)都只有我一只前端，沒有幫手可言，另一方面是編碼和工程能力沒跟上。對(duì)一個(gè)工件需要加工多久都吃不準(zhǔn)時(shí)，就更難估計(jì)一批工件的加工時(shí)間了。

分享一個(gè)重要的經(jīng)驗(yàn)教訓(xùn)。如果你的水平不足以控制風(fēng)險(xiǎn)，那么一定要學(xué)會(huì)及時(shí)匯報(bào)風(fēng)險(xiǎn)。新人切忌切忌的一點(diǎn)就是，不知道自己能不能搞得定，卻沒有及時(shí)向上匯報(bào)。

技術(shù)水平大概這樣

工作范圍內(nèi)的問題，都能搞定。還好我們沒有根據(jù)手機(jī)殼顏色改變 app 主題之類的需求。

js 能力。JavaScript 真的是易學(xué)難精。目前 js 水平應(yīng)付工作還是足夠的，但是對(duì)底層原理還不夠深入。個(gè)人特別喜歡函數(shù)式編程搭配箭頭函數(shù)。函數(shù)式編程是編程的一種樂趣。

初期學(xué) js， 碰到什么學(xué)什么，解決了當(dāng)前的阻塞性問題再說。中期我用過“地毯式”學(xué)法，特別管用。當(dāng)時(shí)做的項(xiàng)目對(duì)數(shù)組處理較多，我就深入研究 js 中數(shù)組的相關(guān)方法。我花了幾天時(shí)間，把 W3 上的所有數(shù)組方法的 demo 全部敲了一遍。后面做開發(fā)，涉及到復(fù)雜數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換時(shí)，都能比較流暢地寫出來，這種感覺是非常棒的。

原生數(shù)組方法不夠熟時(shí)，不太建議一上來直接使用 lodash 庫(kù)。不然學(xué) js 的感覺就像背一個(gè)三方庫(kù)的接口，感覺很糟糕。熟了原生方法再用 lodash，就能感知到它是怎么封裝的。感覺完全不一樣。

繪圖能力。canvas，svg，d3，echarts，threejs 都試用過。我對(duì)計(jì)算機(jī)圖形學(xué)是相當(dāng)感興趣的。還特別希望深入研究計(jì)算機(jī)圖形學(xué)領(lǐng)域。但是項(xiàng)目對(duì)繪圖要求不高，自己也沒能抽出時(shí)間來深究，算是第一年比較遺憾的事情。

css。自己寫 demo 玩和正式做項(xiàng)目差別還是挺大的。自己玩 demo 的時(shí)候，設(shè)計(jì)時(shí)尚大方，空間充足，畫面簡(jiǎn)潔優(yōu)雅美麗大方楚楚動(dòng)人簡(jiǎn)直怎么夸都不為過。畫不出的布局，我還能把設(shè)計(jì)稿給改了。真正項(xiàng)目，需要在錯(cuò)綜復(fù)雜的元素中，搞出穩(wěn)定的布局，還不能改方案。這里加功能，這里加按鈕，這里彈個(gè)窗，這里搞個(gè)浮窗。被虐過千百遍之后，現(xiàn)在 CSS 技能算是上去了。

react技術(shù)棧。雖然當(dāng)年入職面試時(shí)寫的是“熟悉 react”，但是一年后我才敢真正覺得自己熟悉 react。在數(shù)據(jù)狀態(tài)方面，幸運(yùn)或者不幸，原生 state，hook+ context， mobx， redux 我全部都用過。項(xiàng)目現(xiàn)在全部組件為 functional component，使用原生 hook + context 管理狀態(tài)。

用 react 的過程中，碰過最有意思的一個(gè) bug 是 hook 中的 setTimeout 獲取不到最新數(shù)據(jù)。當(dāng)時(shí) hook 特性剛出來不久，即使在谷鴿用英文搜，都搜不到太合適的解決辦法，只好用全局變量的方法臨時(shí)規(guī)避。后來深入研究 js 才知道，這是因?yàn)?js 采用了詞法作用域，而非動(dòng)態(tài)作用域的原因。使用 useRef 才比較合理地解決這個(gè)問題。

為了做一只更加合格的前端，學(xué)了點(diǎn) Nodejs、 Linux、 Python、 Java、數(shù)據(jù)庫(kù)。學(xué) Nodejs 是為了自己寫 mockServer。學(xué) Linux 是為了自己部署代碼調(diào)試。學(xué) Python 是為了和算法的同事打交道。自己寫了 100 行左右的很簡(jiǎn)單的 Python 當(dāng)轉(zhuǎn)接層，用 Nodejs 拉起 Python 進(jìn)程來進(jìn)行簡(jiǎn)單通訊。學(xué) Java 是為了更好地和后臺(tái)打交道。搞數(shù)據(jù)庫(kù)是為了自己填充自己想要的模擬數(shù)據(jù)，以便更好地調(diào)試前端。這些技能都學(xué)得非常淺。對(duì)工作的上下游都了解一下，盡量不要被對(duì)方阻塞自己的開發(fā)，才能更專心地做好前端。

至于移動(dòng)端，小程序等熱門技術(shù)，由于當(dāng)下工作不涉及，沒有余力去深入了解。

某互聯(lián)網(wǎng)公司的大牛（同學(xué)）曾向我吐槽，真羨慕我這種編程工作不到三年的新人，因?yàn)槟芗兇獾叵硎芫幋a和技能進(jìn)步的樂趣?，F(xiàn)在他在公司，其主要價(jià)值已經(jīng)不在于寫代碼了，技術(shù)上的長(zhǎng)進(jìn)也比較慢。被有錢人羨慕的我，真不知道該說什么話好。

尾巴

不鴿的情況下，我未來會(huì)寫“轉(zhuǎn)行兩年”、“轉(zhuǎn)行三年”的文章的，拼接起來的參考意義更大。

感謝你能看到最后。如果對(duì)我這個(gè)“參考點(diǎn)”感興趣的話，我之前的這幾篇文章不妨一起看看：

28歲裸辭轉(zhuǎn)行前端是怎樣的一種體驗(yàn)
我轉(zhuǎn)行前端花了11個(gè)月
2019，轉(zhuǎn)行前端一年，我的增刪改查