2020 前端學(xué)習(xí)路線總結(jié)

在 GitHub 看到一個很不錯的前端學(xué)習(xí)路線圖（roadmap），從前端基礎(chǔ)到前端工程化，再到跨端，都有知識點的覆蓋，非常推薦閱讀。

圖下面是我翻譯的一個文字版，可以先看圖再看文字。
?? 表示個人推薦學(xué)習(xí)
?? 表示可選擇學(xué)習(xí)
?? 表示不需要嚴(yán)格按照路線的先后順序，可在任何時間補(bǔ)充這一塊的知識
? 表示個人不再推薦

計算機(jī)網(wǎng)絡(luò)

掌握計算機(jī)網(wǎng)絡(luò)的基礎(chǔ)是一名前端工程師的基本素養(yǎng)，建議先學(xué)習(xí)以下的知識：

?? Internet 如何工作

?? HTTP 協(xié)議

?? 瀏覽器工作機(jī)制

?? DNS 及其運行機(jī)制

??了解域名、網(wǎng)站托管

HTML

?? 學(xué)習(xí) HTML 基礎(chǔ)，標(biāo)簽、元素、表單驗證等等

?? 語義化標(biāo)簽

?? 了解 Web 無障礙（Accessibility）

?? 學(xué)習(xí) SEO 優(yōu)化

CSS

?? 學(xué)習(xí) CSS 基礎(chǔ)

?? 制作布局：浮動、定位、顯示、盒模型、網(wǎng)格布局、彈性布局

?? 響應(yīng)式設(shè)計和媒體查詢（@media）

?? 結(jié)合 HTML 制作一個簡單的網(wǎng)頁作為最佳實踐

JavaScript

?? 學(xué)習(xí)語法和基本結(jié)構(gòu)

?? 學(xué)習(xí)操作 DOM

?? 學(xué)習(xí) Fetch API / Ajax（XHR）

?? ES6+ 和模塊化 JavaScript

?? 了解變量提升、事件冒泡機(jī)制、作用域、原型、Shadow DOM、嚴(yán)格模式等概念

版本控制

?? Git 的基本操作

?? 創(chuàng)建賬號并且學(xué)習(xí)使用 GitHub

?? 創(chuàng)建賬號并且學(xué)習(xí)使用 GitLab

Web 安全知識

?? HTTPS

?? 內(nèi)容安全策略（CSP）

?? 跨域資源共享

?? OWASP 安全風(fēng)險

上面的內(nèi)容是前端最基礎(chǔ)的部分，建議多花時間，掌握好每一個知識點。

從這開始，將進(jìn)入前端工程化的部分，你可能會接觸到很多種不同的框架，并學(xué)習(xí)使用多種的工具為自己的開發(fā)提效。

包管理工具

npm 和 yarn 都很好，選擇一個學(xué)習(xí)即可，他們兩是相似的

?? npm

?? yarn

CSS 構(gòu)架

通過使用現(xiàn)代的 CSS 框架和 CSS-in-JS 的書寫方式，不用再擔(dān)心 CSS 的構(gòu)架問題，但熟悉 BEM 規(guī)范是一個不錯的選擇。

?? BEM，一種書寫規(guī)范

? OOCSS

? SMACSS

CSS 預(yù)處理器

以下三個可選擇一個進(jìn)行學(xué)習(xí)。

?? SCSS

?? PostCSS

?? Less

構(gòu)建工具

任務(wù)執(zhí)行器

• ?? npm scripts
• ? Gulp

2.代碼檢查和格式化工具

• ?? Prettier 代碼格式化
• ?? ESLint 代碼檢查
• ? StandardJS

3.模塊打包

?? Webpack

?? Rollup

?? Parcel

前端框架

前端框架推薦先學(xué)習(xí) React，能理解函數(shù)式編程和組件化。Vue 的特點是上手快，中文文檔齊全，可以選擇性的學(xué)習(xí)。

?? React.js

• ??Redux
• ?? MobX

2.?? Vue.js

• • VueX

3.?? Angular

• • RxJS
  • NgRx

現(xiàn)代 CSS

?? Styled Component

?? CSS Module

?? Styled JSX

?? Emotion

? Radium

? Glamorou

Web 組件

?? HTML 模版

?? 自定義元素

?? Shadow DOM

CSS 框架

CSS 框架有兩種，一種是基于 JavaScript 框架開發(fā)的應(yīng)用程序。推薦的框架有：

?? Reactstrap

?? Material UI

?? TailWind CSS

?? Chakra UI

另外一只是純 CSS 框架，默認(rèn)和不和 JavaScript 組件一起使用。

?? BootStrap

?? Materialize CSS

?? Bulma

測試

在這里你需要學(xué)習(xí)使用下面的框架進(jìn)行單元、集成和功能測試。

?? Jest

?? react-testing-library

?? Cypress

?? Enzyme

類型檢查器

???? TypeScript

? Flow

上面是前端工程化的學(xué)習(xí)內(nèi)容，接下來的內(nèi)容涉及到性能、服務(wù)端渲染以及跨端，這一部分前端也叫被稱作「大前端」。

PWA

?? 學(xué)習(xí) PWA 中使用到的 Web API：

• Storage
• Web Sockets
• Service Workers
• 定位
• 通知
• 設(shè)備方向
• 支付、證書等等

2.??計算、測量以及提高性能：

• PRPL 模式
• RAIL 模式
• 性能指標(biāo)
• 學(xué)習(xí)使用 LightHouse
• 學(xué)習(xí)使用 DevTools

服務(wù)端渲染

?? Next.js （React.js）

?? Nuxt.js （Vue.js）

?? Universal（Angular）

?? GraphQL

?? Apollo

?? Relay Modern

?? 靜態(tài)網(wǎng)站生成

?? Next.js

?? GatsbyJS

?? Nuxt.js

?? Vuepress

?? JekyII

?? Hugo

?? 移動端應(yīng)用開發(fā)

?? ReactNative

?? Flutter

?? 桌面應(yīng)用開發(fā)

?? Electron

?? Carlo

?? Proton Native

?? WebAssembly

總結(jié)完畢，不由得感嘆前端生態(tài)真是豐富多彩，要學(xué)的東西很多，自己不懂的也很多，有些知識點也是淺嘗輒止。雖然有這么多的方向，但還是需要找到一個點能夠深挖。

如果你是前端的初學(xué)者，也不要被這些框架給嚇到，學(xué)好基礎(chǔ)然后加以實踐更為重要。

上面推薦的 Roadmap GitHub 倉庫里也有后端以及 DevOps 的學(xué)習(xí)路線，可以自行瀏覽，如果有時間我也會整理出一版文字版以供大家參閱。

Keep Learning，持續(xù)精進(jìn)。

web的前端：最詳細(xì)的web前端學(xué)習(xí)攻略，直接收藏吧！?zhuanlan.zhihu.com作者：mydev
鏈接：https://juejin.im/post/6895203865336119304
來源：掘金

總結(jié)

以上是生活随笔為你收集整理的前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。