2022年web前端培訓(xùn)自學(xué)路線圖

時(shí)間：2023-05-16 20:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-16 20:54:01 來源：網(wǎng)站運(yùn)營(yíng)

2022年web前端培訓(xùn)自學(xué)路線圖：

初學(xué)者詳細(xì)Web前端學(xué)習(xí)路線圖

一、基礎(chǔ)知識(shí)

1、前端基礎(chǔ)合集（含HTML、CSS、HTML5、CSS3）

涵蓋了HTML、CSS、HTML5和CSS3的核心技術(shù)點(diǎn)。通過對(duì)本教程的學(xué)習(xí)，可以幫助初學(xué)者快速上手，并完成大部分靜態(tài)網(wǎng)頁(yè)的開發(fā)。除此之外，課程涵蓋大量的CSS技巧、動(dòng)畫、交互效果，對(duì)傳統(tǒng)浮動(dòng)和定位的布局方式，以及CSS3中的彈性盒和響應(yīng)式布局都有深入講解。

2、HTML5實(shí)戰(zhàn)

綜合HTML5的各個(gè)方面來構(gòu)建一個(gè)fullpage（全屏滾動(dòng)）的應(yīng)用。會(huì)從實(shí)戰(zhàn)的角度深入全面的分析HTML5中的技術(shù)。并將技術(shù)靈活的運(yùn)用入項(xiàng)目實(shí)戰(zhàn)中。應(yīng)用主要內(nèi)容包括：1.dom中位置尺寸api詳解;2.鼠標(biāo)事件的兼容;3.全屏滾動(dòng)的實(shí)現(xiàn); 4.3d輪播的實(shí)現(xiàn);5.3d品牌墻的實(shí)現(xiàn);6.機(jī)器人動(dòng)畫實(shí)現(xiàn);7.圖片炸裂動(dòng)畫實(shí)現(xiàn);8.canvas氣泡動(dòng)畫實(shí)現(xiàn)。

3、Bootstrap

全面剖析css3中的新增的各類屬性與方案。深入了解預(yù)處理less，并從源碼的角度解讀Bootstrap相關(guān)實(shí)現(xiàn)。

Bootstrap是一套簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，它可以讓web開發(fā)更迅速、簡(jiǎn)單。

4、JavaScript核心

涵蓋了ES標(biāo)準(zhǔn)、BOM以及DOM的大部分內(nèi)容，適合有一定HTML和CSS基礎(chǔ)的同學(xué)學(xué)習(xí)。 通過學(xué)習(xí)可以初步掌握J(rèn)avaScript，對(duì)面向?qū)ο蟮恼Z(yǔ)言有一個(gè)初步的理解。并且能夠通過DOM和BOM完成一項(xiàng)基本的頁(yè)面效果。 JavaScript的基礎(chǔ)對(duì)于一名前端工程師非常重要哦

5、JavaScript高級(jí)

深入淺出講解JavaScript核心也最具難度的部分技術(shù)：原型與原型鏈、執(zhí)行上下文、執(zhí)行上下文棧、變量提升、函數(shù)提升、作用域、作用域鏈、閉包、對(duì)象的多種創(chuàng)建模式、對(duì)象的繼承模式、JavaScript事件循環(huán)機(jī)制等。這部分技術(shù)是成為高級(jí)前端工程師需要掌握的利器。

6、jQuery

jQuery是使用廣泛的JS函數(shù)庫(kù)， 它能幫我們程序員簡(jiǎn)化DOM查詢及DOM操作， 輕松實(shí)現(xiàn)動(dòng)畫效果。全面深入講解jQuery庫(kù)的使用技術(shù)， 以及基于jQuery的項(xiàng)目開發(fā)技巧。

二、高階技術(shù)

1、ES6（涵蓋ES6-11）

現(xiàn)階段前端行業(yè)發(fā)展迅猛，前端技術(shù)也在高速迭代，ES6-ES11規(guī)范增加了很多JavaScript新特性。ES新特性已經(jīng)成為前端技術(shù)發(fā)展的趨勢(shì)，語(yǔ)法簡(jiǎn)潔，功能豐富，部分特性還有性能提升。

2、Promise

由淺入深，通俗易懂，對(duì)復(fù)雜的實(shí)現(xiàn)庖丁解牛，分步拆解，采用闖關(guān)式設(shè)計(jì)，循序漸進(jìn)的講解，更具學(xué)習(xí)的趣味性。內(nèi)容涵蓋前端與后端異步編程任務(wù)實(shí)踐，讓你宏觀認(rèn)識(shí)Promise。

