寫給初中級前端的高級進階指南（萬字長文，路線明確）

我曾經(jīng)一度很迷茫，在學了Vue、React的實戰(zhàn)開發(fā)和應用以后，好像遇到了一些瓶頸，不知道該怎樣繼續(xù)深入下去。相信這也是很多一兩年經(jīng)驗的前端工程師所遇到共同問題，這篇文章，筆者想結(jié)合自己的一些成長經(jīng)歷整理出一些路線，幫助各位初中級前端工程師少走一些彎路。

筆者畢業(yè)于一個很普通的本科學校，目前開發(fā)經(jīng)驗一共是2年8個月，目前帶一個5人的團隊，前任的組長讓我?guī)ьI(lǐng)團隊的主要原因是個人技術(shù) + 溝通能力相對較好，但是在技術(shù)能力成長的背后我也走了不少彎路。

這篇文章會提到非常非常多的學習路線和鏈接，如果你還在初中級的階段，不必太焦慮，可以把這篇文章作為一個進階的路線圖，在未來的時日里朝著這個方向努力就好。
我也并不是說這篇文章是進階高級工程師的唯一一條路線，如果你在業(yè)務上做的精進，亦或是能在溝通上八面玲瓏，配合各方面力量把項目做的漂漂亮亮，那你也一樣可以擁有這個頭銜。本文只是我自己的一個成長路線總結(jié)。

本篇文章面對的人群是開發(fā)經(jīng)驗1到3年的初中級前端工程師，已經(jīng)晉升高級前端的同學，歡迎你在評論區(qū)留下你的心得，補充我的一些缺失和不足。

基礎(chǔ)能力

我整理了一篇中級前端的必備技術(shù)棧能力，寫給女朋友的中級前端面試秘籍?。這篇文章里的技術(shù)棧當然都是需要扎實掌握的，（其實我自己也有一些漏缺，偷偷補一下）。

當然了，上進心十足的你不會一直滿足于做中級前端，我們要繼續(xù)向上，升職加薪，迎娶白富美！

JavaScript

原生js系列

冴羽大佬的這篇博客里，除了undescore的部分，你需要全部都能掌握。并且靈活的運用到開發(fā)中去。
JavaScript深入系列、JavaScript專題系列、ES6系列

完全熟練掌握eventLoop。

tasks-microtasks-queues-and-schedules

Promise

1. 你需要閱讀Promise A+規(guī)范，注意其中的細節(jié)，并且靈活的運用到開發(fā)當中去。
   Promise A+ 英文文檔

2. 你需要跟著精品教程手寫一遍Promise，對里面的細節(jié)深入思考，并且把其中異步等待、錯誤處理等等細節(jié)融會貫通到你的開發(fā)思想里去。
   剖析Promise內(nèi)部結(jié)構(gòu)，一步一步實現(xiàn)一個完整的、能通過所有Test case的Promise類

3. 最后，對于promise的核心，異步的鏈式調(diào)用，你必須能寫出來簡化版的代碼。
   最簡實現(xiàn)Promise，支持異步鏈式調(diào)用（20行）

題外話，當時精煉這20行真的繞了我好久?，但是搞明白了會有種恍然大悟的感覺。這種異步隊列的技巧要融會貫通。

async await

對于Promise我們非常熟悉了，進一步延伸到async await，這是目前開發(fā)中非常非常常用的異步處理方式，我們最好是熟悉它的babel編譯后的源碼。

手寫async await的最簡實現(xiàn)（20行搞定）
babel對于async await配合generator函數(shù)，做的非常巧妙，這里面的思想我們也要去學習，如何遞歸的處理一個串行的promise鏈？

這個技巧在axios的源碼里也有應用。平常經(jīng)常用的攔截器，本質(zhì)上就是一串promise的串行執(zhí)行。

當然，如果你還有余力的話，也可以繼續(xù)深入的去看generator函數(shù)的babel編譯源碼。不強制要求，畢竟generator函數(shù)在開發(fā)中已經(jīng)用的非常少了。
ES6 系列之 Babel 將 Generator 編譯成了什么樣子

