前言

自 15 年 9 月第一次接觸前端開發(fā)到現(xiàn)在已經(jīng)過去了五年多，最開始是從一個(gè)很小的外包團(tuán)隊(duì)團(tuán)隊(duì)出身，沒有帶，沒人管，幾乎一個(gè)人干了 2 年多的活。

做了接近 3 年的組長(zhǎng)，碰巧近期團(tuán)隊(duì)在調(diào)整，今年也經(jīng)歷了很多事情，回想一下自己這一路倒也挺有感觸。

雖然我不是一個(gè)很好的組長(zhǎng)，但也見過不少五年工作三年經(jīng)驗(yàn)情況的同學(xué)，他們?cè)谟龅狡款i期時(shí)候的迷茫與無(wú)措。

畢竟自己算過來(lái)人，寫一下對(duì)初級(jí)前端怎么樣突破瓶頸期的一些理解與思考，希望能對(duì)部分同學(xué)有些啟發(fā)跟幫助，也歡迎留言討論。

什么是瓶頸期

初級(jí)前端的定義一般工作經(jīng)驗(yàn)是 1 - 3 年，注意是?1 - 3 的工作經(jīng)驗(yàn)而不是工作年限。

很多同學(xué)經(jīng)常有這樣的情況，業(yè)務(wù)實(shí)在太多，能寫完這么多業(yè)務(wù)已經(jīng)花掉日常的時(shí)間跟激情，再也沒有時(shí)間、精力去折騰了剩下的事情。

每個(gè)人的熟練度是有限的，最開始工作的時(shí)候，一個(gè)小項(xiàng)目或者需求開發(fā)時(shí)間需要一個(gè)月，而在工作一年或者更短的時(shí)間內(nèi)，接受一定的業(yè)務(wù)毒打，使得框架熟練度、業(yè)務(wù)理解提升，可以將開發(fā)時(shí)間縮短到半個(gè)月。然而這個(gè)就是普通開發(fā)的極限，沒有辦法再借助熟練度來(lái)提高開發(fā)效率之后，就會(huì)很進(jìn)入一段迷茫期。

在現(xiàn)有的技術(shù)與熟練度已經(jīng)完全能滿足現(xiàn)在的業(yè)務(wù)需求，公司給研發(fā)安排的內(nèi)容都是占據(jù)預(yù)估好的時(shí)間。那么這個(gè)時(shí)候就是初級(jí)前端遇到的瓶頸期了。或者說(shuō)這是任何一個(gè)階段的研發(fā)都會(huì)遇到的一個(gè)瓶頸期。

減少無(wú)效的工作

什么樣的工作是無(wú)效（沒有效率）的？

• 重復(fù)的業(yè)務(wù)重新寫

• 重復(fù)的功能反復(fù)寫

例子1：登錄業(yè)務(wù)

大部分活動(dòng) h5 都是需要開發(fā)新項(xiàng)目、新的代碼，而很多業(yè)務(wù)都需要判斷登錄態(tài)，如果你也碰到這個(gè)問題可以嘗試下面的解決方案

將所有的登錄邏輯全部封裝在 sdk 中，在開發(fā)新的活動(dòng)的時(shí)候，可以將 sdk 直接通過 cdn 引入，判斷當(dāng)前環(huán)境未登錄的情況下，拉起登錄界面，進(jìn)行登錄。

這里推薦同學(xué)用 Rollup 去開發(fā)一個(gè) Library，比較方便。

例子2：權(quán)限業(yè)務(wù)

在中臺(tái)系統(tǒng)中，基本上每個(gè)業(yè)務(wù)中臺(tái)（比如訂單、客服等等）都會(huì)有對(duì)應(yīng)的權(quán)限控制。每個(gè)系統(tǒng)都要寫權(quán)限控制的話，會(huì)很耽誤時(shí)間，即使每次都是從上個(gè)項(xiàng)目 copy 過來(lái)，也很難保證未來(lái)權(quán)限系統(tǒng)統(tǒng)一升級(jí)的問題。

對(duì)微前端的熟悉的同學(xué)，可以將整個(gè)權(quán)限業(yè)務(wù)剝離成一個(gè)獨(dú)立的子工程，然后每個(gè)業(yè)務(wù)中臺(tái)直接引用權(quán)限服務(wù)即可，這樣可以保持權(quán)限業(yè)務(wù)的整體升級(jí)，并且不會(huì)影響到本身業(yè)務(wù)同學(xué)的開發(fā)。

