至今已是2023年，經(jīng)過(guò)近幾年的發(fā)展，前端的生態(tài)已經(jīng)得到很好的完善，像uniapp、echarts等框架，讓前端的生態(tài)多姿多彩，本文就目前2023年的前端生態(tài)進(jìn)行度量，看看那些是前端技術(shù)員去學(xué)習(xí)新技術(shù)是，應(yīng)當(dāng)優(yōu)先學(xué)習(xí)的技術(shù)點(diǎn)。

8星

• ????HTML???????????理解塊、行級(jí)元素會(huì)讓自己學(xué)習(xí)HTML布局快很多
  

• ? ? HTML5????????新特性基本上被UI組件庫(kù)替代，基本了解即可

• ????CSS????????????玄學(xué)技術(shù)點(diǎn)，能學(xué)多少看個(gè)人,但是基本的應(yīng)當(dāng)掌握。
  

• ? ? Css3????????????了解過(guò)后，直接百度現(xiàn)成的Css3效果即可

• ????Javascript????DOM節(jié)點(diǎn)的操作與定時(shí)器為重點(diǎn)

• ? ? Es6+????????????async/await 與 const let 為重點(diǎn)

后面的技術(shù)點(diǎn)基本上都是源自以上的技術(shù)框架進(jìn)行研發(fā)的，類似于這些就是一輛車的最基本構(gòu)造，而后面的技術(shù)框架，與技術(shù)方案，就類似與卡車、跑車，是在該基礎(chǔ)上的升級(jí)，方便前端開發(fā)者進(jìn)行快速的開發(fā)，所以以上技術(shù)點(diǎn)應(yīng)當(dāng)是前端著重學(xué)習(xí)與理解的技術(shù)，常學(xué)常新。

7星

• ????面試題? ? ? ? ? ? ? ? ? ??想找好工作面試題就往死里背
  

• ? ? Vue全家桶?????? ? ? ??國(guó)內(nèi)最受歡迎? 路由模塊、組件模塊、聲明周期函數(shù)、跨頁(yè)面通信為重點(diǎn)
  

• ? ??Flex布局? ? ? ? ? ? ?? ?頁(yè)面布局好幫手

• ????Axios? ? ? ? ? ? ? ? ? ?? ?ajax的封裝組件庫(kù)，用戶請(qǐng)求數(shù)據(jù)，對(duì)前端最友好
  

• ????Npm? ? ? ? ? ? ? ? ? ? ???包管理工具，就幾條命令，掌握基本的命令及效果即可
  

• ? ? 微信小程序? ? ? ? ?? ?小程序開發(fā)基本上就是讀文檔

• ????Ui組件庫(kù)? ? ? ? ? ? ? ?? ?UI組件庫(kù)基本上都是一樣的，基本上會(huì)一個(gè)其他的基本上都會(huì)
  

• ????Scss? ? ? ? ? ? ? ? ? ? ???Css的高級(jí)插件，便于維護(hù)項(xiàng)目中的Css

• ????H5開發(fā)? ? ? ? ? ? ? ? ???H5開發(fā)主要是頁(yè)面適配問題為重點(diǎn)

6星

• ????React全家桶??????? ? ? ?? React函數(shù)式編程，對(duì)前端有一定的要求能力，懂Vue學(xué)React也不費(fèi)事，主要用于開發(fā)大項(xiàng)目
  

• ????Typescript? ? ? ? ? ? ? ??前端未來(lái)的主流語(yǔ)言，大型項(xiàng)目的好幫手，是Js的升級(jí)版
  

• ????Ucharts? ? ? ? ? ? ? ?? ? ?圖表渲染軟件，多用數(shù)據(jù)的展示??

• ????Uniapp? ? ? ? ? ? ? ? ? ? ?多端適配框架，跟Vue基本一致，直接上手就行
  

• ? ??Css3動(dòng)畫????????????? ? ???動(dòng)畫效果直接百度，有現(xiàn)成的可以直接套用

• ????面向?qū)ο缶幊? ? ? ? ? ?前端基本上是數(shù)據(jù)推動(dòng)視圖，所以要理解面向?qū)ο缶幊?，便于?shù)據(jù)的渲染
  