異常處理

你必須精通異步場景下的錯誤處理，這是高級工程師必備的技能，如果開發(fā)中的異常被你寫的庫給吞掉了，那豈不是可笑。
Callback Promise Generator Async-Await 和異常處理的演進

插件機制

你需要大概理解前端各個庫中的插件機制是如何實現(xiàn)的，在你自己開發(fā)一些庫的時候也能融入自己適合的插件機制。
Koa的洋蔥中間件，Redux的中間件，Axios的攔截器讓你迷惑嗎？實現(xiàn)一個精簡版的就徹底搞懂了。

設計模式

對于一些復雜場景，你的開發(fā)不能再是if else嵌套一把梭了，你需要把設計模式好好看一遍，在合適的場景下選擇合適的設計模式。這里就推薦掘金小冊吧，這個作者的質(zhì)量我信得過。
JavaScript 設計模式核?原理與應?實踐

基礎(chǔ)算法

掌握一些基礎(chǔ)算法核心思想或簡單算法問題，比如排序。

開發(fā)思想

你需要知道組合優(yōu)于繼承的思想，不要再滿口都是oop，寫什么都來個class extends了，在前端ui扁平化的前提下，真的沒那么多需要繼承的場景。
https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9

“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work”

面向?qū)ο笳Z言的問題在于它們帶來了所有這些隱含的環(huán)境。
你想要一個香蕉，但你得到的是拿著香蕉和整個叢林的大猩猩。

代碼規(guī)范

你需要熟讀clean-code-javascript，并且深入結(jié)合到日常開發(fā)中，結(jié)合你們小組的場景制定自己的規(guī)范。
clean-code-javascript

框架篇

對于高級工程師來說，你必須要有一個你趁手的框架，它就像你手中的一把利劍，能夠讓你披荊斬棘，斬殺各種項目于馬下。

下面我會分為Vue和React兩個方面深入去講。

Vue

Vue方面的話，我主要是師從黃軼老師，跟著他認真走，基本上在Vue這方面你可以做到基本無敵。

熟練運用

對于Vue你必須非常熟練的運用，官網(wǎng)的api你基本上要全部過一遍。并且你要利用一些高級的api去實現(xiàn)巧妙的封裝。舉幾個簡單的例子。

1. 你要知道怎么用slot-scope去做一些數(shù)據(jù)和ui分離的封裝。
   以vue-promised這個庫為例。
   Promised組件并不關(guān)注你的視圖展示成什么樣，它只是幫你管理異步流程，并且通過你傳入的slot-scope，在合適的時機把數(shù)據(jù)回拋給你，并且?guī)湍闳フ故灸銈魅氲囊晥D。

<template>
??<Promised?:promise="usersPromise">
????
????<template?v-slot:pending>
??????<p>Loading...p>
????template>
????
????<template?v-slot="data">
??????<ul>
????????<li?v-for="user?in?data">{{?user.name?}}li>
??????ul>
????template>
????
????<template?v-slot:rejected="error">
??????<p>Error:?{{?error.message?}}p>
????template>
??Promised>
template>

2. 你需要熟練的使用Vue.extends，配合項目做一些命令式api的封裝。并且知道它為什么可以這樣用。（需要具備源碼知識）
   confirm組件

export?const?confirm?=?function(text,?title,?onConfirm?=?()?=>?{})?{
??if?(typeof?title?===?"function")?{
????onConfirm?=?title
????title?=?undefined
??}
??const?ConfirmCtor?=?Vue.extend(Confirm)
??const?getInstance?=?()?=>?{
????if?(!instanceCache)?{
??????instanceCache?=?new?ConfirmCtor({
????????propsData:?{
??????????text,
??????????title,
??????????onConfirm
????????}
??????})
??????//?生成dom
??????instanceCache.$mount()
??????document.body.appendChild(instanceCache.$el)
????}?else?{
??????//?更新屬性
??????instanceCache.text?=?text
??????instanceCache.title?=?title
??????instanceCache.onConfirm?=?onConfirm
????}
????return?instanceCache
??}
??const?instance?=?getInstance()
??//?確保更新的prop渲染到dom
??//?確保動畫效果
??Vue.nextTick(()?=>?{
????instance.visible?=?true
??})
}