如果對(duì)微前端并不是很熟悉的同學(xué)，可以參考 git submodule 或者 npm 包依賴等等，也可以將業(yè)務(wù)抽離，統(tǒng)一開發(fā)、升級(jí)，只不過更新好的權(quán)限服務(wù)需要重新構(gòu)建發(fā)布而已。

例子3：搭建基礎(chǔ)腳手架

每次新開發(fā)項(xiàng)目的時(shí)候，會(huì)有一些基本的配置都不需要改變，比如：

1. 請(qǐng)求的測(cè)試、預(yù)發(fā)、生產(chǎn)地址

2. 構(gòu)建命令，各種環(huán)境的配置

3. 每塊業(yè)務(wù)的特殊使用方法（如活動(dòng)業(yè)務(wù)經(jīng)常會(huì)使用到的分享功能等）

可以使用 node 開發(fā)一個(gè)自己的 cli 工具，再根據(jù)不同的業(yè)務(wù)預(yù)先配置好多份項(xiàng)目基礎(chǔ)工程，這樣可以根據(jù)不同的業(yè)務(wù)拉取不同的基礎(chǔ)模板，減少新業(yè)務(wù)開發(fā)的搭建、配置時(shí)間。

例子4：自己的組件庫(kù)搭建

雖然業(yè)內(nèi)有很成熟的組件庫(kù)比如 Ant Design、Vant 等等，但是要貼合每個(gè)公司自己的特色與業(yè)務(wù)，通用的組件庫(kù)肯定是遠(yuǎn)遠(yuǎn)不夠的。

可以配合 UI 設(shè)計(jì)，將公司的主體風(fēng)格、基礎(chǔ)組件全部規(guī)劃一下，有意識(shí)的去沉淀自己的組件庫(kù)出來(lái)。

在后續(xù)的迭代或者新的項(xiàng)目研發(fā)的時(shí)候，可以通過自建的組件庫(kù)，快速完成界面的基礎(chǔ)搭建。

這件事要主動(dòng)去推動(dòng)，不然一般很難落地。

上面的一些小例子，在第一次寫項(xiàng)目的時(shí)候就有部分的基礎(chǔ)代碼，在第二個(gè)項(xiàng)目開發(fā)的時(shí)候就應(yīng)該有意識(shí)的去設(shè)計(jì)、規(guī)劃將這些內(nèi)容進(jìn)行封裝、提取，從而在第三個(gè)項(xiàng)目的可以利用之前的設(shè)計(jì)跟基礎(chǔ)的代碼提高你的開發(fā)速度。

通過 1-3 年的項(xiàng)目訓(xùn)練，其實(shí)你應(yīng)該具備，從多個(gè)項(xiàng)目抽取公共功能、業(yè)務(wù)，找到相似、相通點(diǎn)進(jìn)行合并封裝的能力（拆解項(xiàng)目、組合封裝）。

這個(gè)理論上是良性循環(huán)的，可以將縮短后期迭代項(xiàng)目的開始時(shí)間，在這個(gè)過程中，自己也扮演不同的角色，得到不同的成長(zhǎng)與學(xué)習(xí)的機(jī)會(huì)。

上述的工作肯定是會(huì)額外占用業(yè)余時(shí)間，但這也是一個(gè)學(xué)習(xí)、提高的過程。實(shí)際上，提高了效率之后，日常工作中反而會(huì)有一定自由的時(shí)間，去良性循環(huán)這個(gè)過程。

借助工具提高效率

vscode 一大把提效的插件，就不多提了，什么代碼格式化、自動(dòng)提示、資源代理這種，大家都是前端肯定都經(jīng)常用上。

但是不要把自己局限到前端的這個(gè)圈子里面，可以用點(diǎn)額外的工具來(lái)提高自己的效率。

這里的效率不僅僅是前端開發(fā)這點(diǎn)內(nèi)容，把眼界拓寬一點(diǎn)，放在整個(gè)研發(fā)工具鏈路上。

在需求-設(shè)計(jì)-研發(fā)-測(cè)試-上線-業(yè)務(wù)反饋這整個(gè)鏈路中，看看有什么樣的工具可以提高前端的效率

