懂前端的不凡君已從事軟件開發(fā)10余年，曾做過java開發(fā)，android開發(fā)，web前端開發(fā)。從事過java講師，前端講師?，F(xiàn)在鄭州培訓(xùn)機(jī)構(gòu)任教，主要擔(dān)任前端講師，課程主編，就業(yè)導(dǎo)師。對前端教學(xué),前端自學(xué),前端轉(zhuǎn)行方面應(yīng)該是有相當(dāng)?shù)慕?jīng)驗(yàn),在看到很多新手在學(xué)習(xí)前端的時(shí)候不知道怎么學(xué),不知道學(xué)到什么程度,在這里我想做一個(gè)前端自學(xué)的路線,希望能幫助到想自學(xué)的新手,避免走彎路.

前端開發(fā)做什么?

自學(xué)之前,先了解下什么是前端?前端到底做什么? 前端的未來發(fā)展如何?

插入一段初學(xué)者科普視頻:

自學(xué)的目標(biāo)是什么?

首先搞明白,你自學(xué)的目標(biāo)是什么,這點(diǎn)非常重要. 曾經(jīng)有個(gè)加我微信的同學(xué)自學(xué),其中有連續(xù)2年間時(shí)不時(shí)的會問我一點(diǎn)問題.我很納悶的問她,兩年了,為什么你還在學(xué)js基礎(chǔ).她的回答是我現(xiàn)在有工作,這個(gè)就是想有時(shí)間學(xué)一學(xué),差不多了就轉(zhuǎn)行.去某大學(xué)做宣講也遇到過同學(xué)說有興趣,想作為興趣學(xué)習(xí)但沒打算從事這個(gè)行業(yè),就覺得編程能鍛煉人的思維能力.也有遇到過想試試,能學(xué)會了就學(xué),學(xué)不會了就放棄.?如果你是前面這幾種情況,我勸你還是不要浪費(fèi)時(shí)間.這里有人會站起來反駁我,俗話講"興趣是最好的老師",作為老師怎么能這么輕易的勸退呢? 而我想說的是"你憑什么那么自信,拿你的愛好去挑戰(zhàn)人家的職業(yè)?",如果你沒有一個(gè)明確的既定的目標(biāo),那么學(xué)起來多半是半途而廢(興趣?興趣也要有產(chǎn)出才能維持,當(dāng)然能把興趣和職業(yè)結(jié)合起來才是yyds). 前端開發(fā)雖然是編程領(lǐng)域最簡單的一個(gè)方向,但要真的能勝任這個(gè)職位,還是需要相當(dāng)長的時(shí)間去學(xué)習(xí),要求你有系統(tǒng)的知識體系,要求你掌握當(dāng)前最流行的技術(shù)框架. 你能寫個(gè)p標(biāo)簽,能畫個(gè)頁面出來,能寫個(gè)99乘法表,不叫學(xué)會,你能解決開發(fā)問題,能獨(dú)立實(shí)現(xiàn)公司需求才叫學(xué)會了.沒決心,沒目標(biāo),沒壓力的晃晃悠悠的自認(rèn)為在學(xué),結(jié)果可想而知.

2022年前端的知識體系是什么?

筆者在這里會給大家列舉你要轉(zhuǎn)行前端或者自學(xué)前端的一個(gè)知識體系,當(dāng)前體系適用于2022年.當(dāng)然前端知識體系很龐大,這里列舉的都是你必須知道的,能幫助你走向職業(yè)道路的技能點(diǎn).

第一部分: html和css基礎(chǔ)

html和css基礎(chǔ)是任何前端初學(xué)者接觸到的第一個(gè)知識點(diǎn).這塊內(nèi)容對于一個(gè)前端開發(fā)者來說是入門是基礎(chǔ),是簡單到不能再簡單的內(nèi)容,但對于一個(gè)初學(xué)者來說,卻容易成為一灘沼澤,一座雪山,一片森林,一個(gè)花了很多精力很多時(shí)間依然跨不過去的障礙,很明顯大多數(shù)數(shù)初學(xué)者并沒有掌握正確的學(xué)習(xí)它的方法.

這塊內(nèi)容的特點(diǎn)是: 規(guī)則繁多,碎片化,枯燥,沒有邏輯.你想實(shí)現(xiàn)一個(gè)簡單的頁面,也需要掌握所有的知識體系,缺一不可,就像玩拼圖,少一個(gè)碎片就無法完整的拼圖.所以這塊內(nèi)容學(xué)習(xí)不宜打持久戰(zhàn),學(xué)的越持久越容易忘.

建議的學(xué)習(xí)方法:?快速的把常用標(biāo)簽,常用css屬性和css權(quán)重掌握,搞清楚標(biāo)簽的表現(xiàn)形式,盒子模型,浮動(dòng)和定位.?至于html5新增的標(biāo)簽和css3新增的動(dòng)畫等屬性先不要看. 不要試圖把所有的知識點(diǎn)都背會,拖得越久你會發(fā)現(xiàn)前面的又忘了. 當(dāng)你差不多掌握一個(gè)完整的體系的時(shí)候,開始寫頁面.從一個(gè)簡單的導(dǎo)航模塊開始,再實(shí)現(xiàn)一個(gè)卡片頁面,再實(shí)現(xiàn)一系列的卡片頁面.最后考慮整體頁面的實(shí)現(xiàn). 在實(shí)現(xiàn)的過程中,對于忘記的屬性即使回看,使用并理解.相信你在完成一個(gè)完整的頁面后,會對這塊知識點(diǎn)有一個(gè)比較清晰的認(rèn)知.然后再練習(xí)整站,一兩個(gè)下來你基本可以做到精通.當(dāng)然在寫代碼的時(shí)候,一定要注意命名和代碼規(guī)范.

第二部分:JavaScript

2.1 JavaScript基礎(chǔ)語法

web前端學(xué)習(xí)的核心就是js，但這并不意味js就難。相反，js基礎(chǔ)語法很簡單，你完全可以通過5天時(shí)間的學(xué)習(xí)來掌握相關(guān)內(nèi)容：變量，數(shù)據(jù)類型，函數(shù)，對象，循環(huán)，邏輯判斷等。要知道js的發(fā)明初衷就是“要像極了java（因?yàn)?4年java比較流行），但要比java簡單，要使不懂編程的人能快速的學(xué)會”。當(dāng)你學(xué)會基本語法后，嘗試做一些編程練習(xí)，比如打印99乘法表，計(jì)算bmi等，練習(xí)題可以百度找。不建議刷力扣，力扣是編程界的奧數(shù)，可以幫你打開思維，但對初學(xué)者并沒有多少學(xué)習(xí)上的幫助，甚至容易勸退。

當(dāng)你能夠熟練的運(yùn)用js基礎(chǔ)語法的各種規(guī)則，接下來就要學(xué)習(xí)DOM操作api。簡單來說就是需要用js控制瀏覽器中的html元素，比如改變文字顏色，修改元素大小，給按鈕添加事件，點(diǎn)擊后能觸發(fā)相關(guān)程序等功能。完整一點(diǎn)的比如實(shí)現(xiàn)一個(gè)輪播和其他特效等，這是作為一個(gè)前端開發(fā)者必須掌握的知識點(diǎn)。

BOM相關(guān)api筆者認(rèn)為了解即可，因?yàn)閷傩蕴?，也容易記混。后期用到了知道去哪找，知道怎么用就完全ok。配合實(shí)現(xiàn)相關(guān)案例比如無縫輪播，拖拽，放大鏡特效等，todoList是一個(gè)練習(xí)DOM操作增刪改查極好的案例。

數(shù)據(jù)結(jié)構(gòu)和算法是面試的裝逼利器，一般在面試中可能會問到，而這方面的能力在前端開發(fā)方面一般又用不著。所以是一個(gè)加分項(xiàng)，能了解一部分最好。如果你感覺前面學(xué)的內(nèi)容掌握的不錯(cuò)，而且壓抑不住自己那種編程的沖動(dòng)，可以嘗試去力扣找相關(guān)的題目作為練習(xí)。建議：找簡單題目即可，且不可好高騖遠(yuǎn)亂了節(jié)奏。

jQuery是曾經(jīng)的王者。曾幾何時(shí)你只要是作為軟件開發(fā)者幾乎人人必會jQuery。比如一個(gè)java程序員哪怕根本不懂什么dom操作，但jq也得會搗騰個(gè)ajax請求。jq本質(zhì)是原生dom操作的封裝，宗旨是“write less，and do more."。所以如果你掌握原生dom操作，學(xué)習(xí)jquery可能只需要一天時(shí)間。然后利用jq進(jìn)行插件封裝確實(shí)減少了很多代碼，但編程思路沒有任何區(qū)別。

至于為什么現(xiàn)在前端開發(fā)基本上不會用jq了，前面的視頻已經(jīng)說過了。當(dāng)下有更先進(jìn)的框架比如vue從根本上改變了dom操作的思路，更快，更方便，功能更強(qiáng)大，jquery已經(jīng)成為過去式。

2.3 html5和css新增

初學(xué)者在學(xué)習(xí)這塊內(nèi)容的時(shí)候容易被帶節(jié)奏。html5和css3新增了很多的標(biāo)簽和屬性，但是很多知識點(diǎn)我們根本用不上，有些甚至比較雞肋。初學(xué)者在學(xué)了很多新知識，往往不知道怎么用，心力交瘁甚至變得心灰意冷。這里不夸張的說筆者曾經(jīng)看h5新內(nèi)容的時(shí)候就是這種感覺，很多小玩意兒不知道在哪用，想不通為什么要這么設(shè)計(jì)。好在通過后來的開發(fā)明確了哪些需要用哪些不需要用。”盡信書則不如無書“，這塊內(nèi)容學(xué)習(xí)的時(shí)候建議就學(xué)習(xí)筆者給大家畫的這幅圖里的知識點(diǎn)，其它的先放一放。

2.4 Ajax技術(shù)

ajax技術(shù)是前端開發(fā)者必須掌握的一項(xiàng)技術(shù)。有同學(xué)在這一塊會容易鉆牛角尖，覺得難。其實(shí)ajax就是一個(gè)頁面局部刷新的技術(shù)，我們通過js發(fā)送請求，可以偷偷在頁面不刷新的情況下發(fā)數(shù)據(jù)給后臺，然后根據(jù)后臺返回的數(shù)據(jù)更新頁面內(nèi)容。不要去糾結(jié)原生ajax怎么寫，開發(fā)中不會讓你手寫原生ajax，都是封裝好的api。你需要搞清楚的是什么是后臺服務(wù)，什么是接口，什么是請求和相應(yīng)，以及拿到相應(yīng)的數(shù)據(jù)如何處理等問題。在實(shí)際項(xiàng)目中ajax的運(yùn)用如喝水吃飯一樣平常。當(dāng)然這塊內(nèi)容的學(xué)習(xí)你需要一個(gè)后臺服務(wù)提供接口，網(wǎng)上可以百度免費(fèi)的第三方ajax測試接口。曾經(jīng)豆瓣電影挺好的，但現(xiàn)在不能用了。好在筆者當(dāng)時(shí)寫了個(gè)爬蟲爬了一部分電影數(shù)據(jù)。

2.5 js高級

這里涉及到的面向?qū)ο缶幊毯拖嚓P(guān)概念，是一個(gè)合格的前端程序員都應(yīng)該清楚的，當(dāng)然在面試的時(shí)候也是高頻面試題。面向?qū)ο缶幊淌且环N思想，和具體的語言無關(guān)。當(dāng)然想讓你立馬理解并運(yùn)用這種思想進(jìn)行編程有點(diǎn)強(qiáng)人所難了，所以建議學(xué)會面向?qū)ο缶幊痰奶茁贰?#34;我不一定能教會你面向?qū)ο缶幊趟枷?，但我能教會你套路”，照著代碼套路寫就ok。然后es5原生繼承是一個(gè)很難理解的概念，不要去試圖推導(dǎo)這個(gè)過程，直接記住最優(yōu)寫法：借用構(gòu)造函數(shù)+原型繼承，應(yīng)付面試沒問題。

至于高階函數(shù)，閉包，偏函數(shù)柯里化等，找到相關(guān)的案例實(shí)現(xiàn)一邊，稍稍體會即可。防抖和節(jié)流是必須要搞清楚的，而且最好能手動(dòng)實(shí)現(xiàn)。

es6現(xiàn)在特指javascript在2015年之后發(fā)布的（所有）版本。es6提供了很多新的api，新的方法和屬性。其中箭頭函數(shù)尤為方便，不僅簡化了代碼，而且避免this指針混亂。新的數(shù)組方法更是滿足了我們操作數(shù)組的各種需求，原來需要寫大量代碼實(shí)現(xiàn)的，這里只需要調(diào)一個(gè)方法，非常方便。尤其是promise和async語法糖的出現(xiàn)，直接把異步操作變成了“同步”，讓我們在編碼的時(shí)候能更清晰的處理業(yè)務(wù)邏輯而不用擔(dān)心執(zhí)行順序，真是太棒了。

第三部分: vue基礎(chǔ)

3.1 vue基礎(chǔ)語法

vue為什么能成為國內(nèi)最流行的前端框架? 簡單易上手和文檔清晰占了主要作用.所以作為初學(xué)者如果具備基本的js基礎(chǔ),自己參照官網(wǎng)教程學(xué)習(xí)vue絕非難事.當(dāng)然里面會涉及到很多之前沒有遇到的概念,比如雙向相應(yīng),計(jì)算屬性,組件,插槽,路由等不容易理解.通過仔細(xì)的閱讀官方教程再配合例子,相信你一定能搞定它.

vue高級部分在面試的時(shí)候可能會問的比較多,所以需要通讀vue文檔,不放過每一個(gè)細(xì)節(jié).對不懂的地方也可以通過百度等形式查找,或者自己寫例子來配合理解.elementUI屬于vue全家桶的一部分,是vue開發(fā)中必學(xué)內(nèi)容.

第四部分: 移動(dòng)端開發(fā)

4.1 移動(dòng)端開發(fā)體系

移動(dòng)端開發(fā)中的頁面開發(fā)主要分為兩種形式:?響應(yīng)式開發(fā)和移動(dòng)端開發(fā). 響應(yīng)式開發(fā)可以參考我們官網(wǎng),即一套代碼可以同時(shí)適配pc端和移動(dòng)端,需要一定的開發(fā)經(jīng)驗(yàn). 移動(dòng)端開發(fā)相對簡單,直接通過rem自動(dòng)適配,參考小米官網(wǎng).

4.2 微信小程序開發(fā)

微信小程序?qū)W習(xí)非常簡單.微信小程序開發(fā)是前端開發(fā)者的必然需求.本身語法比較簡單,而且不用擔(dān)心兼容問題和適配問題.唯一讓初學(xué)者膽怯的是那文檔中的上百的接口,好在90%的接口我們在90%的開發(fā)中幾乎用不到.

說明:如果你是自學(xué),建議這一塊暫時(shí)直接放棄. 因?yàn)椴缓么罱ōh(huán)境,而且沒有后臺服務(wù).

4.4 uni-app開發(fā)

uniapp能夠?qū)崿F(xiàn)跨平臺應(yīng)用開發(fā). 一套代碼可以同時(shí)打包為移動(dòng)端網(wǎng)頁,微信小程序,android和ios原生app. 還包括其它平臺小程序,比如支付寶小程序,抖音小程序等. 由于本身采用vue框架語法,所以學(xué)習(xí)成本和開發(fā)成本極低.又同時(shí)可打包為微信小程序和原生app,開發(fā)效率又高.得到了廣大中小型公司的青睞,這幾年也是飛速發(fā)展,生態(tài)相當(dāng)活躍. 具體內(nèi)容可以到uniapp官網(wǎng)自行查看。

uniapp的項(xiàng)目在練手的時(shí)候,最好配合后臺接口,實(shí)現(xiàn)模擬真實(shí)環(huán)境項(xiàng)目開發(fā). 這里要涉及的不僅僅是基本的語法和樣式,還要學(xué)會項(xiàng)目的工程化開發(fā). 其中包括公共組件封裝,api接口封裝,工具類封裝等規(guī)范,還要體會在實(shí)際開發(fā)中前后端聯(lián)調(diào)可能出現(xiàn)個(gè)各種問題,分析定位問題從而解決問題.

