[[421928]]

背景

個人成長 一直是很多同學(xué)最為關(guān)注的話題，大家也都可以到處看到相關(guān)的一些想法：有迷茫的、有焦慮的、有吐槽的、有建議的等等。在最近的一次團(tuán)隊溝通中，也基本上和大部分的同學(xué)深入聊到了這個話題，這里也做一個總結(jié)和思考。

正文

成長的話題，個人理解，可以分為三個部分：What、Why、How 來依次解析。

What

首先要搞明白的就是，大家所說的成長到底是個什么東西，而不是泛泛而談，我要成長，要弄清楚、弄明白到底要啥。

那成長這個詞的含義，來自百度百科的解釋：

按照百科的解釋，成長本身的含義是：人長大的過程，泛指的是從稚嫩到成熟的過程。敲重點，我覺得成長的最最核心的就是 過程 這兩個字，“長大”或者“成熟”更多的是代表的 目標(biāo) 。

所以從這個視角來看，我們可以把成長拆解為： 目標(biāo) + 過程 。 我們一直奔著某個目標(biāo)一直努力前行的過程，就代表了成長 。

Why

弄明白了成長到底是個啥，還要弄清楚為什么，就是為什么我需要成長。 很簡單，為了你的那個目標(biāo) 。

拿自然的人長大來講，從小到大，你需要一直吃飯、補(bǔ)充營養(yǎng)、還需要不斷學(xué)習(xí)各種技能，直至一般大家所說的18歲成年。那這個過程到底是為啥呢？是生物的本能？當(dāng)然是，“人是鐵飯是鋼，一頓不吃餓得慌”，生物本身決定了你就必須吃飯，必須喝水，這樣你的身體才能夠成長。還有其他原因嗎？當(dāng)然，你的各種學(xué)習(xí)，除了模仿之外的技能學(xué)習(xí)是為了啥，小的時候其實我們是被逼著去學(xué)校學(xué)習(xí)的，長大一點后，我們是為了我們可以有更好的生活，人生可以變得更加精彩。

更直白、更狹義的理解：可以是利益驅(qū)動，成長了可以獲得更豐厚的報酬，為什么可以有更豐厚的報酬呢？這是因為你可以承擔(dān)更大的職責(zé)。為了這個職責(zé)的承擔(dān)，你需要不斷的學(xué)習(xí)各種技能，當(dāng)有機(jī)會來臨的時候，你可以把握住。你會發(fā)現(xiàn)，這是一個正向循環(huán)，如同游戲或者小說中的打怪升級。

聽起來有一點點雞湯的味道，用經(jīng)典的話來講就是： “活到老學(xué)到老”、“學(xué)無止境” 。推薦大家仔細(xì)看看《終生學(xué)習(xí)》這本書。

How

職業(yè)規(guī)劃-目標(biāo)

在探索怎么成長之前，需要有一個基礎(chǔ)，我們的目標(biāo)是啥，對于程序員而言，你的目標(biāo)是啥，對于前端而言，你的目標(biāo)是啥。這個也就是大家日常所講的，你需要有自己的長遠(yuǎn)的 職業(yè)規(guī)劃 。

對于程序員而言，你的職業(yè)規(guī)劃是哪個：技術(shù)專家、架構(gòu)師、帶團(tuán)隊、技術(shù)管理者、項目管理、業(yè)務(wù)產(chǎn)品專家等等。當(dāng)然還可以是轉(zhuǎn)行，甚至都不在互聯(lián)網(wǎng)行業(yè)。

如果你還沒有一個長遠(yuǎn)的規(guī)劃，即長遠(yuǎn)的目標(biāo)，那么就要認(rèn)真考慮了，這個也是很多同學(xué)沒有動力的最核心原因。當(dāng)然，對于工作經(jīng)歷較少的同學(xué)，可以暫時沒有這個長遠(yuǎn)的規(guī)劃，但一定要有一個短期的規(guī)劃，給自己一個清晰的目標(biāo)。