將可預(yù)見、將發(fā)生、已發(fā)生與前端有關(guān)的問題都考慮進(jìn)去。

這里面很多事情可以用 node 來(lái)做，可以自己研發(fā)，但是要考慮性價(jià)比成本的問題，不一定自研或者 node 是最優(yōu)選擇。

Jenkins Or Gitlab CI/CD

每一次的構(gòu)建是否很痛苦，很耗時(shí)，而在多人協(xié)作的時(shí)候，還可能因?yàn)槊總€(gè)開發(fā)者的系統(tǒng)環(huán)境不同而導(dǎo)致線上異常問題出現(xiàn)。

當(dāng)你遇到上述問題的時(shí)候，首先不要逃避，也不是再打一個(gè)新包去解決，而應(yīng)該引入一個(gè)構(gòu)建工具去幫你完成這些問題。

這些問題在大公司、大團(tuán)隊(duì)可能有運(yùn)維或者有成熟的 devops 體系去完成，但是這并不影響你去學(xué)習(xí)、使用來(lái)提高自己。

如果團(tuán)隊(duì)中缺乏這些的情況下，使用它將大大節(jié)約你在構(gòu)建部署這塊的精力。

Fiddler Or Chales

移動(dòng)端調(diào)試一直比較麻煩，除了測(cè)試環(huán)境可以使用 vconsole 工具之外，線上可以借助此類抓包工具，快速定位前后端分離項(xiàng)目的一些問題所在。

一般 Mac 系統(tǒng)，Chales 用的比較多，Windows 用 Fiddler 多，選擇你喜歡的就行。

Sentry

從來(lái)沒有百分百完美的系統(tǒng)，上線之后的環(huán)境復(fù)雜度遠(yuǎn)超測(cè)試涵蓋的用例，如果想更好地完善你的項(xiàng)目，團(tuán)隊(duì)如果沒有足夠的資源或者成熟的線上預(yù)警體系，引入 Sentry 將是一件性價(jià)比十足的事情。

這樣可以節(jié)約你在找一些莫名其妙 bug 的時(shí)間，也是一件提高效率的利器。

Sentry 是一個(gè)日志平臺(tái)，分為客戶端和服務(wù)端，客戶端(目前客戶端有 Python, PHP, C#, Ruby 等多種語(yǔ)言)就嵌入在你的應(yīng)用程序中間，程序出現(xiàn)異常就向服務(wù)端發(fā)送消息，服務(wù)端將消息記錄到數(shù)據(jù)庫(kù)中并提供一個(gè) Web 界面方便查看。Sentry 由 Python 編寫，源碼開放，性能卓越，易于擴(kuò)展。

Sketch And Pixcook

UI 給設(shè)計(jì)圖的時(shí)候，僅僅肉眼是沒辦法還原的，拿到 psd 又需要會(huì) ps 工具什么的，這里你可以推薦 UI 使用 Sketch 來(lái)給你設(shè)計(jì)圖，既方便體積也小。實(shí)在不行，Pixcook 也能通過 psd 自動(dòng)生成標(biāo)注的前端代碼，兩者都是設(shè)計(jì)研發(fā)利器。

不要局限于框架

雷神的靈魂拷問：你到底是雷神還是錘神？放在前端也是一樣，你是一個(gè)前端工程師還是 Vue or React or Api 開發(fā)呢？

所有的框架都是開發(fā)業(yè)務(wù)的工具，在成熟的體系下，沒有一件工具的價(jià)錢是超過人工的。你要考慮的不是怎么做好一個(gè)框架開發(fā)，而是怎么成為一個(gè)合格的工程師。

現(xiàn)在各種 web 框架層出不窮，各家小程序百花齊放下，多端框架也應(yīng)運(yùn)而生。學(xué)會(huì)一個(gè)框架的使用，其實(shí)并不難，最多兩個(gè)項(xiàng)目，就能夠熟練去使用了，因?yàn)榭蚣艿恼Q生就是為了讓你快速去完成項(xiàng)目的。

底層技術(shù)與上層設(shè)計(jì)掌握的足夠牢固，即使換了一個(gè)新的框架，你也可以快速上手。但這并不代表，你不需要去了解對(duì)應(yīng)框架的設(shè)計(jì)與 Api，?而是避免成為 Api 工程師。好好想想自己作為工程師的核心競(jìng)爭(zhēng)力到底是什么？