3. 你要開始使用JSX來編寫你項目中的復雜組件了，比如在我的網(wǎng)易云音樂項目中，我遇到了一個復雜的音樂表格需求，支持搜索文字高亮、動態(tài)隱藏列等等。
   當然對于現(xiàn)在版本的Vue，JSX還是不太好用，有很多屬性需要寫嵌套對象，這會造成很多不必要的麻煩，比如沒辦法像React一樣直接把外層組件傳入的props透傳下去，Vue3的rfc中提到會把vnode節(jié)點的屬性進一步扁平化，我們期待得到接近于React的完美JSX開發(fā)體驗吧。

????const?tableAttrs?=?{
??????attrs,
??????on:?{
????????...this.$listeners,
????????["row-click"]:?this.onRowClick,
??????},
??????props:?{
????????...props,
????????headerCellClassName:?"title-th",
????????cellClassName:?this.tableCellClassName,
????????data:?this.songs,
??????},
????}

4. 你要能理解Vue中的高階組件。關(guān)于這篇文章中為什么slot-scope不生效的問題，你不能于他的講解一頭霧水。（需要你具備源碼知識）
   https://segmentfault.com/p/1210000012743259/read

5. 對于Vuex和vue-router的使用必須非常熟練，知道什么時候該用Vuex，什么需求需要利用什么樣的router鉤子，這樣才能hold住一個大型的項目，這個我覺得還是盡量去學源碼吧。

源碼深入

1. 你不光要熟練運用Vue，由于Vue的源碼寫的非常精美，而且閱讀難度不是非常大，很多人也選擇去閱讀Vue的源碼。這里推薦黃軼老師的Vue源碼課程。這里也包括了Vuex和vue-router的源碼。
   Vue.js源碼全方位深入解析 （含Vue3.0源碼分析）

2. 推薦HcySunYang大佬的Vue逐行分析，需要下載git倉庫，切到elegant分支自己本地啟動。
   Vue逐行級別的源碼分析

3. 當然，這個倉庫的master分支也是寶藏，是這個作者的渲染器系列文章，脫離框架講解了vnode和diff算法的本質(zhì)
   組件的本質(zhì)

Vue3源碼

1. 不要臉的先推一篇自己的文章吧，細致了講解了Vue3響應式的核心流程。
   帶你徹底搞懂Vue3的Proxy響應式原理！TypeScript從零實現(xiàn)基于Proxy的響應式庫。

2. 帶你徹底搞懂Vue3的Proxy響應式原理！基于函數(shù)劫持實現(xiàn)Map和Set的響應式

3. 深度解析：Vue3如何巧妙的實現(xiàn)強大的computed

React

React已經(jīng)進入了Hook為主的階段，社區(qū)的各個庫也都在積極擁抱Hook，雖然它還有很多陷阱和不足，但是這基本上是未來的方向沒跑了。這篇文章里我會減少class組件的開發(fā)技巧的提及，畢竟好多不錯的公司也已經(jīng)全面擁抱Hook了。

熟練應用

你必須掌握官網(wǎng)中提到的所有技巧，就算沒有使用過，你也要大概知道該在什么場景使用。

1. 深入理解React中的key
   understanding-reacts-key-prop

React Hook

你必須熟練掌握Hook的技巧，除了官網(wǎng)文檔熟讀以外：

1. 推薦Dan的博客，他就是Hook的代碼實際編寫者之一，看他怎么說夠權(quán)威了吧？這里貼心的送上漢化版。
   useEffect 完整指南
   看完這篇以后，進入dan的博客主頁，找出所有和Hook有關(guān)的，全部精讀！

2. 推薦阿里大佬的精讀周刊系列
   096.精讀《useEffect 完全指南》.md
   注意！不是只看這一篇，而是這個倉庫里所有有關(guān)于React Hook的文章都去看一遍，結(jié)合自己的思想分析。