推薦每個同學(xué)都有一個清晰的職業(yè)規(guī)劃 ，為什么？因為可以試想，10年后的自己，看著自己的簡歷，有很多的經(jīng)歷，做了很多項目，用了哪些技術(shù)，如果都是流水賬式的，沒有核心的思考和技術(shù)，那么那個時候自己的競爭力來自于哪里，這也是為什么會有“中年危機(jī)”，為什么會有“程序員是吃青春飯”等等的焦慮話題。 給自己一個長遠(yuǎn)的清晰目標(biāo)，這樣才會促使你不斷前行，不斷進(jìn)步，不會成為那個“被后浪拍在沙灘上的前浪”！

對于普通程序員而言，我們期望的成長，最核心的有兩部分： 技術(shù)能力的成長和綜合能力的成長 。

• 技術(shù)能力（前端）

  • 技能圖：基礎(chǔ)、框架、組件/庫、Node.js、工程化、性能/效率、安全、質(zhì)量、新興領(lǐng)域、其他領(lǐng)域（可視化、游戲）等，僅做參考。

  • 核心：基礎(chǔ)知識的掌握，一定放在第一位的，如HTML、CSS、JavaScript，常見的數(shù)據(jù)結(jié)構(gòu)、算法、網(wǎng)絡(luò)等。

  • 操作：做自己的技能圖，逐步完善和持續(xù)點亮。

• 綜合能力

  • 技能圖：項目管理、設(shè)計交互、溝通協(xié)作、owner思維、業(yè)務(wù)領(lǐng)悟能力、產(chǎn)品能力、帶人能力等等，僅做參考。

  • 核心：理解業(yè)務(wù)、理解產(chǎn)品、理解設(shè)計交互、基本的溝通協(xié)作、基本的項目管理。

  • 操作：多觀察、多思考，向優(yōu)秀的專業(yè)同學(xué)學(xué)習(xí)。

那這個過程中，你自己到底如何努力，精力有限，如何選擇？這個就要回歸到職業(yè)規(guī)劃上，也就是我們的 目標(biāo) 。個人建議，可以把目標(biāo)劃分為兩個階段： 一個是資深研發(fā)、一個是你決定的職業(yè)規(guī)劃目標(biāo)（技術(shù)專家、管理者等等） 。

• 資深研發(fā)

  • 目標(biāo)：期望可以在3-5年的時間里成為一名solid的資深工程師。

  • 解釋：搞定所需的核心技術(shù)能力和綜合能力。

• 職業(yè)規(guī)劃目標(biāo)

  • 目標(biāo)：你所選擇的職業(yè)規(guī)劃目標(biāo)，如專家、架構(gòu)師等等。

  • 解釋：有了前邊的資深的基礎(chǔ)，自己具備了一定的根基，不管去繼續(xù)深耕還是橫向的擴(kuò)展，你都具備了一定的去遷移的能力。

這么拆分的原因是啥呢？ 一個是筑根基、一個是建高樓 。

根基 ，是為了未來的高樓，不管建什么高樓，總是需要扎實的根基在的。我曾經(jīng)見過一個有了多年經(jīng)驗的同學(xué)寫，事件的綁定和解綁操作，為了處理  this 問題用了 bind ，但是沒有真正理解 bind 的真正含義，也沒有理解事件綁定和解綁的條件限制，做了無用功： on(xx.bind(this));off(xx.bind(this)) 。這就代表了基礎(chǔ)的部分是有問題的，當(dāng)然這里是舉例，如果只是一個基礎(chǔ)點掌握的不牢固還好，那如果是很多基礎(chǔ)都不牢固，將來去做“高樓”：搞庫、搞框架設(shè)計、搞SDK等等，是一定會出問題的。

高樓 ，相對應(yīng)的就是你的長遠(yuǎn)的職業(yè)規(guī)劃，在建高樓的過程中，我們不僅需要低頭一層層的去建，而且需要經(jīng)常抬頭看看，離自己的規(guī)劃多遠(yuǎn)，有沒有跑偏，適當(dāng)休息，多多調(diào)整自己。

