碼上快樂

相關內容    簡體    繁體

前端進階知識路線

本文轉載自   查看原文   2021-10-13 10:35   119 

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

公眾號作者：廣東靚仔

 

如何高效自學

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，面向開發人員梳理的代碼安全指南

生產力工具

流程圖

 

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

公眾號作者：廣東靚仔

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 MySQL學習進階路線 前端進階筆記之核心基礎知識---那些HTML標簽你熟悉嗎？ Java進階路線圖 Java后端學習路線進階 推薦 | Vue 入門&進階路線 php自學提升進階路線 前端學習路線整理 Web前端學習路線 前端學習路線 前端學習路線
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM