大家好，我是若川。最近組織了源碼共讀活動。每周讀 200 行左右的源碼。很多第一次讀源碼的小伙伴都感覺很有收獲，感興趣可以加我微信ruochuan12，拉你進群學習。

---

前言

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

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

本篇文章面對的人群是開發經驗1到3年的初中級前端工程師，希望能和你們交個心。

已經晉升高級前端的同學，歡迎你在評論區留下你的心得，補充我的一些缺失和不足。

筆者本人 17 年畢業于一所普通的本科學校，20 年 6 月在三年經驗的時候順利通過面試進入大廠，職級是高級前端開發。

我的 github 地址^[1]，歡迎 follow，我會持續更新一些值得你關注的項目。

我的 blog 地址^[2]，這里會持續更新，點個 star 不失聯！?

基礎能力

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

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

JavaScript

原生 js 系列

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

完全熟練掌握 eventLoop。

tasks-microtasks-queues-and-schedules^[5]

Promise

1. 你需要閱讀 Promise A+規范，注意其中的細節，并且靈活的運用到開發當中去。
   Promise A+ 英文文檔^[6]

2. 你需要跟著精品教程手寫一遍 Promise，對里面的細節深入思考，并且把其中異步等待、錯誤處理等等細節融會貫通到你的開發思想里去。
   剖析 Promise 內部結構，一步一步實現一個完整的、能通過所有 Test case 的 Promise 類^[7]

3. 最后，對于 promise 的核心，異步的鏈式調用，你必須能寫出來簡化版的代碼。
   最簡實現 Promise，支持異步鏈式調用（20 行）^[8]

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

async await

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

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

這個技巧在axios 的源碼^[10]里也有應用。平常經常用的攔截器，本質上就是一串 promise 的串行執行。

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

異常處理

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

插件機制

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

設計模式

對于一些復雜場景，你的開發不能再是if else嵌套一把梭了，你需要把設計模式好好看一遍，在合適的場景下選擇合適的設計模式。這里就推薦掘金小冊吧，相信這篇小冊會讓你的工程能力得到質的飛躍，舉例來說，在 Vue 的源碼中就用到了觀察者模式、發布訂閱模式、策略模式、適配器模式、發布訂閱模式、工廠模式、組合模式、代理模式、門面模式等等。

而這些設計模式如果你沒學習過可能很難想到如何應用在工程之中，但是如果你學習過，它就變成了你內在的工程能力，往大了說，也可以是架構能力的一部分。

在《設計模式》這本小冊中我們提到過，即使是在瞬息萬變的前端領域，也存在一些具備“一次學習，終生受用”特性的知識。從工程的角度看，我推薦大家著重學習的是設計模式。-修言

這里推薦掘金修言的設計模式小冊^[14]。

基礎算法

算法這里推薦慕課網 bobo 老師的 LeetCode 真題課程^[15]，在這個課程里算法大牛 bobo 老師會非常細心的給你講解各種分類的 LeetCode 真題。

由于這門課程是 C++ 為主要語言的（不影響理解課程），我也針對此課程維護了一個對應的 JavaScript 版題解倉庫^[16]，在 Issue 里也根據標簽分類整理了各個題型的講解，歡迎 Star ?。

算法對于前端來說重要嗎？也許你覺得做題沒用，但是我個人在做題后并且分門別類的整理好各個題型的思路和解法后，是能真切的感覺到自己的代碼能力在飛速提高的。

對于很多覺得自己不夠聰明，不敢去學習算法的同學來說，推薦 bobo 老師的這篇《天生不聰明》，也正是這篇文章激勵我開始了算法學習的旅程。

開發思想

有時候組合是優于繼承的，不光是面向對象編程可以實現復用，在某些場景下，組合的思想可能會更加簡潔優雅。

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^[17]

框架篇

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

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

Vue

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

熟練運用

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