那，似乎講了很多，核心目的就是 為了讓大家認(rèn)清自己的規(guī)劃，合理規(guī)劃自己的目標(biāo) 。

怎么做-堅持

怎么做，有沒有方法？當(dāng)然有，但是不管是哪個方法，最核心的也是最難的部分- 堅持 。 最難的就是堅持本身！

我們先做好這個預(yù)期： 讓自己沉下來，耐心些，不浮躁，一步一個腳印 。

這個也是有方法論基礎(chǔ)的：10000小時的刻意練習(xí)理論。 刻意練習(xí) 的最核心是啥？是練習(xí)嗎？不是，最核心的是 刻意 兩個字，刻意代表的是這個過程中除了堅持做之外，還有 思考 ，這個才是我所理解的刻意練習(xí)的核心： 堅持+思考 。

為什么需要這樣一個預(yù)期，回到成長的定義的核心關(guān)鍵點： 過程 。 成長是一個過程，它不是結(jié)果或者最終的目標(biāo)，而是為了目標(biāo)前行的過程 。所以說，一定要 堅持 ，并且要 思考 。

還有另一個關(guān)鍵點，需要深刻的認(rèn)識到： 成長的目標(biāo)對象是自己，所以成長需要靠自己 。當(dāng)然，也不要鉆牛角尖，也需要“ 站在巨人的肩膀上 ”，同時深知“ 師傅領(lǐng)進(jìn)門，修行靠個人 ”。

那扯了這么多，都是我們 堅持 行動之前的 思考 ，是思想層面的。接下來“ 不扯虛的，來點實際的 ”。

我們的日常其實一直都在做業(yè)務(wù)開發(fā)，已經(jīng)這么繁忙了，哪有時間學(xué)習(xí)，讓自己成長？翻譯一下就是： 怎么能夠在業(yè)務(wù)開發(fā)中獲得成長？

個人理解，答案就是： 主動學(xué)習(xí) ，具體的思路就是，由點及面，最終構(gòu)建屬于你自己的專業(yè)體系，建議這個體系是自己做一個腦圖，這個圖是一個面，它由一個個的技能點構(gòu)成（當(dāng)然，技能點本身也是可以是一個面）。

那具體該怎么做呢？我所理解的是， 從你日常工作中所涉及的開始，逐步去輻射 。當(dāng)然，除了我們項目本身，你也需要對社區(qū)保持關(guān)注，有哪些新的東西，只需要了解即可，核心還是自己工作的周邊。接下來結(jié)合前端本身的場景，來看一些實際一點的例子。

首先肯定是對于 基礎(chǔ) 的學(xué)習(xí)，尤其是基礎(chǔ)還不是那么牢固的同學(xué)，那這些基礎(chǔ)哪里來？來自于你的項目。

• 項目

  • 涉及到的知識點，如：

    • 用到了 JavaScript 相關(guān)：變量聲明、Promise、Map、Array、閉包、原型等等，這些可能是 JavaScript 中最基礎(chǔ)的部分：語法、變量、運算、數(shù)據(jù)類型、函數(shù)、對象、事件、作用域、原型、異步、錯誤等等

    • 用到了 BOM、DOM 相關(guān)：window、navigator、元素、屬性、操作等等

    • 用到了 CSS：display、position、overflow 等，那么這些 CSS 基礎(chǔ)：選擇器、層疊、盒模型、文本、顏色、BFC、定位、Flex 布局、層級、編號、過渡、動畫、自定義屬性等等

    • 用到了 HTML：div、span 等，你需要了解：哪些標(biāo)簽、標(biāo)簽的作用是啥、語義是啥、自閉和標(biāo)簽是啥、嵌套規(guī)則是啥 等等

  • 項目架構(gòu)

    • 項目分層是啥樣的：基礎(chǔ)依賴、工程化、SDK、組件庫、構(gòu)建上線或者持續(xù)集成 等等

    • 每層中包含的內(nèi)容：封裝的一些SDK的設(shè)計、細(xì)節(jié)，組件庫中有那些組件、功能是啥，構(gòu)建上線做了什么事情、怎么演化而來的，基礎(chǔ)依賴、框架 Vue、React 以及相關(guān)的周邊生態(tài)了解程度如何

認(rèn)真研究你會發(fā)現(xiàn)，太多太多基礎(chǔ)的東西需要你去花時間和精力掌握他們，這些是根基的部分，需要掌握牢固。研究完這些，你會發(fā)現(xiàn)：原來我們的基礎(chǔ)包中的沉淀，真的是經(jīng)過時間的考驗，慢慢積累的，踩坑踩出來的；框架的形成或者實現(xiàn)本身也是強(qiáng)依賴很多基礎(chǔ)的掌握：數(shù)據(jù)結(jié)構(gòu)、算法、前端基礎(chǔ) 等等。

舉一些例子：

• 對于 url parse 解析場景，是需要考慮到值包含 = 問題的，雖然理論上是應(yīng)該轉(zhuǎn)義的，但是實際場景很多情況下還是沒轉(zhuǎn)義的，如果讓你寫，怎么解決，直接 split 嗎？

• absolute left 50% +  translate -50% 實現(xiàn)水平居中，文字會提早換行？

• 我們內(nèi)部的 Biz DLL 方案，多了請求會不會讓項目初始的請求數(shù)超出6個，怎么上傳 CDN 的，怎么做到使用方無感知的？

• 框架 Vue、React 做了哪些事情，他們背后依賴的知識有哪些（隊列、棧、鏈表、編譯器、DOM 等等）？為什么他們可以大大提升我們的開發(fā)效率，提升項目的可維護(hù)性？

其次是 思考 ，從哪里思考？答案還是你的項目。

• 項目

  • 業(yè)務(wù)產(chǎn)品上的：背景，要解決的問題，哪些收益

  • 設(shè)計交互：完整的流程、交互流暢嗎，成本怎樣，這個步驟可以省略嗎？

  • 技術(shù)上的，如：

    • 這個布局可以有其他實現(xiàn)嗎？這段超長的 if else 邏輯可以優(yōu)化下嗎？這個組件太大了可以拆分下嗎？

    • 技術(shù)分層是啥樣的，這樣有啥好處、有啥壞處？

    • Biz DLL 這個方案又和 webpack 的 Module Federation 的異同是啥？

    • 你用的框架背后的實現(xiàn)，哪些考慮和取舍？

  • 項目流程：前期溝通、需求評審、技術(shù)評審、排期、接口文檔、測試Case評審、提測Show Case、上線、線上回歸、灰度、效果評估等等，為啥有這么長的流程，有啥作用？

  • 項目管理：需求拉齊、日會、周會、風(fēng)險管控、協(xié)作依賴等等，做這些有啥好處，能保障項目如期上線嗎？真的上不了怎么辦？

這些都是源自于你所做的項目。這里邊對于不同階段的同學(xué)，所要抓的重點也不一樣，也就是你要 學(xué)會如何高效學(xué)習(xí) 。

時間精力有限的情況下，怎么高效學(xué)習(xí)，就需要有自己的判斷，抓住重點。對于剛畢業(yè)的同學(xué)或者經(jīng)驗較少的同學(xué)，還是建議把核心的重點放在基礎(chǔ)上，這個也是你去面試的時候一面甚至是二面考察的重點；基礎(chǔ)搞定了，再來看框架、性能、方案。

在 初級階段 ，比較高效的還是看經(jīng)典書籍、看優(yōu)秀視頻、看優(yōu)秀課程，然后和自己的練習(xí)或者項目實踐相結(jié)合，互相印證、互相反哺。這樣既能讓自己掌握基礎(chǔ)知識的全貌，也可以有正確的理解和應(yīng)用，最終可以讓自己的基礎(chǔ)知識是比較系統(tǒng)、比較完整的。

在 高級階段 ，你已經(jīng)對基礎(chǔ)的知識有了一定的掌握，可以去看規(guī)范，閱讀優(yōu)秀的源碼，去負(fù)責(zé)更復(fù)雜的項目，學(xué)會如何拆分、如何設(shè)計、如何協(xié)作、如何解決難題。

自己當(dāng)年為了攻克CSS，去研究了CSS 2.1的規(guī)范，翻譯他們，自己做實驗和demo理解他們，全部完成之后，很多效果和布局，你都能理解背后到底是為啥，而不是一次次的去試，停留在模糊的理解上，換一種場景可能就又實現(xiàn)不了或者不能理解。

這里就不得不重點說下，學(xué)源碼的這件事情，這個是被很多人認(rèn)同和推薦的高效學(xué)習(xí)手段之一，看源碼究竟是為了啥？有什么高效學(xué)習(xí)源碼的辦法嗎？

我們都知道研究源碼是一件十分耗費精力、且枯燥的事情，很容易中途放棄，尤其是針對于一些復(fù)雜的項目的源碼。那我們學(xué)習(xí)源碼的性價比也太低了些，相當(dāng)?shù)?，你花了那么久的時間和精力，到底為了啥，為的是面試？不，終究還是回到自身，為了自己的成長，能夠有所收獲。

我自己定義的源碼研究三個階段： 知其邏輯、體其精粹、融為己用 。更多的時候，大家停留在第一個階段，借助于【The Good Parts】項目就是期望大家能夠往前一步，不求融會貫通，但求更進(jìn)一步的深入思考，可以學(xué)到更多、思考更加深入。甚至于從個人成長的視角出發(fā)，第一個階段能做到的就已經(jīng)很可以了，講實話，但是我們還是要追求性價比，追求學(xué)習(xí)效率。

融為己用 本身的情況太過于量化，需要不斷的實踐，當(dāng)然，這個里邊也是有一個近似的做法：造輪子；這里的造輪子并不是為了讓別人用或者讓團(tuán)隊用，而是自己根據(jù)之前的研究和收獲，從頭做一個完整的輪子來實踐自己的收獲。這里邊也是可以分為兩個階段： 模仿 和 獨立設(shè)計 。

說到研究源碼，最近我們做了 Vue2 的一些源碼分析的文章，會有一些說“落伍了”聲音。這個就是對源碼分析的事情所產(chǎn)生的誤解，我們看源碼、研究源碼的目的不明確，源碼分析是為了研究他們的邏輯？還是為了追求時髦？最最核心的是，我們研究他們是為了學(xué)習(xí)，為了鞏固我們的基礎(chǔ)知識，加深理解，例如隊列、棧、線程、進(jìn)程、閉包、原型等；研究過程中學(xué)習(xí)其拆分、設(shè)計、模式，學(xué)習(xí)其技巧、思路、思想，學(xué)習(xí)其文檔、示例等等。而且，這是你當(dāng)下在你的項目中所用的，你研究了，對你設(shè)計代碼、解決疑難雜癥、性能優(yōu)化、復(fù)雜場景的方案設(shè)計都有極大的好處，性價比很高，解決問題了的同時你也可以獲得滿滿的成就感。不要為了看源碼而看源碼。看源碼一方面是為了知道框架的邏輯，更多的卻是為了鞏固自己的基礎(chǔ)，加深理解，融會貫通。這個也就是相對應(yīng)的三個階段：知其邏輯、體其精粹、融為己用。

在 資深階段 ，是需要自己有一定的架構(gòu)設(shè)計能力的，在高級階段，其實你已經(jīng)有了一些思考了，到了資深階段你需要更系統(tǒng)的去思考問題、思考痛點，怎么去解決他們，慢慢的去培養(yǎng)自己的發(fā)現(xiàn)問題、分析總結(jié)問題、解決問題的能力。從結(jié)果來看，一些沉淀、方案、框架等都是思考而來的。那么我們到底該怎樣去思考呢？