3、JS模塊化說明

當(dāng)項(xiàng)目功能越來越多，代碼量便也會(huì)越來越多，后期的維護(hù)難度會(huì)增大，此時(shí)在JS方面就會(huì)考慮使用模塊化規(guī)范去管理。 本視頻內(nèi)容涵蓋：理解模塊化，為什么要模塊化，模塊化的優(yōu)缺點(diǎn)以及模塊化規(guī)范。

4、NodeJS核心技術(shù)

Node.js 簡(jiǎn)介、下載、安裝、模塊化、CommonJS、NPM、以及 Buffer、fs等模塊的基本使用。 本視頻適合有一定 JS 基礎(chǔ)的同學(xué)進(jìn)行學(xué)習(xí)，Node.js 是前端開發(fā)需要掌握的技能之一。

5、MongoDB

MongoDB 是使用廣泛的 NoSQL 數(shù)據(jù)庫(kù)之一，在實(shí)際項(xiàng)目中應(yīng)用也越來越廣。 學(xué)習(xí)涵蓋了MongoDB簡(jiǎn)介、下載、安裝、添加系統(tǒng)服務(wù)、圖形化客戶端的使用、以及MongoDB的CRUD基本操作、查詢/修改操作符的使用等。該視頻適合有 Node.js 基礎(chǔ)的同學(xué)學(xué)習(xí)。

6、AJAX技術(shù)

AJAX技術(shù)能夠?qū)崿F(xiàn)無(wú)需重新加載整個(gè)網(wǎng)頁(yè)，就可以更新部分網(wǎng)頁(yè)內(nèi)容。在WEB應(yīng)用中AJAX使用十分廣泛，百度，淘寶，京東等常見的PC端網(wǎng)頁(yè)以及各種WEB App, 隨處可見它的身影，AJAX已經(jīng)成為前端工程師的常備技能之一。

7、xios

axios是一個(gè)基于Promise的HTTP客戶端，可以用在瀏覽器和node.js中，向服務(wù)器發(fā)送AJAX請(qǐng)求進(jìn)行數(shù)據(jù)交換，是現(xiàn)在前端炙手可熱的請(qǐng)求工具。

8、Git

學(xué)習(xí)從本地客戶端的角度講解Git和GitHub，并著重通過一些案例來演示Git的底層原理，能夠?qū)it和GitHub有更清晰的認(rèn)識(shí)。

9、Webpack

webpack作為現(xiàn)代前端開發(fā)中廣泛使用的模塊打包工具，廣泛應(yīng)用于前端工程領(lǐng)域，是前端工程師所需的技能之一。全球知名公司（如：谷歌、阿里、騰訊等）都在使用webpack作為常用模塊打包工具。

學(xué)習(xí)涉及知識(shí)點(diǎn)：tree shaking、code spilt、caching、HMR、PWA、lazy loading、prefetch、Dll等核心配置。

10、Webpack高級(jí)進(jìn)階

學(xué)習(xí)內(nèi)容包含React/Vue版本腳手架分析、基于Webpack5編寫自己的loader和plugin等，讓你開發(fā)時(shí)選擇更多樣，最后，用不到一百行的代碼實(shí)現(xiàn)Webpack打包。

11、React全家桶

師出名門的UI組件庫(kù)：antd（螞蟻金服出品），集中式狀態(tài)管理的經(jīng)典之作：Redux，消息訂閱與發(fā)布理念中的老大哥：Pubsub，同時(shí)擴(kuò)展了React的hooks、錯(cuò)誤邊界、Context等內(nèi)容，全面且系統(tǒng)的知識(shí)點(diǎn)剖析，輕松駕馭真實(shí)項(xiàng)目！

12、Vue全家桶

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，是目前最火的前端框架之一，是前端工程師的必備技能。

13、TypeScript

TypeScript是一種由微軟開發(fā)的開源、跨平臺(tái)的編程語(yǔ)言。TypeScript是JavaScript的一個(gè)超集，支持ES6標(biāo)準(zhǔn)，可以編譯成純JavaScript運(yùn)行在任何瀏覽器上。

14、Vue3新特性

基于Vue3.0版本，對(duì)Vue3.0版本的新特性、Composition API、新組件及TypeScript進(jìn)行了詳盡的源碼級(jí)講解。

15、微信小程序新版