• ????數(shù)據(jù)本地化?????????? ? ? 將一些重要的數(shù)據(jù)存儲(chǔ)在本地，減少服務(wù)器壓力

• ????項(xiàng)目測(cè)試? ? ? ? ? ? ?? ? ?能夠快速查找到BUG所在
  

• ????項(xiàng)目部署????????????? ? ??將項(xiàng)目部署在服務(wù)器上，讓用戶進(jìn)行體驗(yàn)，不懂建議直接問大佬
  

• ????項(xiàng)目?jī)?yōu)化? ? ? ? ? ? ? ? ??因項(xiàng)目而異，項(xiàng)目?jī)?yōu)化能夠快速提升個(gè)人能力
  

• ????異步編程? ? ? ? ? ? ? ? ??理解同步與異步的原理，能解決大部分項(xiàng)目中的問題所在

5星

• ????Map地圖組件? ? ? ? ?地圖渲染，基本上是看文檔，用到就學(xué)，沒必要提前學(xué)習(xí)
  

• ????Canvas????????????? ? ? ? ?前端高階技術(shù)，可以用到再學(xué)
  

• ????Group布局? ? ? ? ? ? ??可以先理解，用到再學(xué)

• ????JQuery?????????????????? ?了解即可，本質(zhì)上就是DOM操作的封裝
  

• ????瀏覽器基本常識(shí)????? 提升開發(fā)效率
  

• ????Vite? ? ? ? ? ? ? ? ? ? ? ? ?未來(lái)主流的項(xiàng)目手腳架工具，可以了解個(gè)大概，有能力直接用

4星

• ????Less???????????????????????? ? Css的高級(jí)插件，便于維護(hù)項(xiàng)目中的Css? 與Scss基本一致 二選一即可

• ????設(shè)計(jì)模式? ? ? ? ? ? ? ? ? ?提高項(xiàng)目質(zhì)量，減少代碼體積

• ????Node.Js????????????????????可以，但沒必要。

• ????各框架源碼解析????????可以不學(xué)，不會(huì)有的影響
  

• ? ? ThreeJs?????????????????? ? ?用到再學(xué)

• ????計(jì)算機(jī)網(wǎng)絡(luò)????????????????提高開發(fā)效率

• ????計(jì)算機(jī)系統(tǒng)? ??????????????提高開發(fā)效率

• ????webpack????????????????????2023年了? ?可以不學(xué)? 有更多的替代品

3星

• ????英語(yǔ)????????????????????????? ? ????提高開發(fā)效率

• ????React-Native??????????????????用到再學(xué)??????
  

• ????數(shù)據(jù)結(jié)構(gòu)與算法???????????? ??提高開發(fā)效率

• ????網(wǎng)頁(yè)安全色???????????????????? ?提高技術(shù)價(jià)值

• ????操作反饋設(shè)計(jì)? ? ? ? ? ? ? ? ??提高技術(shù)價(jià)值

• ????this指向? ? ? ? ? ? ? ? ? ? ? ? ???提高開發(fā)效率? ?

• ????Js原型鏈????????????????????????? 提高開發(fā)效率

2星

• ????藝術(shù)????????????????????? ? ? ? ?提高技術(shù)價(jià)值

• ????哲學(xué)????????????????????????? ??提高技術(shù)價(jià)值

• ? ? ??數(shù)學(xué)????????????????????????????????????????提高開發(fā)效率
  

• ????文檔編寫????????????????? ? ?提高技術(shù)價(jià)值

• ????個(gè)人博客?????????????????????提高技術(shù)價(jià)值

• ????AngularJS????????????????????????????? ?用到再學(xué)? ? ???

1星

• ????bootstrap??????????????????用到再學(xué)? ??

• ????Serverless? ? ? ??????????一種網(wǎng)絡(luò)解決方案，大項(xiàng)目中有較好的體驗(yàn)。

?

本文章不引戰(zhàn)、不做辨析，只是本人對(duì)前端目前行業(yè)的分析，如有不對(duì)的地方請(qǐng)指出。

? ? ? ? ? ? ? ? ? ? ? ? 無(wú)我code?