就前端而言，有三大方向需要我們?nèi)ブ攸c解決： 效率、穩(wěn)定性和性能 ，我們可以從這三個方向去做一些思考。舉一些身邊的一些例子：

• 效率角度

  • 組件庫 UI 庫，典型的從效率出發(fā)，實現(xiàn)組件的復(fù)用，提升效率的利器

  • mpx的運行時渲染、mpx-cli@next，就是從效率出發(fā)去思考，怎么樣可以讓小程序開發(fā)更快，做工程化更容易、更快速，這里邊是有很多的思考和取舍的

  • 幫助業(yè)務(wù)更容易投放、更好看清數(shù)據(jù)所做的系統(tǒng)，可以大大提升運營同學(xué)效率

• 穩(wěn)定性角度

  • 構(gòu)建腳本中增加一些check編譯后代碼的能力：如存在ES6代碼、Polyfill問題等等，成功阻止了多次線上事故的發(fā)生

  • 基礎(chǔ)庫、基礎(chǔ)組件庫，做單測，盡量做到高覆蓋率，保障穩(wěn)定性

  • 做自動化測試工具，降低項目回歸成本，同時很好保障穩(wěn)定性

  • 做系統(tǒng)級別仿真環(huán)境，進(jìn)一步保障穩(wěn)定性

• 性能角度

  • Vue 中 v-for 循環(huán)中比較容易帶來性能問題，總結(jié)形成最佳實踐：多循環(huán)下可以使用子組件進(jìn)行空間換時間的優(yōu)化

  • 無限滾動組件，解決大列表情況下性能問題

  • Biz DLL方案，解決兩個性能：構(gòu)建性能和線上運行時加載性能。這個和 webpack 的 Module Federation 所探索的一些方向本質(zhì)上是類似的。

從以上三個大方向去思考：目前項目開發(fā)存在什么樣的問題、哪些痛點，可以是從流程上、規(guī)范、技術(shù)等視角去出方案去解決；當(dāng)然，這些也是建立在你了解你的業(yè)務(wù)、你的項目、項目所用的已有的沉淀、相關(guān)協(xié)作流程、規(guī)范等之后才能有一個更為全面、適配性更好的方案或者解法。這樣就形成了一種持續(xù)進(jìn)化，個人在進(jìn)化，整體團(tuán)隊也在進(jìn)化！

最后，也就是 專家、架構(gòu)師 級別了，如果你能解決多個方向的或者領(lǐng)域的難題，那你絕對已經(jīng)成長為了專家了。

這里有個點就是，我們所說的架構(gòu)師是做啥的？或者說架構(gòu)是為了解決什么事情的？或者架構(gòu)能力究竟指的是啥？個人來看，從技術(shù)視角，這個答案就是： 架構(gòu)師通過設(shè)計架構(gòu)優(yōu)雅地解決現(xiàn)在以及未來復(fù)雜的業(yè)務(wù)技術(shù)問題 。何謂 優(yōu)雅 ： 簡單、可靠、合理 。

總結(jié)

以上，就是自己關(guān)于成長的個人總結(jié)和思考，重點：

• 認(rèn)清：成長是一個過程，目標(biāo)對象是自己

• 態(tài)度：一步一個腳印

• 行動：堅持+思考（不要一直埋頭，也要抬起頭來，看看自己、看看別人、看看社區(qū)、看看世界）

而對于團(tuán)隊而言，我們能做的就是提供一個機(jī)會、規(guī)則或者渠道幫助大家更好、更快地成長，所以我們也才有了【技術(shù)研討會】、【The Good Parts】等類似的項目。借助于這樣的項目以及對應(yīng)的規(guī)則，幫助大家更好的堅持、更深入的思考、也可以認(rèn)識更多志同道合的伙伴，最終成就一個更好的你！