寫給初中級前端的高級進階指南

做者

我是 ssh，歡迎找我交個朋友，微信：sshsunlight，我喜歡分享前端的前沿趨勢和一些有趣的事情。javascript

關注公衆號「前端從進階到入院」，精選超級優質的文章，助你前端成神之路。html

前言

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

這篇文章會提到很是很是多的學習路線和連接，若是你還在初中級的階段，沒必要太焦慮，能夠把這篇文章做爲一個進階的路線圖，在將來的時日裏朝着這個方向努力就好。
我也並非說這篇文章是進階高級工程師的惟一一條路線，若是你在業務上作的精進，亦或是能在溝通上八面玲瓏，配合各方面力量把項目作的漂漂亮亮，那你也同樣能夠擁有這個頭銜。本文只是我本身的一個成長路線總結。vue

本篇文章面對的人羣是開發經驗1到3年的初中級前端工程師，但願能和大家交個心。java

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

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

個人 github 地址，歡迎 follow，我會持續更新一些值得你關注的項目。webpack

個人 blog 地址，這裏會持續更新，點個 star 不失聯！✨ios

個人公衆號前端從進階到入院，長期第一時間更新優質文章，還有技術氛圍賊好的交流羣歡迎你。git

基礎能力

我整理了一篇中級前端的必備技術棧能力，寫給女友的中級前端面試祕籍。這篇文章裏的技術棧固然都是須要紮實掌握的，（其實我本身也有一些漏缺，偷偷補一下）。

固然了，上進心十足的你不會一直知足於作中級前端，咱們要繼續向上，升職加薪，迎娶白富美！

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嵌套一把梭了，你須要把設計模式好好看一遍，在合適的場景下選擇合適的設計模式。這裏就推薦掘金小冊吧，相信這篇小冊會讓你的工程能力獲得質的飛躍，舉例來講，在 Vue 的源碼中就用到了觀察者模式、發佈訂閱模式、策略模式、適配器模式、發佈訂閱模式、工廠模式、組合模式、代理模式、門面模式等等。

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

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

這裏推薦掘金修言的設計模式小冊。

開發思想

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

medium.com/javascript-…

「…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

算法

算法這裏我就不推薦各類小冊，筆記，博文了。由於從我本身學習算法的經驗來看，在沒有太多的算法基礎的狀況下，文章基本上是很難真正的看進去並理解的，這裏只推薦慕課網 bobo 老師的 LeetCode 真題課程，在這個課程裏算法大牛 bobo 老師會很是細心的把各個算法作成動圖，由淺入深給你講解各類分類的 LeetCode 真題。這是我最近學到的最有收穫的一門課程了。

因爲這門課程是 C++ 爲主要語言的（不影響理解課程），我也針對此課程維護了一個對應的 JavaScript 版題解倉庫，在 Issue 裏也根據標籤分類整理了各個題型的講解，歡迎 Star ✨。

算法對於前端來講重要嗎？也許你以爲作題沒用，可是我我的在作題後而且分門別類的整理好各個題型的思路和解法後，是能真切的感受到本身的代碼能力在飛速提升的。

對於不少以爲本身不夠聰明，不敢去學習算法的同窗來講，推薦 bobo 老師的這篇《天生不聰明》，也正是這篇文章激勵我開始了算法學習的旅程。

在這裏列一下前端須要掌握的基礎算法知識，但願能給你一個路線：

算法的複雜度分析。
排序算法，以及他們的區別和優化。
數組中的雙指針、滑動窗口思想。
利用 Map 和 Set 處理查找表問題。
鏈表的各類問題。
利用遞歸和迭代法解決二叉樹問題。
棧、隊列、DFS、BFS。
回溯法、貪心算法、動態規劃。

算法是底層的基礎，把地基打紮實後，會讓你在後續的職業生涯中大受裨益的。

這裏也推薦個人整合文章前端算法進階指南。

框架篇

對於高級工程師來講，你必需要有一個你趁手的框架，它就像你手中的一把利劍，可以讓你披荊斬棘，斬殺各類項目於馬下。

下面我會分爲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>
複製代碼

你須要熟練的使用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;
  });
};
複製代碼