3. Hook陷阱系列
   還是Dan老哥的文章，詳細的講清楚了所謂閉包陷阱產(chǎn)生的原因和設計中的權(quán)衡。
   函數(shù)式組件與類組件有何不同？

4. 去找一些社區(qū)的精品自定義hook，看看他們的開發(fā)和設計思路，有沒有能融入自己的日常開發(fā)中去的。
   精讀《Hooks 取數(shù) - swr 源碼》
   Umi Hooks - 助力擁抱 React Hooks
   React Hooks的體系設計之一 - 分層

React性能優(yōu)化

React中優(yōu)化組件重渲染，這里有幾個隱含的知識點。
optimize-react-re-renders

React單元測試

1. 使用'@testing-library/react'測試組件，這個庫相比起enzyme更好的原因在于，它更注重于站在用戶的角度去測試一個組件，而不是測試這個組件的實現(xiàn)細節(jié)。

1. introducing-the-react-testing-library

2. Testing Implementation Details

2. 使用@testing-library/react-hooks測試自定義Hook
   how-to-test-custom-react-hooks

React和TypeScript結(jié)合使用

1. 這個倉庫非常詳細的介紹了如何把React和TypeScript結(jié)合，并且給出了一些進階用法的示例，非常值得過一遍！
   react-typescript-cheatsheet

2. 這篇文章是螞蟻金服數(shù)據(jù)體驗技術(shù)部的同學帶來的，其實除了這里面的技術(shù)文章以外，螞蟻金服的同學也由非常生動給我們講解了一個高級前端同學是如何去社區(qū)尋找方案，如何思考和落地到項目中的，由衷的佩服。
   React + Typescript 工程化治理實踐

3. 微軟的大佬帶你寫一個類型安全的組件，非常深入，非常過癮…
   Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)

4. React + TypeScript 10個需要避免的錯誤模式。
   10-typescript-pro-tips-patterns-with-or-without-react

React代碼抽象思考

1. 何時應該把代碼拆分為組件？
   when-to-break-up-a-component-into-multiple-components

2. 仔細思考你的React應用中，狀態(tài)應該放在什么位置，是組件自身，提升到父組件，亦或是局部context和redux，這會有益于提升應用的性能和可維護性。
   state-colocation-will-make-your-react-app-faster

3. 仔細思考React組件中的狀態(tài)應該如何管理，優(yōu)先使用派生狀態(tài)，并且在適當?shù)臅r候利用useMemo、reselect等庫去優(yōu)化他們。
   dont-sync-state-derive-it

4. React Hooks的自定義hook中，如何利用reducer的模式提供更加靈活的數(shù)據(jù)管理，讓用戶擁有數(shù)據(jù)的控制權(quán)。
   the-state-reducer-pattern-with-react-hooks

代碼質(zhì)量

1. 在項目中集成Prettier + ESLint + Airbnb Style Guide
   integrating-prettier-eslint-airbnb-style-guide-in-vscode

2. 在項目中集成ESLint with Prettier, TypeScript

3. 如何重構(gòu)一個過萬Star開源項—BetterScroll，是由滴滴的大佬嵇智所帶來的，無獨有偶的是，這篇文章除了詳細的介紹一個合格的開源項目應該做到的代碼質(zhì)量保證，測試流程，持續(xù)集成流程以外，也體現(xiàn)了他的一些思考深度，非常值得學習。
   如何重構(gòu)一個過萬Star開源項目—BetterScroll

構(gòu)建工具

1. webpack基礎(chǔ)和優(yōu)化
   深入淺出webpack

2. 滴滴前端工程師的webpack深入源碼分析系列，非常的優(yōu)秀。
   webpack系列之一總覽

社區(qū)討論

作為一個合格的前端工程師，一定要積極的深入社區(qū)去了解最新的動向，比如在twitter上關(guān)注你喜歡的技術(shù)開發(fā)人員，如Dan、尤雨溪。

另外Github上的很多issue也是寶藏討論，我就以最近我對于Vue3的學習簡單的舉幾個例子。

