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

時間 2020-03-27

標籤寫給初中前端高級進階指南萬字長文路線明確简体版

原文原文鏈接

前言

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

筆者畢業於一個很普通的本科學校，目前開發經驗一共是2年8個月，目前帶一個5人的團隊，前任的組長讓我帶領團隊的主要緣由是我的技術 + 溝通能力相對較好，可是在技術能力成長的背後我也走了很多彎路。 html

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

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

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

基礎能力

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

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

JavaScript

原生js系列

冴羽大佬的這篇博客裏，除了undescore的部分，你須要所有都能掌握。而且靈活的運用到開發中去。
JavaScript深刻系列、JavaScript專題系列、ES6系列webpack

徹底熟練掌握eventLoop。

tasks-microtasks-queues-and-schedulesios

Promise

你須要閱讀Promise A+規範，注意其中的細節，而且靈活的運用到開發當中去。

Promise A+ 英文文檔git

你須要跟着精品教程手寫一遍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...

「…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的源碼。這裏推薦黃軼老師的Vue源碼課程。這裏也包括了Vuex和vue-router的源碼。

Vue.js源碼全方位深刻解析（含Vue3.0源碼分析）

推薦HcySunYang大佬的Vue逐行分析，須要下載git倉庫，切到elegant分支本身本地啓動。

Vue逐行級別的源碼分析

固然，這個倉庫的master分支也是寶藏，是這個做者的渲染器系列文章，脫離框架講解了vnode和diff算法的本質

組件的本質

Vue3源碼

不要臉的先推一篇本身的文章吧，細緻了講解了Vue3響應式的核心流程。

帶你完全搞懂Vue3的Proxy響應式原理！TypeScript從零實現基於Proxy的響應式庫。

React

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

熟練應用

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

關於熟練應用，其實掘金的小冊裏有幾個寶藏

誠身大佬的企業級管理系統小冊，這個項目裏的代碼很是深刻，並且在抽象和優化方面也作的無可挑剔，本身抽象了acl權限管理系統和router路由管理，而且引入了reselect作性能優化，你能夠從中學習到這位大佬的不少思路。（悄悄告訴你，他的職級很是高）

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

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

React Hooks 與 Immutable 數據流實戰

深刻理解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更好的緣由在於，它更注重於站在用戶的角度去測試一個組件，而不是測試這個組件的實現細節。
1. introducing-the-react-testing-library
2. 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，任何你興趣的前端技術棧，不須要過多久你的首頁就會出現前端的推薦內容。好好享受這個高質量的英文社區吧。