你要開始使用JSX來編寫你項目中的複雜組件了，好比在個人網易雲音樂項目中，我遇到了一個複雜的音樂表格需求，支持搜索文字高亮、動態隱藏列等等。
固然對於如今版本的 Vue，JSX 仍是不太好用，有不少屬性須要寫嵌套對象，這會形成不少沒必要要的麻煩，好比沒辦法像 React 同樣直接把外層組件傳入的 props 透傳下去，Vue3 的 rfc 中提到會把 vnode 節點的屬性進一步扁平化，咱們期待獲得接近於 React 的完美 JSX 開發體驗吧。
你要深刻了解 Vue 中 nextTick 的原理，而且知道爲何要用微任務隊列優於宏任務隊列，結合你的 eventloop 知識深度思考。最後融入到你的異步合併優化的知識體系中去。
Vue 源碼詳解之 nextTick：MutationObserver 只是浮雲，microtask 纔是核心！
你要能理解 Vue 中的高階組件。關於這篇文章中爲何 slot-scope 不生效的問題，你不能看他的文章講解都一頭霧水。（須要你具有源碼知識）
探索 Vue 高階組件 | HcySunYang
推薦一下我本身總結的 Vue 高階組件文章，裏面涉及到了一些進階的用法。
Vue 進階必學之高階組件 HOC
對於 Vuex 的使用必須很是熟練，知道何時該用 Vuex，知道怎麼根據需求去編寫 Vuex 的 plugin，合理的去使用 Vuex 的 subscribe 功能完成一些全局維度的封裝，好比我對於 Vuex 中 action 的錯誤處理懶得一個個去try catch，就封裝了一個vuex-error-plugin。代碼很簡單，重要的是去理解爲何能這樣作。這裏用了 monkey patch 的作法，並非很好的實踐，僅以此做爲引子。
對於 vue-router 的使用必須很是熟練，知道什麼需求須要利用什麼樣的 router 鉤子，這樣才能 hold 住一個大型的項目，這個我以爲官方倉庫裏的進階中文文檔其實很好，不知道爲何好像沒放在官網。
vue-router-advanced
理解虛擬 DOM 的本質，虛擬 DOM 必定比真實 DOM 更快嗎？這篇是尤雨溪的回答，看完這個答案，相信你會對虛擬 DOM 有更進一步的認識和理解。
網上都說操做真實 DOM 慢，但測試結果卻比 React 更快，爲何？

源碼深刻

你不光要熟練運用 Vue，因爲 Vue 的源碼寫的很是精美，並且閱讀難度不是很是大，不少人也選擇去閱讀 Vue 的源碼。視頻課這裏推薦黃軼老師的 Vue 源碼課程。這裏也包括了 Vuex 和 vue-router 的源碼。
Vue.js 源碼全方位深刻解析（含 Vue3.0 源碼分析）
推薦 HcySunYang 大佬的 Vue 逐行分析，須要下載 git 倉庫，切到 elegant 分支本身本地啓動。
Vue 逐行級別的源碼分析
固然，這個倉庫的 master 分支也是寶藏，是這個做者的渲染器系列文章，脫離框架講解了 vnode 和 diff 算法的本質
組件的本質

Vue3 展望

Vue3 已經發布了 Beta 版本，你能夠提早學習Hook相關的開發模式了。這裏推薦一下我寫的這篇 Vue3 相關介紹：

Vue3 究竟好在哪裏？（和 React Hook 的詳細對比）

Vue3 源碼

對於響應式部分，若是你已經很是熟悉 Vue2 的響應式原理了，那麼 Vue3 的響應式原理對你來講應該沒有太大的難度。甚至在學習之中你會相互比較，知道 Vue3 爲何這樣作更好，Vue2 還有哪部分須要改進等等。

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

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

推一波本身的文章吧，細緻了講解了 Vue3 響應式的核心流程。

在學習以後，我把@vue/reactivity包輕鬆的集成到了 React 中，作了一個狀態管理的庫，這也另外一方面佐證了這個包的抽象程度：
40 行代碼把 Vue3 的響應式集成進 React 作狀態管理

React

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

熟練應用

