近 20 人爆肝數週，寫給初中級前端的萬字高階進階指南

y_ck發表於2021-10-12
前端

? 這是什麼？

筆者在學會 JS 以及框架的應用後，有一段時間不知道該如何深入下去，活能幹，就是不知道該學啥。相信這個問題也會有很多讀者朋友遇到。

當然筆者目前已經突破了這個瓶頸，也成為了知名公司基礎架構組的成員。因此想通過自己成長的經歷及積累的資料整理出一系列的學習路線及資料推薦，幫助各位讀者朋友解決這個問題。

倉庫內容筆者為主要貢獻者，另外還拉了將近 20 位資深前端開發做內容共建及稽核，多數人員任職一線大廠 P6、P7，第一版耗時數週，大家國慶假期也沒停歇，內容絕對讓各位看官滿意。

此資料適用於小白入門、初中級進階、高階查漏補缺。

內容每天都在更新，大家可以持續關注。

這裡是 Github 連結，最新內容都會首先更新在 Github，如果你覺得內容對你有幫助，可以點個 Star。

? 如何使用

如果你是初中級工程師來說，筆者也推薦先行學習「前端核心學習路徑」，主要是鞏固基礎，之後再挑選感興趣的主題。

如果你是高階工程化，筆者推薦跳過「前端核心學習路徑」，直接挑選感興趣的主題學習即可。

以下所有知識點筆者都會幫助讀者朋友們將知識連貫起來，從而建立自己的知識體系而不是單獨記憶鬆散的知識點。

如何獲取本文資料

筆者已經將倉庫內容裡的重要資料整理好了，另外還附贈了前端 10 萬字的面試攻略，已經幫助上千人拿到 offer。大家可以關注【公眾號】傳送「資料」獲取。

? 目錄

讀者朋友可以前往 Github 瀏覽目錄。

如何高效自學

Z0qdJz

自學是每個工程師都需要掌握的一項技能。這個學習方法筆者百試百靈，學習任何技術都會用上這個思路。另外我們還能通過這個思路拓寬自己的技術棧，將各個知識聯絡起來建立自己的知識體系，並且通過這種學習方式學到的知識也不容易遺忘。

書籍推薦

以下書籍主要還是推薦了 JS 方面的，其它比如說框架、TS 等等技術會在各自章節為大家介紹。

初級

進階

高階

上述書籍大家可以關注【公眾號】傳送「資料」獲取，另外還附贈了前端 10 萬字的面試攻略，已經幫助上千人拿到 offer。

前端核心學習路徑

前端知識點很多這是公認的事情，但是我們確實沒必要把所有知識都去學習，那樣只會貪多嚼不爛。我們能把核心知識點、熱門技術以及工作中需要用到的知識學好就已經能打敗大部分前端工程師了，剩下的大家可以自行根據興趣選擇學習內容。

但是在學習其他內容之前，筆者強烈推薦各位務必一定一定先把基礎打紮實了，基礎不好真的不可能把自己技術往上拔高的。

為了保證大家學到的知識是正確的，下文中的文件資料筆者都使用了英文版本。因為在稽核資料的過程中筆者發現不少中文文件都存在翻譯錯誤或者過時的情況。

如果你還是一位初學者，推薦先自行完整閱讀一至二本書後再按照該計劃學習，因為以下計劃並沒有囊括 JS 的所有知識，而是列出了所有核心知識點。

關於書籍筆者推薦以下兩本：

JS 核心知識點

資料型別

JS 資料型別分為兩大類及八種資料型別，注意別漏了 ES6 新增的 bigint。

型別判斷

型別判斷有好幾種方式，分別為：

型別轉換

型別轉換算是 JS 中情況繁雜且容易出錯，但是開發中還經常會遇到的知識點。強行全部記憶容易遺忘，推薦記憶及練習開發中的常見情況。

this

this 算是不少初學者容易搞混的一個知識點，但是它很重要，務必掌握。

閉包

閉包特別常用，但是其實挺多工程師對於閉包的理解是錯誤的。

作用域

作用域是指程式中定義變數的區域，該位置決定了變數的生命週期，也就是變數和函式的可訪問範圍。

變數提升

變數提升（Hoisting）可以將變數和函式在編譯階段放入記憶體，從而在執行階段時在宣告前使用。

new

new 操作符可以幫助我們構建出一個例項，並且繫結上 this。

call、apply、bind

原型

通過原型這種機制，JavaScript 中的物件從其他物件繼承功能特性。

Class

class 只是原型鏈的語法糖，與其它語言中的類不是同一樣東西。

繼承

繼承是面嚮物件語言（Object-Oriented Language）三大特徵之一，在 JS 中也佔有非常重要的地位。而想要實現繼承有多種方式，它們都有各自的優缺點。

模組化

這塊知識必會，最好了解下模組化的前世今生以及對 ES6 的原生模組化有個深入的理解。

Promise

迭代器與生成器

async await

事件迴圈