1. 尤雨溪解釋關(guān)于為什么在Vue3中不加入React時間切片功能？并且詳細的分析了React和Vue3之間的一些細節(jié)差別，狠狠的吹了一波Vue3（愛了愛了）。
   Why remove time slicing from vue3?

2. Vue3的functional-api相關(guān)的rfc，尤大舌戰(zhàn)群儒，深入淺出的為大家講解了Vue3的設計思路等等。
   Amendment proposal to Function-based Component API

3. vue-composition-api的rfc文檔，在國內(nèi)資料還不齊全的情況下，我去閱讀了
   vue-composition-api-rfc 英文版文檔，對于里面的設計思路嘆為觀止，學到了非常非常多尤大的思想。

總之，對于你喜歡的倉庫，都可以去看看它的issue有沒有看起來感興趣的討論，你也會學到非常多的東西。并且你可以和作者保持思路上的同步，這是非常難得的一件事情。

我在狠狠的吸收了一波尤大對于Vue3?composition-api的設計思路的講解，新舊模式的對比以后，這篇文章就是我對Vue3新模式的一些見解。
Vue3 Composition-Api + TypeScript + 新型狀態(tài)管理模式探索。

并且由于它和React Hook在很多方面的思想也非常相近，這甚至對于我在React Hook上的使用也大有裨益，比如代碼組織的思路上,

為什么Logical Concerns 優(yōu)于Vue2和React Class Component的Option Types？看完detailed-design這個章節(jié)你就全部明白了，并且這會融入到你日常開發(fā)中去。

學習方法的轉(zhuǎn)變

從初中級前端開始往高級前端進階，有一個很重要的點，就是很多情況下國內(nèi)社區(qū)能找到的資料已經(jīng)不夠用了，而且有很多優(yōu)質(zhì)資料也是從國外社區(qū)二手、三手翻譯過來的，翻譯質(zhì)量也不能保證。

這就引申出我們進階的第一個點，開始接受英文資料。

這里很多同學說，我的英文能力不行啊，看不懂。其實我想說，筆者的英語能力也很一般，從去年開始我立了個目標，就是帶著劃詞翻譯插件也要開始艱難的看英文文章和資料，遇到不懂的單詞就劃出來看兩眼（沒有刻意去背），第五六次遇見這個單詞的時候，就差不多記得它是什么意思了。

半年左右的時間下來，（大概保持每周3篇以上的閱讀量）能肉眼可見的感覺自己的英語能力在進步，很多時候不用劃詞翻譯插件，也可以完整的閱讀下來一段文章。

這里是我當時閱讀英文優(yōu)質(zhì)文章的一些記錄，

英文技術(shù)文章閱讀

后面英文閱讀慢慢成了一件比較自然的事情，也就沒有再刻意去記錄，前期可以用這種方式激勵自己。

推薦兩個英文站點吧，有很多高質(zhì)量的前端文章。

dev.to
medium

medium可能需要借助一些科學工具才能查看，但是里面的會員付費以及作者激勵機制使得文章非常的優(yōu)質(zhì)。登錄自己的谷歌賬號即可成為會員，前期可能首頁不會推薦一些前端相關(guān)的文章，你可以自己去搜索關(guān)鍵字如Vue、React、Webpack，任何你興趣的前端技術(shù)棧，不需要過多久你的首頁就會出現(xiàn)前端的推薦內(nèi)容。好好享受這個高質(zhì)量的英文社區(qū)吧。

總結(jié)

本篇文章是我在這一年多的學習經(jīng)歷抽象中總結(jié)出來，還有很多東西我會陸續(xù)加入到這篇文章中去。

希望作為初中級前端工程師的你，能夠有所收獲。如果能夠幫助到你就是我最大的滿足。

最后

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：

1. 點個「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點在看，都是耍流氓 -_-）

2. 歡迎加我微信「qianyu443033099」拉你進技術(shù)群，長期交流學習...

3. 關(guān)注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。

點個在看支持我吧，轉(zhuǎn)發(fā)就更好了