2. 你要知道怎么用slot-scope去做一些數據和 ui 分離的封裝。以vue-promised^[18]這個庫為例。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>

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

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,},});//?生成dominstanceCache.$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;});
};

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

2. 你要深入了解 Vue 中 nextTick 的原理，并且知道為什么要用微任務隊列優于宏任務隊列，結合你的 eventloop 知識深度思考。最后融入到你的異步合并優化的知識體系中去。
   Vue 源碼詳解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！^[21]

3. 你要能理解 Vue 中的高階組件。關于這篇文章中為什么 slot-scope 不生效的問題，你不能看他的文章講解都一頭霧水。（需要你具備源碼知識）
   探索 Vue 高階組件 | HcySunYang^[22]

4. 推薦一下我自己總結的 Vue 高階組件文章，里面涉及到了一些進階的用法。
   Vue 進階必學之高階組件 HOC^[23]

5. 對于 Vuex 的使用必須非常熟練，知道什么時候該用 Vuex，知道怎么根據需求去編寫 Vuex 的 plugin，合理的去使用 Vuex 的 subscribe 功能完成一些全局維度的封裝，比如我對于 Vuex 中 action 的錯誤處理懶得一個個去try catch，就封裝了一個vuex-error-plugin^[24]。代碼很簡單，重要的是去理解為什么能這樣做。這里用了 monkey patch 的做法，并不是很好的實踐，僅以此作為引子。

6. 對于 vue-router 的使用必須非常熟練，知道什么需求需要利用什么樣的 router 鉤子，這樣才能 hold 住一個大型的項目，這個我覺得官方倉庫里的進階中文文檔其實很好，不知道為什么好像沒放在官網。
   vue-router-advanced^[25]

7. 理解虛擬 DOM 的本質，虛擬 DOM 一定比真實 DOM 更快嗎？這篇是尤雨溪的回答，看完這個答案，相信你會對虛擬 DOM 有更進一步的認識和理解。
   網上都說操作真實 DOM 慢，但測試結果卻比 React 更快，為什么？^[26]

源碼深入

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

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

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

Vue3 展望

1. Vue3 已經發布了 Beta 版本，你可以提前學習Hook相關的開發模式了。這里推薦一下我寫的這篇 Vue3 相關介紹：
   Vue3 究竟好在哪里？（和 React Hook 的詳細對比）^[30]

Vue3 源碼

對于響應式部分，如果你已經非常熟悉 Vue2 的響應式原理了，那么 Vue3 的響應式原理對你來說應該沒有太大的難度。甚至在學習之中你會相互比較，知道 Vue3 為什么這樣做更好，Vue2 還有哪部分需要改進等等。

Vue3 其實就是把實現換成了更加強大的 Proxy，并且把響應式部分做的更加的抽象，甚至可以，不得不說，Vue3 的響應式模型更加接近響應式類庫的核心了，甚至react-easy-state等 React 的響應式狀態管理庫，也是用這套類似的核心做出來的。

再次強調，非常非常推薦學習 Vue3 的@vue/reactivity這個分包。

推一波自己的文章吧，細致了講解了 Vue3 響應式的核心流程。

1. 帶你徹底搞懂 Vue3 的 Proxy 響應式原理！TypeScript 從零實現基于 Proxy 的響應式庫。^[31]

2. 帶你徹底搞懂 Vue3 的 Proxy 響應式原理！基于函數劫持實現 Map 和 Set 的響應式^[32]

3. 深度解析：Vue3 如何巧妙的實現強大的 computed^[33]

在學習之后，我把@vue/reactivity包輕松的集成到了 React 中，做了一個狀態管理的庫，這也另一方面佐證了這個包的抽象程度：
40 行代碼把 Vue3 的響應式集成進 React 做狀態管理^[34]

React

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

熟練應用

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

2. 推薦 React 小書，雖然書中的很多 api 已經更新了，但是核心的設計思想還是沒有變
   React.js 小書^[35]

3. 關于熟練應用，其實掘金的小冊里有幾個寶藏