大家都知道 JS 是一門單執行緒的非阻塞的指令碼語言。這也就意味著，程式碼在執行的任何時候只有一個主執行緒來處理所有的任務。所以弄懂事件迴圈機制對我們學習 JS 至關重要。

節流與防抖

節流指連續觸發事件的情況下，在某個時間段內，函式只會執行一次。
防抖指在事件被觸發一定時間後再執行回撥函式，如果在一定時間內該事件又被重複觸發，則重啟計時。

柯里化

柯里化就是將接收多個引數的函式轉換成接收一個引數的函式。

垃圾回收

JavaScrip 在變數被建立時分配記憶體，並在物件不再使用時自動釋放記憶體，這個過程被稱為垃圾回收。另外我們主要學習 V8 引擎下的垃圾回收機制。

其他零散但重要的知識點

如果你覺得以上內容對你有幫助，可以前往 Github 點個 Star 支援一下。

HTML

語義化

html 語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析。在沒有引入樣式 CCS 樣式的時候也能以一種可以分辨出來大致表示內容的文件格式顯示，並且是容易閱讀的。 搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

CSS

盒子模型

在 CSS 中，所有的元素都被一個個的“盒子（box）”包圍著，我們廣泛地使用兩種“盒子” —— 塊級盒子 (block box) 和 內聯盒子 (inline box)，理解這些“盒子”的基本原理，是我們使用 CSS 實現準確佈局、處理元素排列的關鍵。

選擇器

CSS 中，選擇器用來指定網頁上我們想要樣式化的 HTML 元素。CSS 選擇器提供了很多種方法，所以在選擇要樣式化的元素時，我們可以做到很精細的地步。

CSS 選擇器是 CSS 規則的第一部分。它是元素和其他部分組合起來告訴瀏覽器哪個 HTML 元素應當是被選為應用規則中的 CSS 屬性值的方式。選擇器所選擇的元素，叫做“選擇器的物件”。

Flex

grid

其他

框架

框架一般選其一深入學習即可。

虛擬 DOM

Virtual DOM 也就是虛擬節點。通過 JS 的 Object 物件模擬 DOM 中的真實節點物件，再通過特定的 render 方法將其渲染成真實的 DOM 節點。

路由

路由在 SPA 架構中都有被用到，實際原理就是運用 hash 及 history 相關的 API 實現。

React

學習框架務必從文件出發，起碼熟讀一遍及自己寫過一些初步的 Demo 之後再考慮學習別的資料。

React 推薦學習路徑

reactStudy.png

大家可以跟著以上學習路徑學習，其中除了概念相關的內容是必須學習之外，生態相關的內容大家可以在使用時再學習。

React 推薦學習資料

如何編寫一個元件

受控元件和非受控元件

  • 受控元件：在 HTML 中，表單元素（如 input、 textarea 和 select ）通常自己維護 state，並根據使用者輸入進行更新。而在 React 中，可變狀態（mutable state）通常儲存在元件的 state 屬性中，並且只能通過使用 setState() 或者 props 來更新
  • 非受控元件：是一個儲存其自己的內部狀態，並且您使用查詢 DOM ref，當你需要它來找到它的當前值，這有點像傳統的 HTML

  • 文件

  • 推薦文章

高階元件（HOC）

高階元件（HOC）是 React 中用於複用元件邏輯的一種高階技巧。HOC 自身不是 React API 的一部分，它是一種基於 React 的組合特性而形成的設計模式。

具體而言，高階元件是引數為元件，返回值為新元件的函式。

Hooks

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫類元件的情況下使用 React 的特性。

合成事件

合成事件（SyntheticEvent）是 React 模擬原生 DOM 事件所有能力的一個事件物件，即瀏覽器原生事件的跨瀏覽器包裝器。React 根據 W3C 規範 定義了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差異。

React 路由

React 狀態管理

React 狀態管理可謂百花齊放百家爭鳴，遠遠不止筆者列的這些庫。但是實際上很多專案完全是不需要用到狀態管理的，反而是增加編碼複雜度，其實利用 React Context 或者 react-query 這類介面請求庫就能很好地滿足需求了。

  • redux，JS 應用的狀態容器，提供可預測的狀態管理
  • mobx，簡單，可擴充套件的狀態管理庫
  • recoil，React 狀態管理庫
  • xstate，有限狀態機
  • zustand，簡單、快速和可擴充套件的骨狀態管理解決方案

React 介面請求

  • axios，傳統介面請求庫
  • react-query，用於獲取、快取和更新 React 中非同步資料的 Hooks 介面請求庫
  • swr，用於資料請求的 React Hooks 庫

React SSR

  • nest.js，一個漸進式的 Node.js 框架，用於構建高效、可靠和可擴充套件的服務端應用。

React 單測

  • jest，優雅、簡潔的 JavaScript 測試框架，單測必選項
  • react-testing-library，簡單且完整的 React DOM 測試工具

React CSS 方案

React 原理

Blog 推薦

Vue

