[[421928]]

背景

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

正文

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

What

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

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

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

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

Why

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

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

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

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

How

職業規劃-目標

在探索怎么成長之前，需要有一個基礎，我們的目標是啥，對于程序員而言，你的目標是啥，對于前端而言，你的目標是啥。這個也就是大家日常所講的，你需要有自己的長遠的 職業規劃 。

對于程序員而言，你的職業規劃是哪個：技術專家、架構師、帶團隊、技術管理者、項目管理、業務產品專家等等。當然還可以是轉行，甚至都不在互聯網行業。

如果你還沒有一個長遠的規劃，即長遠的目標，那么就要認真考慮了，這個也是很多同學沒有動力的最核心原因。當然，對于工作經歷較少的同學，可以暫時沒有這個長遠的規劃，但一定要有一個短期的規劃，給自己一個清晰的目標。

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

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

• 技術能力（前端）

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

  • 核心：基礎知識的掌握，一定放在第一位的，如HTML、CSS、JavaScript，常見的數據結構、算法、網絡等。

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

• 綜合能力

  • 技能圖：項目管理、設計交互、溝通協作、owner思維、業務領悟能力、產品能力、帶人能力等等，僅做參考。

  • 核心：理解業務、理解產品、理解設計交互、基本的溝通協作、基本的項目管理。

  • 操作：多觀察、多思考，向優秀的專業同學學習。

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

• 資深研發

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

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

• 職業規劃目標

  • 目標：你所選擇的職業規劃目標，如專家、架構師等等。

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

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

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

高樓 ，相對應的就是你的長遠的職業規劃，在建高樓的過程中，我們不僅需要低頭一層層的去建，而且需要經常抬頭看看，離自己的規劃多遠，有沒有跑偏，適當休息，多多調整自己。

那，似乎講了很多，核心目的就是 為了讓大家認清自己的規劃，合理規劃自己的目標 。

怎么做-堅持

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

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

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

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

還有另一個關鍵點，需要深刻的認識到： 成長的目標對象是自己，所以成長需要靠自己 。當然，也不要鉆牛角尖，也需要“ 站在巨人的肩膀上 ”，同時深知“ 師傅領進門，修行靠個人 ”。

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

我們的日常其實一直都在做業務開發，已經這么繁忙了，哪有時間學習，讓自己成長？翻譯一下就是： 怎么能夠在業務開發中獲得成長？

個人理解，答案就是： 主動學習 ，具體的思路就是，由點及面，最終構建屬于你自己的專業體系，建議這個體系是自己做一個腦圖，這個圖是一個面，它由一個個的技能點構成（當然，技能點本身也是可以是一個面）。

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

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

• 項目

  • 涉及到的知識點，如：

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

    • 用到了 BOM、DOM 相關：window、navigator、元素、屬性、操作等等

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

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

  • 項目架構

    • 項目分層是啥樣的：基礎依賴、工程化、SDK、組件庫、構建上線或者持續集成 等等

    • 每層中包含的內容：封裝的一些SDK的設計、細節，組件庫中有那些組件、功能是啥，構建上線做了什么事情、怎么演化而來的，基礎依賴、框架 Vue、React 以及相關的周邊生態了解程度如何

認真研究你會發現，太多太多基礎的東西需要你去花時間和精力掌握他們，這些是根基的部分，需要掌握牢固。研究完這些，你會發現：原來我們的基礎包中的沉淀，真的是經過時間的考驗，慢慢積累的，踩坑踩出來的；框架的形成或者實現本身也是強依賴很多基礎的掌握：數據結構、算法、前端基礎 等等。

舉一些例子：

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

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

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

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

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

• 項目

  • 業務產品上的：背景，要解決的問題，哪些收益

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

  • 技術上的，如：

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

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

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

    • 你用的框架背后的實現，哪些考慮和取舍？

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

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

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

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

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

在 高級階段 ，你已經對基礎的知識有了一定的掌握，可以去看規范，閱讀優秀的源碼，去負責更復雜的項目，學會如何拆分、如何設計、如何協作、如何解決難題。

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

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

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

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

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

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

在 資深階段 ，是需要自己有一定的架構設計能力的，在高級階段，其實你已經有了一些思考了，到了資深階段你需要更系統的去思考問題、思考痛點，怎么去解決他們，慢慢的去培養自己的發現問題、分析總結問題、解決問題的能力。從結果來看，一些沉淀、方案、框架等都是思考而來的。那么我們到底該怎樣去思考呢？

就前端而言，有三大方向需要我們去重點解決： 效率、穩定性和性能 ，我們可以從這三個方向去做一些思考。舉一些身邊的一些例子：

• 效率角度

  • 組件庫 UI 庫，典型的從效率出發，實現組件的復用，提升效率的利器

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

  • 幫助業務更容易投放、更好看清數據所做的系統，可以大大提升運營同學效率

• 穩定性角度

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

  • 基礎庫、基礎組件庫，做單測，盡量做到高覆蓋率，保障穩定性

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

  • 做系統級別仿真環境，進一步保障穩定性

• 性能角度

  • Vue 中 v-for 循環中比較容易帶來性能問題，總結形成最佳實踐：多循環下可以使用子組件進行空間換時間的優化

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

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

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

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

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

總結

以上，就是自己關于成長的個人總結和思考，重點：

• 認清：成長是一個過程，目標對象是自己

• 態度：一步一個腳印

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

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