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

時間 2020-04-09

標籤寫給初中前端高級進階指南简体版

原文原文鏈接

前言

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

筆者畢業於一個很普通的本科學校，非計算機專業，17年的時候剛畢業的時候還不知道本身的方向在哪（實習作過銷售、運營、推廣）。後來機緣巧合走上了開發這條路，第一年的時候 Java 和前端都作，慢慢發現了本身的興趣所在轉向前端。第二年的時候跳槽來到杭州，開始前端工程師的生涯。css

目前開發經驗一共是2年8個月，目前帶一個5人的團隊，前任的組長讓我帶領團隊的主要緣由是我的技術 + 溝通能力相對較好，可是在技術能力成長的背後須要怎麼去走呢，相信有不少小夥伴會迷失方向。html

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

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

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

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

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

基礎能力

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

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

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的源碼中就用到了觀察者模式、發佈訂閱模式、策略模式、適配器模式、發佈訂閱模式、工廠模式、組合模式、代理模式、門面模式等等。

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

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

基礎算法

掌握一些基礎算法核心思想或簡單算法問題，好比排序。

開發思想

你須要知道組合優於繼承的思想，不要再滿口都是oop，寫什麼都來個class extends了，在前端ui扁平化的前提下，真的沒那麼多須要繼承的場景。
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

框架篇

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

下面我會分爲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開發體驗吧。

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

你要深刻了解Vue中nextTick的原理，而且知道爲何要用微任務隊列優於宏任務隊列，結合你的eventloop知識深度思考。最後融入到你的異步合併優化的知識體系中去。
Vue源碼詳解之nextTick：MutationObserver只是浮雲，microtask纔是核心！
你要能理解Vue中的高階組件。關於這篇文章中爲何slot-scope不生效的問題，你不能看他的文章講解都一頭霧水。（須要你具有源碼知識）
探索Vue高階組件 | HcySunYang
對於Vuex和vue-router的使用必須很是熟練，知道何時該用Vuex，什麼需求須要利用什麼樣的router鉤子，這樣才能hold住一個大型的項目，這個我以爲仍是儘可能去學源碼吧。

源碼深刻

你不光要熟練運用Vue，因爲Vue的源碼寫的很是精美，並且閱讀難度不是很是大，不少人也選擇去閱讀Vue的源碼。先推薦一個阿里巴巴的柒陌同窗掘金的小冊，9.9元買不了吃虧，每章節還附帶demo，很是適合入門源碼：

視頻課這裏推薦黃軼老師的Vue源碼課程。這裏也包括了Vuex和vue-router的源碼。
Vue.js源碼全方位深刻解析（含Vue3.0源碼分析）
推薦HcySunYang大佬的Vue逐行分析，須要下載git倉庫，切到elegant分支本身本地啓動。
Vue逐行級別的源碼分析
固然，這個倉庫的master分支也是寶藏，是這個做者的渲染器系列文章，脫離框架講解了vnode和diff算法的本質
組件的本質

Vue3展望

Vue3已經發布了Alpha版本，你能夠提早學習Hook相關的開發模式了，面向將來的異步請求管理是zeit/swr這種自定義Hook庫所帶來的。在講解以前，先舉個例子，在Vue2中若是我須要請求一份數據，而且在loading和error時都展現對應的視圖，通常來講，咱們會這樣寫：

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' export default { data() { // 集中式的data定義 若是有其餘邏輯相關的數據就很容易混亂 return { data: { firstName: '', lastName: '' }, loading: false, error: false, }, }, async created() { try { // 管理loading this.loading = true // 取數據 const data = await this.$axios('/api/user') this.data = data } catch (e) { // 管理error this.error = true } finally { // 管理loading this.loading = false } }, computed() { // 沒人知道這個fullName和哪一部分的異步請求有關 和哪一部分的data有關 除非仔細閱讀 // 在組件大了之後更是如此 fullName() { return this.data.firstName + this.data.lastName } } } </script>
複製代碼

這段代碼，怎麼樣都談不上優雅，湊合的把功能完成而已，而且對於loading、error等處理的可複用性爲零。

數據和邏輯也被分散在了各個option中，這還只是一個邏輯，若是又多了一些邏輯，多了data、computed、methods？若是你是一個新接手這個文件的人，你如何迅速的分辨清楚這個method是和某兩個data中的字段關聯起來的？

讓咱們把zeit/swr的邏輯照搬到Vue3中，

看一下swr在Vue3中的表現：

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' import useSWR from 'vue-swr' export default createComponent({ setup() { // useSWR幫你管理好了取數、緩存、甚至標籤頁聚焦從新請求、甚至Suspense... const { data, loading, error } = useSWR('/api/user', fetcher) // 輕鬆的定義計算屬性 const fullName = computed(() => data.firstName + data.lastName) return { data, fullName, loading, error } } }) </script>
複製代碼

就是這麼簡單，對嗎？邏輯更加聚合了。

有人要問，所有邏輯都寫在setup裏了，這是麪條式代碼！並且針對我上面提出的代碼邏輯分散的問題，哪裏進步了。

那麼咱們用自定義hook把邏輯統一抽出來？

<template>
    <div v-if="error">failed to load</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>hello {{fullName}}!</div>
</template>

<script> import { createComponent, computed } from 'vue' import useSWR from 'vue-swr' export default createComponent({ setup() { return { ...useName() } } }) // 姓名相關邏輯 function useName() { // useSWR幫你管理好了取數、緩存、甚至標籤頁聚焦從新請求、甚至Suspense... const { data, loading, error } = useSWR('/api/user', fetcher) // 輕鬆的定義計算屬性 const fullName = computed(() => data.firstName + data.lastName) return { data, fullName, loading, error } } </script>
複製代碼

這下好了，useName這個hook甚至成爲了一個全部組件均可以共用的hook。在Vue2裏，你怎麼抽取？難道用mixins？

那麼你應該看這篇知乎：爲什麼不要用mixins來實現組件複用

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函數式組件進行性能優化？這篇文章講的很詳細，值得仔細閱讀一遍。 [juejin.im/post/5dd337…](如何對 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：從基礎知識到類型編程，講解的很是通俗易懂。

除了官方文檔之外，還有一些比較好的中文入門教程。
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的呢？

若是你看到源碼裏的這段代碼，你只有基礎的話，保證懵逼。

// 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 公開代碼以後……