4. 1. 誠身大佬（悄悄告訴你，他的職級非常高）的企業級管理系統小冊，這個項目里的代碼非常深入，而且在抽象和優化方面也做的無可挑剔，自己抽象了acl權限管理系統和router路由管理，并且引入了reselect做性能優化，一年前我初次讀的時候，很多地方懵懵懂懂，這一年下來我也從無到有經手了一套帶acl和權限路由的管理系統后，才知道他的抽象能力有多強。真的是

      初聞不知曲中意，再聞已是曲中人。

      React 組合式開發實踐：打造企業管理系統五大核心模塊^[36]

   2. 三元大佬的 React Hooks 與 Immutable 數據流實戰，深入淺出的帶你實現一個音樂播放器。三元大家都認識吧？那是神，神帶你們寫應用項目，不學能說得過去嗎？React Hooks 與 Immutable 數據流實戰^[37]

5. 深入理解 React 中的key
   understanding-reacts-key-prop^[38]

   react 中為何推薦設置 key^[39]

6. React 官方團隊成員對于派生狀態的思考：
   you-probably-dont-need-derived-state^[40]

React Hook

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

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

2. 推薦黃子毅大佬的精讀周刊系列
   096.精讀《useEffect 完全指南》.md^[43]
   注意！不是只看這一篇，而是這個倉庫里所有有關于 React Hook 的文章都去看一遍，結合自己的思想分析。

3. Hook 陷阱系列 還是 Dan 老哥的文章，詳細的講清楚了所謂閉包陷阱產生的原因和設計中的權衡。
   函數式組件與類組件有何不同？^[44]

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

React 性能優化

React 中優化組件重渲染，這里有幾個隱含的知識點。
optimize-react-re-renders^[48]

如何對 React 函數式組件進行性能優化？這篇文章講的很詳細，值得仔細閱讀一遍。如何對 React 函數式組件進行優化^[49]

React 單元測試

1. 使用@testing-library/react測試組件，這個庫相比起 enzyme 更好的原因在于，它更注重于站在用戶的角度去測試一個組件，而不是測試這個組件的實現細節。
   Introducing The React Testing Library^[50]
   Testing Implementation Details^[51]

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

React 和 TypeScript 結合使用

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

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

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

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

React 代碼抽象思考

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

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

3. 仔細思考 React 組件中的狀態應該如何管理，優先使用派生狀態，并且在適當的時候利用 useMemo、reselect 等庫去優化他們。
   dont-sync-state-derive-it^[59]

4. React Hooks 的自定義 hook 中，如何利用 reducer 的模式提供更加靈活的數據管理，讓用戶擁有數據的控制權。
   the-state-reducer-pattern-with-react-hooks^[60]

TypeScript

自從 Vue3 橫空出世以來，TypeScript 好像突然就火了。這是一件好事，推動前端去學習強類型語言，開發更加嚴謹。并且第三方包的 ts 類型支持的加入，讓我們甚至很多時候都不再需要打開文檔對著 api 擼了。

關于 TypeScript 學習，其實幾個月前我還對于這門 JavaScript 的超集一竅不通，經過兩三個月的靜心學習，我能夠去理解一些相對復雜的類型了，

可以說 TypeScript 的學習和學一個庫或者學一個框架是完全不同的，

入門

1. 除了官方文檔以外，還有一些比較好的中文入門教程。
   TypeScript Handbook 入門教程 ^[61]

2. TypeScript Deep Dive 非常高質量的英文入門教學。
   TypeScript Deep Dive^[62]

3. 工具泛型在日常開發中都非常的常用，必須熟練掌握。
   TS 一些工具泛型的使用及其實現^[63]

4. 視頻課程，還是黃軼大佬的，并且這個課程對于單元測試、前端手寫框架、以及網絡請求原理都非常有幫助。
   基于 TypeScript 從零重構 axios^[64]

進階