當(dāng)然要是一個(gè)框架能玩出花，能解決所有的業(yè)務(wù)問題，那也是相當(dāng)牛逼，但實(shí)際情況這種框架或者人很少。

總之能解決業(yè)務(wù)的研發(fā)才是能賺錢的研發(fā)，能賺錢的研發(fā)才是好研發(fā)?？赡苓@段話說(shuō)出來(lái)會(huì)被打，但現(xiàn)實(shí)賺錢的確實(shí)都是老板，而不是一個(gè)開發(fā)。

另外無(wú)論是底層知識(shí)、算法、設(shè)計(jì)的多厲害，但是一定不要脫離業(yè)務(wù)基礎(chǔ)。為了面試，很多同學(xué)會(huì)去刷題、刷算法，確實(shí)很有效果，但是最重要的要學(xué)會(huì)怎么將這些所有的知識(shí)體系運(yùn)用到實(shí)際項(xiàng)目中去，讓他能夠發(fā)揮最大的價(jià)值。

技術(shù)深度相當(dāng)于內(nèi)功，肯定修煉的越深厚越好，但是一定要配合業(yè)務(wù)運(yùn)用這層外家功夫，方能成為絕世高手。就好比郭靖一身高強(qiáng)的內(nèi)力但還是需要降龍十八掌才能御敵。

生死看淡，不服就干

單干

如果你在一個(gè)小公司，小團(tuán)隊(duì)的時(shí)候，就沒事多折騰折騰自己，有什么新技術(shù)就上，前提是：

有一定的心里預(yù)期，不成熟的技術(shù)坑會(huì)非常多，內(nèi)外部都會(huì)有不少的壓力

預(yù)留足夠多的時(shí)間去試錯(cuò)，業(yè)務(wù)一定是保障第一位

要有一定的備案，如果在新的技術(shù)解決不掉問題的時(shí)候，能夠快速拿出備案解決

一定不要在主要業(yè)務(wù)中使用，如果出現(xiàn)問題，會(huì)導(dǎo)致團(tuán)隊(duì)的信任危機(jī)，影響后期發(fā)展，不利于后期合作

要有開放的心態(tài)，新的技術(shù)運(yùn)用起來(lái)不是優(yōu)越感爆棚，解決問題的同時(shí)，可以分享給團(tuán)隊(duì)的每位想要了解同學(xué)

團(tuán)隊(duì)

如果你是在一個(gè)大公司，一個(gè)成熟的團(tuán)隊(duì)，那么能做的事情只會(huì)更多。

記住一個(gè)點(diǎn)，越大的團(tuán)隊(duì)，業(yè)務(wù)鏈路就越多，細(xì)節(jié)就越多，能下手的地方就更多，能拿到的資源也會(huì)更多。

所以要敢于承擔(dān)責(zé)任與任務(wù)，在關(guān)鍵時(shí)刻頂住。

比如在新項(xiàng)目啟動(dòng)的時(shí)候要有足夠的勇氣主動(dòng)去申請(qǐng)承擔(dān)。前提條件是，你本身就要扛得住，值得信任，是一個(gè)可托付靠譜的人。

或者可以主動(dòng)參與產(chǎn)品鏈路，與產(chǎn)品、研發(fā)、測(cè)試、運(yùn)維、客服等等一系列與之相關(guān)的人員溝通，一起找到目前存在的痛點(diǎn)、難點(diǎn)，然后想辦法去解決。

最好的辦法是將你想做的事情，描述成他們想要的東西，然后他們可以借助你的資源來(lái)完成這件事，最后雙贏局面出現(xiàn)，皆大歡喜。

寫在最后

無(wú)論在哪都一樣，做技術(shù)的切記心浮氣躁，要耐得住寂寞，坐得了冷板凳。

2021新的一年，不管你是零基礎(chǔ)的小白，還是想要提升技術(shù)的大牛，在這里有一套【Java實(shí)戰(zhàn)進(jìn)階的學(xué)習(xí)資料】， 為正準(zhǔn)備學(xué)習(xí)的前端的小伙伴，精心準(zhǔn)備的禮物！看一下或許對(duì)于你有很大的提升哦！