采用項(xiàng)目驅(qū)動(dòng)式講解，以網(wǎng)易云音樂為原型進(jìn)行項(xiàng)目構(gòu)建，使用網(wǎng)易云音樂真實(shí)API接口數(shù)據(jù)，且最終效果同網(wǎng)易云音樂App保持一致，做到真正的企業(yè)級(jí)項(xiàng)目講解。

16、前端熱門面試題

內(nèi)容涵蓋：HTML,CSS,JavaScript基礎(chǔ)到高級(jí)的內(nèi)容，移動(dòng)端經(jīng)典問題，js經(jīng)典筆試題，node.js，React，Vue，小程序等。通過面試題的講解，既能了解前端的整個(gè)知識(shí)體系，又能在面試中游刃有余。

三、綜合實(shí)戰(zhàn)

1、項(xiàng)目實(shí)戰(zhàn)：谷粒音樂

谷粒音樂是使用WEB技術(shù)(HTML、JavaScript、CSS)直接構(gòu)建的移動(dòng)端App。

2、Vue項(xiàng)目實(shí)戰(zhàn)：硅谷外賣

項(xiàng)目是關(guān)于外賣業(yè)務(wù)的前后臺(tái)分離Web App，功能模塊包含商家, 商品, 購(gòu)物車, 用戶管理等多個(gè)模塊。

3、Vue項(xiàng)目實(shí)戰(zhàn)：尚品匯

前臺(tái)+后臺(tái)，雙項(xiàng)目實(shí)戰(zhàn)，前后端項(xiàng)目二者相互獨(dú)立，又可以結(jié)合在一起，滿足對(duì)大型Vue項(xiàng)目實(shí)戰(zhàn)的需求，覆蓋Vue框架方方面面的知識(shí)點(diǎn)，全面、詳細(xì)！

4、項(xiàng)目實(shí)戰(zhàn)：硅谷直聘

項(xiàng)目是基于新版本 React 的全棧項(xiàng)目，此項(xiàng)目為一個(gè)前后臺(tái)分離的招聘的 SPA, 包括前端應(yīng)用和后端應(yīng)用。

5、React全棧項(xiàng)目：谷粒后臺(tái)

“React全棧SPA項(xiàng)目”，依托某大型企業(yè)級(jí)電商網(wǎng)站，使用React全家桶+AntD框架實(shí)現(xiàn)電商的后臺(tái)管理系統(tǒng)。

6、微信公眾號(hào)

從零開始學(xué)習(xí)微信公眾號(hào)，從開發(fā)套路到整體功能實(shí)現(xiàn)，以express框架為基礎(chǔ)，搭建一個(gè)完整的Node.js服務(wù)器后臺(tái)。

四、選學(xué)（技術(shù)豐富）

1、Zepto

作為一個(gè)輕量級(jí)、又和jQuery類似的前端框架，Zepto是很多工程師移動(dòng)端開發(fā)的選擇。

2、AngularJS

進(jìn)行基于AngularJS框架的應(yīng)用開發(fā)，并對(duì)后續(xù)學(xué)習(xí)React和VUE框架打下良好基礎(chǔ)。

3、項(xiàng)目構(gòu)建工具Gulp

學(xué)習(xí)使用構(gòu)建工具去對(duì) JS、CSS、HTML、LESS、IMG 等進(jìn)行合并壓縮構(gòu)建到實(shí)現(xiàn)自動(dòng)化構(gòu)建項(xiàng)目。是前端工程師所需的技能之一。

4、Vue源碼解析

直達(dá)核心，分析Vue底層工作原理，將Vue核心模塊一一拆解，手寫底層源碼。

5、項(xiàng)目構(gòu)建工具Grunt

使用構(gòu)建工具去對(duì) JS、CSS、HTML、LESS、IMG 等進(jìn)行合并壓縮構(gòu)建到實(shí)現(xiàn)自動(dòng)化構(gòu)建項(xiàng)目。是前端工程師所需的技能之一。

6、自定義工具函數(shù)庫(kù)

構(gòu)建一個(gè)屬于自己的工具函數(shù)庫(kù)，掌握常用數(shù)組、對(duì)象、字符串函數(shù)的實(shí)現(xiàn)原理，掌握事件總線的實(shí)現(xiàn)原理，掌握消息訂閱與發(fā)布的實(shí)現(xiàn)原理，以及事件委托及其功能函數(shù)的封裝。




紙上得來終覺淺，絕知此事要躬行。沖鴨~~~