1. 這五篇文章里借助非常多的案例，為我們講解了 ts 的一些高級用法，請務必反復在 ide 里嘗試，理解，不懂的概念及時回到文檔中補習。
   巧用 TypeScript 系列 一共五篇^[65]

2. TS 進階非常重要的一點，條件類型，很多泛型推導都需要借助它的力量。
   conditional-types-in-typescript^[66]

3. 以及上面那個大佬博客中的所有 TS 文章。
   https://mariusschulz.com

實戰

1. 一個參數簡化的實戰，涉及到的高級知識點非常多。

2. 1. ????TypeScript 的高級類型（Advanced Type）

   2. ????Conditional Types (條件類型)

   3. ????Distributive conditional types (分布條件類型)

   4. ????Mapped types（映射類型）

   5. ???? 函數重載
      TypeScript 參數簡化實戰^[67]

3. 實現一個簡化版的 Vuex，同樣知識點結合滿滿。

4. 1. ????TypeScript 的高級類型（Advanced Type^[68]）

   2. ????TypeScript 中利用泛型進行反向類型推導。(Generics^[69])

   3. ????Mapped types（映射類型）

   4. ????Distributive Conditional Types（條件類型分配）

   5. ????TypeScript 中 Infer 的實戰應用（Vue3 源碼里 infer 的一個很重要的使用^[70]）
      TS 實現智能類型推導的簡化版 Vuex^[71]

刻意訓練

它幾乎是一門新的語言（在類型世界里來說），需要你花費很大的精力去學好它。

我對于 TypeScript 的學習建議其實就是一個關鍵詞：刻意訓練，在過基礎概念的時候，不厭其煩的在vscode中敲擊，理解，思考。在基礎概念過完以后去尋找實踐文章，比如我上面進階和實戰部分推薦的幾篇，繼續刻意訓練，一定要堆積代碼量，學習一門新的語言是不可能靠看文檔獲得成功的。

我會建立一個倉庫，專門記錄我遇到的TypeScript 的有趣代碼^[72]，自己動手敲一遍，并且深入理解。

能力分級

其實 TypeScript 的能力也是兩級分化的，日常寫業務來說，你定義一些 interface，配合 React.FC 這種官方內置的類型也就跑通了，沒什么特別難的點。

但是如果是造輪子呢？如果你自己寫了一個工具庫，并且類型比較復雜，你能保證推導出來嗎？亦或者就拿 Vue3 來說，ref 是一個很復雜的嵌套類型，

假如我們這樣定義一個值const value = ref(ref(2))，對于嵌套的 ref，Vue3 會做一層拆包，也就是說其實ref.value會是 2，

那么它是如何讓 ts 提示出 value 的類型是 number 的呢？

如果你看到源碼里的這段代碼，你只有基礎的話，保證懵逼。
Vue3 跟著尤雨溪學 TypeScript 之 Ref 類型從零實現^[73]