第五部分: 中后臺開發(fā)

5.1 中后臺框架

中后臺項(xiàng)目開發(fā)是前端開發(fā)者都必須要涉及的一個(gè)領(lǐng)域. 如果前面內(nèi)容學(xué)的還可以,這塊需求可以說是相當(dāng)簡單.我們會借助elementUI框架搭建腳手架,然后對公共組件和方法進(jìn)行封裝,合理的項(xiàng)目結(jié)構(gòu)也非常重要.在此基礎(chǔ)上只需要練習(xí)后臺頁面常見的增刪改查邏輯即可.對初學(xué)者難點(diǎn)在于如何獲取后臺接口,如何封裝接口,如何處理跨域等問題.

elementUI網(wǎng)址:?The world's most popular Vue UI framework

5.2 typescript

typescript簡稱ts,由微軟開發(fā).TypeScript具有類型系統(tǒng)，且是JavaScript的超集。 它可以編譯成普通的JavaScript代碼。 TypeScript支持任意瀏覽器，任意環(huán)境，任意系統(tǒng)并且是開源的。

ts目前可以和vue2.x和vue3.x集成,在react項(xiàng)目中集成的也比較多. 目前主流的vue2.x開發(fā)大部分不會集成ts.所以對于初學(xué)者來說,ts可以作為補(bǔ)充內(nèi)容后期學(xué)習(xí).

學(xué)習(xí)難點(diǎn):對初接觸編程的新人來說,沒見過強(qiáng)類型語法,比如java,只是到var. ts是把js用強(qiáng)類型的形式去寫,自然也體會不到強(qiáng)類型的好處. 另外ts需要和相關(guān)框架做集成才能使用,不存在單獨(dú)使用ts,也增加了學(xué)習(xí)ts的成本.

補(bǔ)充: react技術(shù)棧

react技術(shù)棧比較靈活，尤其是狀態(tài)管理。這里采用umi作為腳手架，dva作為狀態(tài)管理和路由管理對項(xiàng)目進(jìn)行集成。Umi 是螞蟻集團(tuán)的底層前端框架，能夠方便快速的搭建基于react antd的中后臺框架，能為開發(fā)者省去技術(shù)選型，ui框架集成，項(xiàng)目架構(gòu)等方面的開發(fā)時(shí)間，適合基于react技術(shù)的初學(xué)者。

上圖來源于不凡君寫的關(guān)于react入門教程部分內(nèi)容，由于平臺機(jī)制問題，這里無法放鏈接。但文檔本身是開放的，免費(fèi)的。

補(bǔ)充: nodejs

嚴(yán)格來說,nodejs是一個(gè)單獨(dú)的方向,但這個(gè)方向又比較尷尬,往往不是通過培訓(xùn)發(fā)展出來的. nodejs是后臺開發(fā),或是開發(fā)一些中間件,或者爬蟲.工作種從事nodejs開發(fā)的往往是從前端轉(zhuǎn)過來的,但很少有人學(xué)習(xí)前端就是為了學(xué)習(xí)nodejs.

nodejs本身就是js語法,學(xué)起來比較簡單,只不過是把瀏覽器的js解析引擎搬到了主機(jī)系統(tǒng),運(yùn)行環(huán)境的區(qū)別.nodejs可以方便的對硬盤文件進(jìn)行讀寫,可以訪問數(shù)據(jù)庫,可以發(fā)送數(shù)據(jù)請求等,有別于瀏覽器環(huán)境.所以學(xué)習(xí)nodejs需要額外學(xué)習(xí)數(shù)據(jù)庫,比如mysql或者mogodb.

nodejs作為后臺語言,也有web框架比如express,koa等,和java的springMVC等需求類似.

總結(jié): 對前端的初學(xué)者而言,nodejs只存在與后期的項(xiàng)目打包,壓縮,以來安裝等底層計(jì)算,我們根本不需要涉及nodejs本身.所以學(xué)習(xí)的時(shí)候可以把nodejs作為選修放到最后.

更多內(nèi)容持續(xù)更新中。。。