學習框架務必從文件出發，起碼熟讀一遍及自己寫過一些初步的 Demo 之後再考慮學習別的資料。

對於 Vue 來說，官方文件內容相當齊全，並且全家桶也都是官方出的，因此無需頭疼技術棧選型。

Vue 推薦學習路徑

目前 3.0 生態並不完善，在公司內部基本需要先熟悉 2.0 的寫法，因此推薦新手先學習 2.0 的內容。

Vue 推薦學習資料

Vue 原理

  • vue-analysis，黃老師出品
  • vue-design，官方人員出品，域名已過期，需要大家自行在倉庫內瀏覽內容。雖然麻煩了點，但是質量絕對過關

瀏覽器

一般說到瀏覽器，常指的都是 Chrome。瀏覽器作為前端不可或缺的載體，我們勢必需要好好學習及掌握其相關的知識。

另外瀏覽器中涉及到的知識面很多，與 JS 執行機制、網路、效能優化、安全等領域都有關聯，因此大家在學習這部分的內容時需要多與之前學習的知識聯絡起來。

架構

整體流程

渲染相關

JS 執行機制

快取

Devtools

  • Chrome DevTools，Google 出的 DevTools 的使用說明書，對於每個功能的使用都有詳細的介紹，看啥文章都不如看這個
  • Chrome_Devtools_Tricks，介紹了 Chrome DevTools 的使用技巧，從不同的情景來說明應該如何搭配使用 Chrome DevTools 中的小技巧，適合英文不怎麼好的讀者閱讀

瀏覽器安全

效能優化

效能優化是一個系統性工程，涉及到的方面很多，不僅僅只是大家常說的靜態檔案和程式碼優化那麼簡單。

大家學習這部分內容的時候可以先從推薦的文章中瞭解具體有哪些效能優化手段及具體方法，然後根據這些內容去實驗。

推薦書籍

其實效能優化相關的書籍市面上出的不多，優秀的也都是好幾年前的老書了，看不看也無所謂了。

推薦網站

  • web.dev，Google 自家的 blog，你能在這上面學到很多效能優化及如何做好使用者體驗的知識，其實很多市面上的文章內容都有這個網站的影子

整體優化建議

效能指標

效能監控

TypeScript

TypeScript 是為開發大型應用而設計的，並且 TypeScript 可轉譯成 JavaScript。由於 TypeScript 是 JavaScript 的嚴格超集，任何現有的 JavaScript 程式都是合法的 TypeScript 程式。

文件

推薦文章

推薦開源專案

Electron

Electron 是一個可以使用 Web 技術如 JavaScript、HTML 和 CSS 來建立跨平臺原生桌面應用的框架。藉助 Electron，我們可以使用純 JavaScript 來呼叫豐富的原生 APIs。

文件

推薦文章

推薦開源專案

元件庫

元件庫顧名思義指的就是將多個公共模組或者可複用的元件提取整合生成的一個倉庫

知名度較廣的元件庫：

相關文件：

推薦文章：

微前端

是一種類似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將單頁面前端應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。

優勢：

  • 程式碼庫更小，更內聚、可維護性更高
  • 鬆耦合、自治的團隊可擴充套件性更好
  • 漸進地升級、更新甚至重寫部分前端功能成為了可能
  • 獨立開發部署，縮小變更範圍，進而降低相關風險

框架：

推薦文章：

推薦學習資料

跨端框架

跨端的最主要的含義就是一套程式碼多端執行，減少重複勞動

目前看來，國內比較流行的是小程式, H5, App 三端跨的框架， uniapp 及 taro 是其中做的比較出彩的兩個框架。當然在 taro3.0 之前（以下主要是說小程式），taro 跟 uniapp 都是使用編譯時做更多的事情，編譯成小程式能夠執行的程式碼。

而在 taro3.0 之後變成了與 remax 相同的思想，在執行時做更多的事情，保證了原框架程式碼能夠完全使用，而不需要為了轉換成其他小程式時做相容。

監控

當業務進入穩定，最需要做的肯定是對於業務線上的各種效能、異常及常規業務進行監控，避免在上線之後成為瞎子。

目前市場比較出名的監控系統：

推薦開源庫：

  • rrweb，提供畫素級的錄製與回放，幫助正確定位問題是如何發生的
  • monitor，? 一款輕量級的收集頁面的使用者點選行為、路由跳轉、介面報錯、程式碼報錯、並上報服務端的 SDK
  • mitojs 上面 monitor 作者新維護的庫。全新插拔式的監控 SDK，程式碼架構更清晰，配置項更豐富，高度可定製化

推薦文章：

日常充電

CSS 日常充電

Github 優秀學習資料

JS 優秀學習資料

React 優秀學習資料

程式碼樣式及安全

  • secguide，面向開發人員梳理的程式碼安全指南

生產力工具

流程圖

最後

內容其實目前只能算作是第一版，並不完善，歡迎大家參與投稿內容，這裡是倉庫連結

相關文章