//?Recursively?unwraps?nested?value?bindings.
export?type?UnwrapRef<T>?=?{cRef:?T?extends?ComputedRef<infer?V>???UnwrapRef<V>?:?Tref:?T?extends?Ref<infer?V>???UnwrapRef<V>?:?Tarray:?Tobject:?{?[K?in?keyof?T]:?UnwrapRef<T[K]>?}
}[T?extends?ComputedRef<any>??'cRef':?T?extends?Array<any>??'array':?T?extends?Ref?|?Function?|?CollectionTypes?|?BaseTypes??'ref'?//?bail?out?on?types?that?shouldn't?be?unwrapped:?T?extends?object???'object'?:?'ref']

業務開發人員

如果短期內你對自己的要求是能上手業務，那么你理解 TypeScript 基礎的interface和type編寫和泛型的普通使用（可以理解為類型系統里的函數傳參）也已經足夠。

框架開發人員

但是長期來看，如果你的目的是能夠自己編寫一些類型完善的庫或框架，或者說你在公司扮演前端架構師、輪子專家等等角色，經常需要寫一些偏底層的庫給你的小伙伴們使用，那么你必須深入學習，這樣才能做到給你的框架使用用戶完美的類型體驗。

面試題

TypeScript 相關的面試題我見得不多，不過力扣中國的面試題算是難度偏高的，其中有一道 TS 的面試題，可以說是實用性和難度都有所兼顧，簡單來說就是解包。

//?解開參數和返回值中的Promise
asyncMethod<T,?U>(input:?Promise<T>):?Promise<Action<U>>↓
asyncMethod<T,?U>(input:?T):?Action<U>//?解開參數中的Action
syncMethod<T,?U>(action:?Action<T>):?Action<U>↓
syncMethod<T,?U>(action:?T):?Action<U>

我在高強度學習了兩三個月 TS 的情況下，已經能把這道題目相對輕松的解出來，相信這也是說明我的學習路線沒有走偏（題解就不放了，尊重面試題，其實就是考察了映射類型和infer的使用）。
力扣面試題^[74]

代碼質量

代碼風格

1. 在項目中集成 Prettier + ESLint + Airbnb Style Guideintegrating-prettier-eslint-airbnb-style-guide-in-vscode^[75]

2. 在項目中集成 ESLint with Prettier, TypeScript^[76]

高質量架構

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

Git 提交信息

1. 很多新手在提交 Git 信息的時候會寫的很隨意，比如fix、test、修復，這么糊弄的話是會被 leader 揍的！

   [譯]如何撰寫 Git 提交信息^[79]

   Git-Commit-Log 規范（Angular 規范）^[80]

   commitizen^[81]規范流程的 commit 工具，規范的 commit 格式也會讓工具幫你生成友好的changelog

構建工具

1. webpack 基礎和優化
   深入淺出 webpack^[82]

2. 滴滴前端工程師的 webpack 深入源碼分析系列，非常的優秀。
   webpack 系列之一總覽^[83]

性能優化

1. 推薦修言大佬的性能優化小冊^[84]，這個真的是講的深入淺出，從webpack到網絡到dom操作，全方位的帶你做一些性能優化實戰。這本小冊我當時看的時候真的是完全停不下來，修言大佬的風格既輕松又幽默。但是講解的東西卻能讓你受益匪淺。

2. 谷歌開發者性能優化章節，不用多說了吧？很權威了。左側菜單欄里還有更多相關內容，可以按需選擇學習。
   user-centric-performance-metrics^[85]

3. 詳談合成層，合成層這個東西離我們忽遠忽近，可能你的一個不小心的操作就造成層爆炸，當然需要仔細關注啦。起碼，在性能遇到瓶頸的時候，你可以打開 chrome 的layer面板，看看你的頁面到底是怎么樣的一個層分布。
   詳談層合成（composite）^[86]

4. 劉博文大佬的性能優化指南，非常清晰的講解了網頁優化的幾個重要的注意點。
   讓你的網頁更絲滑^[87]

社區討論

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

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

為什么 Vue3 不需要時間切片？

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

Vue3 的composition-api到底好在哪？

Vue3 的 functional-api 相關的 rfc，尤大舌戰群儒，深入淺出的為大家講解了 Vue3 的設計思路等等。
Amendment proposal to Function-based Component API^[89]

Vue3composition-api的第一手文檔

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

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

關于 Hook 的一些收獲

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

在 Vue2 里，可以通過plugin先體驗composition-api，截取這篇文章對應的實戰項目中的一小部分代碼吧：

<template><Books?:books="booksAvaluable"?:loading="loading"?/>
</template><script?lang="ts">
import?{?createComponent?}?from?'@vue/composition-api';
import?Books?from?'@/components/Books.vue';
import?{?useAsync?}?from?'@/hooks';
import?{?getBooks?}?from?'@/hacks/fetch';
import?{?useBookListInject?}?from?'@/context';
export?default?createComponent({name:?'books',setup()?{const?{?books,?setBooks,?booksAvaluable?}?=?useBookListInject();const?loading?=?useAsync(async?()?=>?{const?requestBooks?=?await?getBooks();setBooks(requestBooks);});return?{?booksAvaluable,?loading?};},components:?{Books,},
});
</script><style>
.content?{max-width:?700px;margin:?auto;
}
</style>

本實戰對應倉庫：

vue-bookshelf^[92]

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

在第一次使用Hook開發的時候，大部分人可能還是會保留著以前的思想，把state集中起來定義在代碼的前一大段，把computed集中定義在第二段，把mutation定義在第三段，如果不看尤大對于設計思想的講解，我也一直是在這樣做。

但是為什么 Logical Concerns 優于 Vue2 和 React Class Component 的 Option Types？看完detailed-design^[93]這個章節你就全部明白了，并且這會融入到你日常開發中去。

總之，看完這篇以后，我果斷的把公司里的首屏組件的一坨代碼直接抽成了 n 個自定義 hook，維護效率提升簡直像是坐火箭。

當然，社區里的寶藏 issue 肯定不止這些，我只是簡單的列出了幾個，但就是這幾個都讓我的技術視野開闊了很多，并且是真正的融入到公司的業務實戰中去，是具有業務價值的。希望你養成看 issue，緊跟英文社區的習慣，Github issue 里單純的技術探討氛圍，真的是國內很少有社區可以媲美的。

function?AppInner({?children?})?{const?[menus,?setMenus]?=?useState({});//?用戶信息const?user?=?useUser();//?主題能力useTheme();//?權限獲取useAuth({setMenus,});//?動態菜單也需要用到菜單的能力useDynamicMenus({menus,setMenus,});return?(<Context.Provider?value={user}><Layout?routers={backgrounds}>{children}</Layout></Context.Provider>);
}

可以看到，Hook在代碼組織的方面有著得天獨厚的優勢，甚至各個模塊之間值的傳遞都是那么的自然，僅僅是函數傳參而已。
總之，社區推出一些新的東西，它總歸是解決了之前的一些痛點。我們跟著大佬的思路走，一定有肉吃。

Tree Shaking 的 Issue

相學長的文章你的 Tree-Shaking 并沒什么卵用^[94]中，也詳細的描述了他對于副作用的一些探尋過程，在UglifyJS 的 Issue^[95]中找到了最終的答案，然后貢獻給中文社區，這些內容最開始不會在任何中文社區里出現，只有靠你去探尋和發現。

學習方法的轉變

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

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

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

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

這里是我當時閱讀英文優質文章的一些記錄，

英文技術文章閱讀^[96]

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

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

dev.to^[97]
medium^[98]

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

關于實踐

社區有很多大佬實力很強，但是對新手寫的代碼嗤之以鼻，認為有 any 的就不叫 TypeScript、認為沒有單元測試就沒資格丟到 Github 上去。這種言論其實也不怪他們，他們也只是對開源軟件的要求高到偏執而已。但是對于新手學習來說，這種言論很容易對大家造成打擊，導致不敢寫 ts，寫的東西不敢放出來。其實大可不必，工業聚 對于這些觀點就發表了一篇很好的看法，讓我覺得深受打動，也就是這篇文章開始，我慢慢的把舊項目用 ts 改造起來，慢慢的進步。

Vue 3.0 公開代碼之后……

總結

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

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

未完待續... 持續更新中。

參考資料

[1]

由于微信不支持外鏈，參考資料可點擊 閱讀原文查看。

最近組建了一個湖南人的前端交流群，如果你是湖南人可以加我微信?ruochuan12?私信 湖南?拉你進群。

---

推薦閱讀

我在阿里招前端，該怎么幫你（可進面試群）
我讀源碼的經歷

面對 this 指向丟失，尤雨溪在 Vuex 源碼中是怎么處理的
老姚淺談：怎么學JavaScript？

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，活躍在知乎@若川，掘金@若川。致力于分享前端開發經驗，愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~