以下文章來源於掘金開發者社區，作者晨曦時夢見兮
我曾經一度很迷茫，在學了Vue、React的實戰開發和應用以後，好像遇到了一些瓶頸，不知道該怎樣繼續深入下去。相信這也是很多一兩年經驗的前端工程師所遇到共同問題，這篇文章，筆者想結合自己的一些成長經歷整理出一些路線，幫助各位初中級前端工程師少走一些彎路。
筆者畢業於一個很普通的本科學校，目前開發經驗一共是2年8個月，目前帶一個5人的團隊，前任的組長讓我帶領團隊的主要原因是個人技術 + 溝通能力相對較好，但是在技術能力成長的背後我也走了不少彎路。
這篇文章會提到非常非常多的學習路線和鏈接，如果你還在初中級的階段，不必太焦慮，可以把這篇文章作爲一個進階的路線圖，在未來的時日裏朝着這個方向努力就好。
我也並不是說這篇文章是進階高級工程師的唯一一條路線，如果你在業務上做的精進，亦或是能在溝通上八面玲瓏，配合各方面力量把項目做的漂漂亮亮，那你也一樣可以擁有這個頭銜。本文只是我自己的一個成長路線總結。本篇文章面對的人羣是開發經驗1到3年的初中級前端工程師。
基礎能力
我整理了一篇中級前端的必備技術棧能力，寫給女朋友的中級前端面試祕籍 。這篇文章裏的技術棧當然都是需要紮實掌握的，（其實我自己也有一些漏缺，偷偷補一下）。
當然了，上進心十足的你不會一直滿足於做中級前端，我們要繼續向上，升職加薪，迎娶白富美！
JavaScript
原生js系列
冴羽大佬的這篇博客裏，除了undescore的部分，你需要全部都能掌握。並且靈活的運用到開發中去。
JavaScript深入系列、JavaScript專題系列、ES6系列
完全熟練掌握eventLoop。
tasks-microtasks-queues-and-schedules
Promise
你需要閱讀Promise A+規範，注意其中的細節，並且靈活的運用到開發當中去。
Promise A+ 英文文檔
你需要跟着精品教程手寫一遍Promise，對裏面的細節深入思考，並且把其中異步等待、錯誤處理等等細節融會貫通到你的開發思想裏去。
剖析Promise內部結構，一步一步實現一個完整的、能通過所有Test case的Promise類
最後，對於promise的核心，異步的鏈式調用，你必須能寫出來簡化版的代碼。
最簡實現Promise，支持異步鏈式調用（20行）
題外話，當時精煉這20行真的繞了我好久 ，但是搞明白了會有種恍然大悟的感覺。這種異步隊列的技巧要融會貫通。
async await
對於Promise我們非常熟悉了，進一步延伸到async await，這是目前開發中非常非常常用的異步處理方式，我們最好是熟悉它的babel編譯後的源碼。
手寫async await的最簡實現（20行搞定）
babel對於async await配合generator函數，做的非常巧妙，這裏面的思想我們也要去學習，如何遞歸的處理一個串行的promise鏈？
這個技巧在axios的源碼裏也有應用。平常經常用的攔截器，本質上就是一串promise的串行執行。
當然，如果你還有餘力的話，也可以繼續深入的去看generator函數的babel編譯源碼。不強制要求，畢竟generator函數在開發中已經用的非常少了。
ES6 系列之 Babel 將 Generator 編譯成了什麼樣子
異常處理
你必須精通異步場景下的錯誤處理，這是高級工程師必備的技能，如果開發中的異常被你寫的庫給吞掉了，那豈不是可笑。
Callback Promise Generator Async-Await 和異常處理的演進
插件機制
你需要大概理解前端各個庫中的插件機制是如何實現的，在你自己開發一些庫的時候也能融入自己適合的插件機制。
Koa的洋蔥中間件，Redux的中間件，Axios的攔截器讓你迷惑嗎？實現一個精簡版的就徹底搞懂了。
設計模式
對於一些複雜場景，你的開發不能再是if else嵌套一把梭了，你需要把設計模式好好看一遍，在合適的場景下選擇合適的設計模式。這裏就推薦掘金小冊吧，這個作者的質量我信得過。
JavaScript 設計模式核⼼原理與應⽤實踐
基礎算法
掌握一些基礎算法核心思想或簡單算法問題，比如排序。
開發思想
你需要知道組合優於繼承的思想，不要再滿口都是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”
面嚮對象語言的問題在於它們帶來了所有這些隱含的環境。 你想要一個香蕉，但你得到的是拿着香蕉和整個叢林的大猩猩。
代碼規範
你需要熟讀clean-code-javascript，並且深入結合到日常開發中，結合你們小組的場景制定自己的規範。
clean-code-javascript
框架篇
對於高級工程師來說，你必須要有一個你趁手的框架，它就像你手中的一把利劍，能夠讓你披荊斬棘，斬殺各種項目於馬下。
下面我會分爲Vue和React兩個方面深入去講。
Vue
Vue方面的話，我主要是師從黃軼老師，跟着他認真走，基本上在Vue這方面你可以做到基本無敵。
熟練運用
對於Vue你必須非常熟練的運用，官網的api你基本上要全部過一遍。並且你要利用一些高級的api去實現巧妙的封裝。舉幾個簡單的例子。
你要知道怎麼用slot-scope去做一些數據和ui分離的封裝。
以vue-promised這個庫爲例。
Promised組件並不關注你的視圖展示成什麼樣，它只是幫你管理異步流程，並且通過你傳入的slot-scope，在合適的時機把數據回拋給你，並且幫你去展示你傳入的視圖。
<template>
<Promised :promise="usersPromise">
<!-- Use the "pending" slot to display a loading message -->
<template v-slot:pending>
<p>Loading...</p>
</template>
<!-- The default scoped slot will be used as the result -->
<template v-slot="data">
<ul>
<li v-for="user in data">{{ user.name }}</li>
</ul>
</template>
<!-- The "rejected" scoped slot will be used if there is an error -->
<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來編寫你項目中的複雜組件了，比如在我的網易雲音樂項目中，我遇到了一個複雜的音樂表格需求，支持搜索文字高亮、動態隱藏列等等。
當然對於現在版本的Vue，JSX還是不太好用，有很多屬性需要寫嵌套對象，這會造成很多不必要的麻煩，比如沒辦法像React一樣直接把外層組件傳入的props透傳下去，Vue3的rfc中提到會把vnode節點的屬性進一步扁平化，我們期待得到接近於React的完美JSX開發體驗吧。
const tableAttrs = {
attrs,
on: {
...this.$listeners,
["row-click"]: this.onRowClick,
},
props: {
...props,
headerCellClassName: "title-th",
cellClassName: this.tableCellClassName,
data: this.songs,
},
}
你要能理解Vue中的高階組件。關於這篇文章中爲什麼slot-scope不生效的問題，你不能於他的講解一頭霧水。（需要你具備源碼知識）
https://segmentfault.com/p/1210000012743259/read
對於Vuex和vue-router的使用必須非常熟練，知道什麼時候該用Vuex，什麼需求需要利用什麼樣的router鉤子，這樣才能hold住一個大型的項目，這個我覺得還是儘量去學源碼吧。
源碼深入
你不光要熟練運用Vue，由於Vue的源碼寫的非常精美，而且閱讀難度不是非常大，很多人也選擇去閱讀Vue的源碼。這裏推薦黃軼老師的Vue源碼課程。這裏也包括了Vuex和vue-router的源碼。
Vue.js源碼全方位深入解析 （含Vue3.0源碼分析）
推薦HcySunYang大佬的Vue逐行分析，需要下載git倉庫，切到elegant分支自己本地啓動。
Vue逐行級別的源碼分析
當然，這個倉庫的master分支也是寶藏，是這個作者的渲染器系列文章，脫離框架講解了vnode和diff算法的本質
組件的本質
Vue3源碼
不要臉的先推一篇自己的文章吧，細緻了講解了Vue3響應式的核心流程。
帶你徹底搞懂Vue3的Proxy響應式原理！TypeScript從零實現基於Proxy的響應式庫。
帶你徹底搞懂Vue3的Proxy響應式原理！基於函數劫持實現Map和Set的響應式
深度解析：Vue3如何巧妙的實現強大的computed
React
React已經進入了Hook爲主的階段，社區的各個庫也都在積極擁抱Hook，雖然它還有很多陷阱和不足，但是這基本上是未來的方向沒跑了。這篇文章裏我會減少class組件的開發技巧的提及，畢竟好多不錯的公司也已經全面擁抱Hook了。
熟練應用
你必須掌握官網中提到的所有技巧，就算沒有使用過，你也要大概知道該在什麼場景使用。
深入理解React中的key
understanding-reacts-key-prop
React Hook
你必須熟練掌握Hook的技巧，除了官網文檔熟讀以外：
推薦Dan的博客，他就是Hook的代碼實際編寫者之一，看他怎麼說夠權威了吧？這裏貼心的送上漢化版。
useEffect 完整指南
看完這篇以後，進入dan的博客主頁，找出所有和Hook有關的，全部精讀！
推薦阿里大佬的精讀週刊系列
096.精讀《useEffect 完全指南》.md
注意！不是隻看這一篇，而是這個倉庫裏所有有關於React Hook的文章都去看一遍，結合自己的思想分析。
Hook陷阱系列
還是Dan老哥的文章，詳細的講清楚了所謂閉包陷阱產生的原因和設計中的權衡。
函數式組件與類組件有何不同？
去找一些社區的精品自定義hook，看看他們的開發和設計思路，有沒有能融入自己的日常開發中去的。
精讀《Hooks 取數 - swr 源碼》
Umi Hooks - 助力擁抱 React Hooks
React Hooks的體系設計之一 - 分層
React性能優化
React中優化組件重渲染，這裏有幾個隱含的知識點。
optimize-react-re-renders
React單元測試
使用’@testing-library/react’測試組件，這個庫相比起enzyme更好的原因在於，它更注重於站在用戶的角度去測試一個組件，而不是測試這個組件的實現細節。
introducing-the-react-testing-library
Testing Implementation Details
使用@testing-library/react-hooks測試自定義Hook
how-to-test-custom-react-hooks
React和TypeScript結合使用
這個倉庫非常詳細的介紹瞭如何把React和TypeScript結合，並且給出了一些進階用法的示例，非常值得過一遍！
react-typescript-cheatsheet
這篇文章是螞蟻金服數據體驗技術部的同學帶來的，其實除了這裏面的技術文章以外，螞蟻金服的同學也由非常生動給我們講解了一個高級前端同學是如何去社區尋找方案，如何思考和落地到項目中的，由衷的佩服。
React + Typescript 工程化治理實踐
微軟的大佬帶你寫一個類型安全的組件，非常深入，非常過癮…
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)
React + TypeScript 10個需要避免的錯誤模式。
10-typescript-pro-tips-patterns-with-or-without-react
React代碼抽象思考
何時應該把代碼拆分爲組件？
when-to-break-up-a-component-into-multiple-components
仔細思考你的React應用中，狀態應該放在什麼位置，是組件自身，提升到父組件，亦或是局部context和redux，這會有益於提升應用的性能和可維護性。
state-colocation-will-make-your-react-app-faster
仔細思考React組件中的狀態應該如何管理，優先使用派生狀態，並且在適當的時候利用useMemo、reselect等庫去優化他們。
dont-sync-state-derive-it
React Hooks的自定義hook中，如何利用reducer的模式提供更加靈活的數據管理，讓用戶擁有數據的控制權。
the-state-reducer-pattern-with-react-hooks
代碼質量
在項目中集成Prettier + ESLint + Airbnb Style Guide
integrating-prettier-eslint-airbnb-style-guide-in-vscode
在項目中集成ESLint with Prettier, TypeScript
如何重構一個過萬Star開源項—BetterScroll，是由滴滴的大佬嵇智所帶來的，無獨有偶的是，這篇文章除了詳細的介紹一個合格的開源項目應該做到的代碼質量保證，測試流程，持續集成流程以外，也體現了他的一些思考深度，非常值得學習。
如何重構一個過萬Star開源項目—BetterScroll
構建工具
webpack基礎和優化
深入淺出webpack
滴滴前端工程師的webpack深入源碼分析系列，非常的優秀。
webpack系列之一總覽
社區討論
作爲一個合格的前端工程師，一定要積極的深入社區去了解最新的動向，比如在twitter上關注你喜歡的技術開發人員，如Dan、尤雨溪。
另外Github上的很多issue也是寶藏討論，我就以最近我對於Vue3的學習簡單的舉幾個例子。
尤雨溪解釋關於爲什麼在Vue3中不加入React時間切片功能？並且詳細的分析了React和Vue3之間的一些細節差別，狠狠的吹了一波Vue3（愛了愛了）。
Why remove time slicing from vue3?
Vue3的functional-api相關的rfc，尤大舌戰羣儒，深入淺出的爲大家講解了Vue3的設計思路等等。
Amendment proposal to Function-based Component API
vue-composition-api的rfc文檔，在國內資料還不齊全的情況下，我去閱讀了
vue-composition-api-rfc 英文版文檔，對於裏面的設計思路歎爲觀止，學到了非常非常多尤大的思想。
總之，對於你喜歡的倉庫，都可以去看看它的issue有沒有看起來感興趣的討論，你也會學到非常多的東西。並且你可以和作者保持思路上的同步，這是非常難得的一件事情。
我在狠狠的吸收了一波尤大對於Vue3 composition-api的設計思路的講解，新舊模式的對比以後，這篇文章就是我對Vue3新模式的一些見解。
Vue3 Composition-Api + TypeScript + 新型狀態管理模式探索。
並且由於它和React Hook在很多方面的思想也非常相近，這甚至對於我在React Hook上的使用也大有裨益，比如代碼組織的思路上,
爲什麼Logical Concerns 優於Vue2和React Class Component的Option Types？看完detailed-design這個章節你就全部明白了，並且這會融入到你日常開發中去。
學習方法的轉變
從初中級前端開始往高級前端進階，有一個很重要的點，就是很多情況下國內社區能找到的資料已經不夠用了，而且有很多優質資料也是從國外社區二手、三手翻譯過來的，翻譯質量也不能保證。
這就引申出我們進階的第一個點，開始接受英文資料。
這裏很多同學說，我的英文能力不行啊，看不懂。其實我想說，筆者的英語能力也很一般，從去年開始我立了個目標，就是帶着劃詞翻譯插件也要開始艱難的看英文文章和資料，遇到不懂的單詞就劃出來看兩眼（沒有刻意去背），第五六次遇見這個單詞的時候，就差不多記得它是什麼意思了。
半年左右的時間下來，（大概保持每週3篇以上的閱讀量）能肉眼可見的感覺自己的英語能力在進步，很多時候不用劃詞翻譯插件，也可以完整的閱讀下來一段文章。
這裏是我當時閱讀英文優質文章的一些記錄，
英文技術文章閱讀
後面英文閱讀慢慢成了一件比較自然的事情，也就沒有再刻意去記錄，前期可以用這種方式激勵自己。
推薦兩個英文站點吧，有很多高質量的前端文章。
dev.to
medium
medium可能需要藉助一些科學工具才能查看，但是裏面的會員付費以及作者激勵機制使得文章非常的優質。登錄自己的谷歌賬號即可成爲會員，前期可能首頁不會推薦一些前端相關的文章，你可以自己去搜索關鍵字如Vue、React、Webpack，任何你興趣的前端技術棧，不需要過多久你的首頁就會出現前端的推薦內容。好好享受這個高質量的英文社區吧。
點此鏈接：自己是一名從事了多年開發的web前端老程序員，今年年初我花了一個月整理了一份最適合2020年學習的前端學習乾貨，想分享給每一位喜歡前端的小夥伴接描述
總結
本篇文章是我在這一年多的學習經歷抽象中總結出來，還有很多東西我會陸續加入到這篇文章中去。
希望作爲初中級前端工程師的你，能夠有所收穫。如果能夠幫助到你就是我最大的滿足。