前端技術圖譜:看看你學廢了哪些?

語言: CN / TW / HK

highlight: a11y-dark theme: channing-cyan


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第8天,點選檢視活動詳情

前端技術圖譜:看看你學廢了哪些?

一、寫在前面

前端的技術更新迭代,相對各端而言是比較快的,也不知道是舊技術不值得優化了,還是 還是行業 Top 們“太卷”,還是說前端更新換代成本太低。 好在基本都圍繞著前端(web 前端)三大基礎 JavaScript、HTML 和 CSS 轉。

tips:為什麼要梳理技術圖譜?

答:梳理技術圖譜,對應市場需求,緊跟時代發展,查漏補缺,也許是許多程式設計師應該做的事。

下面是梳理出來的圖譜。

前端的技術圖譜.png

二、圖譜說明

image.png

將前端技術(工具or框架)分為七個大類,它們分別是:

md - 【1 三類語言】 - 【2 技術框架】 - 【3 工具】 - 【4 UI元件庫】 - 【5 js宿主環境】 - 【6 主題業務技術(框架or工具)】 - 【7 小程式】

1. 【1 三類語言】

image.png

【1 三類語言】包括:

```md - 【1.1 程式語言】

  • 【1.2 標記語言】

  • 【1.3 層疊樣式表語言】 ```

其中【1.1 程式語言】包括:

image.png

```md - 1.1.1 JavaScript(web 前端三大基礎之行為,屬必知必會)

  • 1.1.2 TypeScript(微軟出品,js 的超集。ts於js,好似sass之於css)

  • 1.1.3 Java(很多科班畢業的前端都會點 Java 信不信?就好像很多 java 後端都會點 vue) ```

其中【1.2 標記語言】包括:

image.png

```md - 1.2.1 HTML(超文字標記語言,web前端三大基礎之結構,屬必知必會。有意思的是, js有火熱的超集ts,css也有火熱的超集sass,同為三大基礎的 html 卻沒有火熱的超集, 是html太優秀嗎?一個script標籤容納js,一個style標籤容納css,一個video標籤容納視訊, html 萬物皆可一個標籤容納?)

  • 1.2.2 XHTML(可擴充套件超文字標記語言,類似 HTML,語法上更嚴格)

  • 1.2.3 XML(可擴充套件標記語言) ```

其中【1.3 層疊樣式表語言】包括:

image.png

```md

  • 1.3.1 css(層疊樣式表Cascading Style Sheets,web 前端三大基礎之表現)

  • 1.3.2 sass(自述是世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言!css 預處理語言之一。)

  • 1.3.3 less(比較受歡迎的css預處理語言之一) ```

2. 【2 技術框架】

image.png

【2 技術框架】包括 6 類:

```md

  • 2.1 Vue.js(前端三大主流框架之一,國內人氣較高)

  • 2.2 React(前端三大主流框架之一,江湖地位挺高)

  • 2.3 Angular(前端三大主流框架之一,遵循 HTML 標準)

  • 2.4 jQuery.js(曾經最受歡迎的前端框架)

  • 2.5 Bootstrap (自述是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式佈局、移動裝置優先的 WEB 專案)

  • 2.6 跨平臺 ```

其中【2.1 Vue.js(前端三大主流框架之一,國內人氣較高)】如下:

image.png

其中【2.2 React(前端三大主流框架之一,江湖地位挺高)】如下:

image.png

剩餘 2.3、2.4、2.5 和 2.6 如下:

image.png

3. 【3 工具】

image.png

【3 工具】分為 4 類:

```md - 3.1 工程化構建工具

  • 3.2 程式碼版本管理

  • 3.3 包管理工具

  • 3.4 開發工具 ```

4. 【4 UI元件庫】

image.png

【4 UI元件庫】分為 PC 端和移動端 2 類,7種:

```md - 4.1.1 Element UI(被廣泛使用的PC端UI庫)

  • 4.1.2 iView(後更名View UI,更專注於專業版維護)

  • 4.1.3 Ant Design (一個 UI 設計語言,PC端UI庫)

  • 4.1.4 Vant(一個移動 web 不錯的 UI庫,算首選不為過)

  • 4.1.5 Mint UI(餓了麼出品移動端UI庫,已停維) ```

5. 【5 js宿主環境】

image.png

【5 js宿主環境】包括兩類:

```md - 5.1 Node.js(執行在服務端的 JavaScript。 Node.js 是一個基於 Chrome JavaScript 執行時建立的一個平臺)

  • 5.2 瀏覽器 ```

其中【5.2.1 四大核心】分別是:

image.png

```md - Trident(IE瀏覽器核心)

  • Gecko(Firefox 瀏覽器核心)

  • Webkit(Safari瀏覽器核心,曾是 Chrome 和 Opera 瀏覽器的核心)

  • Blink(現在 Chrome 和 Opera 瀏覽器的核心) ```

【5.2.2 五大瀏覽器】分別是:

image.png

```md - Internet Explorer(IE瀏覽器,曾是霸主,即將退役)

  • Chrome(現在的霸主)

  • Firefox(Mozilla開發的自由及開放原始碼的網頁瀏覽器,和那家瀏覽器史上特殊的公司有關聯-網景)

  • Safari(蘋果公司釋出)

  • Opera(挪威Opera Software ASA公司旗下的瀏覽器)

```

6. 【6 主題業務技術(框架or工具)】

image.png

【6 主題業務技術(框架or工具)】分為 3 類:

```md - 6.1 地圖服務

  • 6.2 圖譜與視覺化

  • 6.3 部署服務 ```

其中【6.1 地圖服務】包括:

image.png

其中【6.2 圖譜與視覺化】包括:

image.png

其中【6.3 部署服務】包括:

image.png

7. 【7 小程式】

image.png

【7 小程式】分類 6 類:

```md - 7.1 微信小程式

  • 7.2 支付寶小程式

  • 7.3 百度小程式

  • 7.4 QQ小程式

  • 7.5 位元組小程式

  • 7.6 快應用(不提也罷系列,九大手機廠商基於硬體平臺共同推出的新型應用生態) ```

其中【7.1 微信小程式】包括:

image.png

三、寫在後面

梳理己用,僅供參閱。