你必須掌握官網中提到的全部技巧，就算沒有使用過，你也要大概知道該在什麼場景使用。
推薦 React 小書，雖然書中的不少 api 已經更新了，可是核心的設計思想仍是沒有變
React.js 小書
關於熟練應用，其實掘金的小冊裏有幾個寶藏
1. 誠身大佬（悄悄告訴你，他的職級很是高）的企業級管理系統小冊，這個項目裏的代碼很是深刻，並且在抽象和優化方面也作的無可挑剔，本身抽象了acl權限管理系統和router路由管理，而且引入了reselect作性能優化，一年前我初次讀的時候，不少地方懵懵懂懂，這一年下來我也從無到有經手了一套帶acl和權限路由的管理系統後，才知道他的抽象能力有多強。真的是
  
  初聞不知曲中意，再聞已經是曲中人。
  
  React 組合式開發實踐：打造企業管理系統五大核心模塊
2. 三元大佬的 React Hooks 與 Immutable 數據流實戰，深刻淺出的帶你實現一個音樂播放器。三元你們都認識吧？那是神，神帶大家寫應用項目，不學能說得過去嗎？ React Hooks 與 Immutable 數據流實戰
深刻理解 React 中的key
understanding-reacts-key-prop

react 中爲什麼推薦設置 key
React 官方團隊成員對於派生狀態的思考：
you-probably-dont-need-derived-state

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 函數式組件進行性能優化？這篇文章講的很詳細，值得仔細閱讀一遍。如何對 React 函數式組件進行優化

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

TypeScript

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

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

能夠說 TypeScript 的學習和學一個庫或者學一個框架是徹底不一樣的，

入門

除了官方文檔之外，還有一些比較好的中文入門教程。
TypeScript Handbook 入門教程
TypeScript Deep Dive 很是高質量的英文入門教學。
TypeScript Deep Dive
工具泛型在平常開發中都很是的經常使用，必須熟練掌握。
TS 一些工具泛型的使用及其實現
視頻課程，仍是黃軼大佬的，而且這個課程對於單元測試、前端手寫框架、以及網絡請求原理都很是有幫助。
基於 TypeScript 從零重構 axios

進階

這五篇文章裏藉助很是多的案例，爲咱們講解了 ts 的一些高級用法，請務必反覆在 ide 裏嘗試，理解，不懂的概念及時回到文檔中補習。
巧用 TypeScript 系列一共五篇
TS 進階很是重要的一點，條件類型，不少泛型推導都須要藉助它的力量。
conditional-types-in-typescript
以及上面那個大佬博客中的全部 TS 文章。
mariusschulz.com

實戰

一個參數簡化的實戰，涉及到的高級知識點很是多。
1. 🎉TypeScript 的高級類型（Advanced Type）
2. 🎉Conditional Types (條件類型)
3. 🎉Distributive conditional types (分佈條件類型)
4. 🎉Mapped types（映射類型）
5. 🎉 函數重載
  TypeScript 參數簡化實戰
實現一個簡化版的 Vuex，一樣知識點結合滿滿。
1. 🎉TypeScript 的高級類型（Advanced Type）
2. 🎉TypeScript 中利用泛型進行反向類型推導。(Generics)
3. 🎉Mapped types（映射類型）
4. 🎉Distributive Conditional Types（條件類型分配）
5. 🎉TypeScript 中 Infer 的實戰應用（Vue3 源碼裏 infer 的一個很重要的使用）
  TS 實現智能類型推導的簡化版 Vuex

刻意訓練

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

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

我會創建一個倉庫，專門記錄我遇到的TypeScript 的有趣代碼，本身動手敲一遍，而且深刻理解。

能力分級

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

可是若是是造輪子呢？若是你本身寫了一個工具庫，而且類型比較複雜，你能保證推導出來嗎？亦或者就拿 Vue3 來講，ref 是一個很複雜的嵌套類型，

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

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

若是你看到源碼裏的這段代碼，你只有基礎的話，保證懵逼。
Vue3 跟着尤雨溪學 TypeScript 之 Ref 類型從零實現

// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
  cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  array: T
  object: { [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的使用）。
力扣面試題

代碼質量

代碼風格

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

高質量架構

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

Git 提交信息

不少新手在提交 Git 信息的時候會寫的很隨意，好比fix、test、修復，這麼糊弄的話是會被 leader 揍的！

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

Git-Commit-Log 規範（Angular 規範）

commitizen規範流程的 commit 工具，規範的 commit 格式也會讓工具幫你生成友好的changelog

構建工具

webpack 基礎和優化
深刻淺出 webpack
滴滴前端工程師的 webpack 深刻源碼分析系列，很是的優秀。
webpack 系列之一總覽

性能優化

推薦修言大佬的性能優化小冊，這個真的是講的深刻淺出，從webpack到網絡到dom操做，全方位的帶你作一些性能優化實戰。這本小冊我當時看的時候真的是徹底停不下來，修言大佬的風格既輕鬆又幽默。可是講解的東西卻能讓你受益不淺。
谷歌開發者性能優化章節，不用多說了吧？很權威了。左側菜單欄裏還有更多相關內容，能夠按需選擇學習。
user-centric-performance-metrics
詳談合成層，合成層這個東西離咱們忽遠忽近，可能你的一個不當心的操做就形成層爆炸，固然須要仔細關注啦。起碼，在性能遇到瓶頸的時候，你能夠打開 chrome 的layer面板，看看你的頁面究竟是怎麼樣的一個層分佈。
詳談層合成（composite）
劉博文大佬的性能優化指南，很是清晰的講解了網頁優化的幾個重要的注意點。
讓你的網頁更絲滑

社區討論

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

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

爲何 Vue3 不須要時間切片？

尤雨溪解釋關於爲何在 Vue3 中不加入 React 時間切片功能？而且詳細的分析了 React 和 Vue3 之間的一些細節差異，狠狠的吹了一波 Vue3（愛了愛了）。
Why remove time slicing from vue3?

Vue3 的`composition-api`到底好在哪？

Vue3 的 functional-api 相關的 rfc，尤大舌戰羣儒，深刻淺出的爲你們講解了 Vue3 的設計思路等等。
Amendment proposal to Function-based Component API

Vue3`composition-api`的第一手文檔

vue-composition-api 的 rfc 文檔，在國內資料還不齊全的狀況下，我去閱讀了
vue-composition-api-rfc 英文版文檔，對於裏面的設計思路歎爲觀止，學到了很是很是多尤大的思想。

總之，對於你喜歡的倉庫，均可以去看看它的 issue 有沒有看起來感興趣的討論，你也會學到很是多的東西。而且你能夠和做者保持思路上的同步，這是很是可貴的一件事情。

關於 Hook 的一些收穫

我在狠狠的吸取了一波尤大對於 Vue3 composition-api的設計思路的講解，新舊模式的對比之後，這篇文章就是我對 Vue3 新模式的一些看法。
Vue3 Composition-Api + TypeScript + 新型狀態管理模式探索。

在 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

而且因爲它和React Hook在不少方面的思想也很是相近，這甚至對於我在React Hook上的使用也大有裨益，好比代碼組織的思路上，

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

可是爲何 Logical Concerns 優於 Vue2 和 React Class Component 的 Option Types？看完detailed-design這個章節你就所有明白了，而且這會融入到你平常開發中去。

總之，看完這篇之後，我果斷的把公司裏的首屏組件的一坨代碼直接抽成了 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 並沒什麼卵用中，也詳細的描述了他對於反作用的一些探尋過程，在UglifyJS 的 Issue中找到了最終的答案，而後貢獻給中文社區，這些內容最開始不會在任何中文社區裏出現，只有靠你去探尋和發現。

學習方法的轉變

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

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

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

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

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

英文技術文章閱讀

後面英文閱讀慢慢成了一件比較天然的事情，也就沒有再刻意去記錄，前期能夠用這種方式激勵本身。

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

dev.to
medium

medium 可能須要藉助一些科學工具才能查看，可是裏面的會員付費以及做者激勵機制使得文章很是的優質。登陸本身的谷歌帳號便可成爲會員，前期可能首頁不會推薦一些前端相關的文章，你能夠本身去搜索關鍵字如Vue、React、Webpack，任何你興趣的前端技術棧，不須要過多久你的首頁就會出現前端的推薦內容。好好享受這個高質量的英文社區吧。

關於實踐

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

Vue 3.0 公開代碼以後……

總結

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

但願做爲初中級前端工程師的你，可以有所收穫。若是可以幫助到你就是我最大的知足。

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

❤️ 感謝你們

1.若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

2.關注公衆號「前端從進階到入院」，精選超級優質的文章，助你前端成神之路。