前端知識體系梳理

時間 2020-04-05

標籤前端知識體系梳理简体版

原文原文鏈接

知識體系流程圖

前端知識體系主要分紅四部分：基礎知識、框架庫、開發環境、運行環境。主要目的就是將所學的知識點串聯起來，才能賦予知識於生機活力。對我而言，我基本上是零散的時間學習前端知識，對整個前端沒有系統的學習，忽略不少基礎知識。故而構建前端學習路線和方法，創建知識框架。
可能還不全，歡迎留言補充。
javascript

1.基礎知識

1.1 HTML（超文本標記語言 [ Hyper Text Markup Language]）前端

語義化標籤、屬性
表單驗證
data-* 屬性
HTML多媒體vue
- video(視頻)
- audio(音頻)
SVG
Canvas
HTML5 拖放
Web Worker
遊覽器緩存機制
H5存儲
HTML5 離線緩存
HTML 渲染流程
重繪和迴流
地圖
websocket

1.2 CSS(指層疊樣式表 [Cascading Style Sheets])java

選擇器
盒模型
定位、浮動
BFC
動畫
過渡
彈性佈局
2D、3D轉換
邊框、圓角
背景、漸變
文本效果、字體
CSS3 多列
CSS 僞類
CSS HACK
媒體查詢
CSS 預處理語言

1.3 JavaScript: 是一種具備函數優先的輕量級，解釋型或即時編譯型的編程語言。node

數據類型react
- 基礎類型
- 引用類型
流程控制語句
內置對象
變量、做用域
原型、原型鏈
函數
事件
this 指針
單線程與事件循環
DOM
BOM
表單腳本
面向對象
正則
Ajax和跨站技術
ES6linux
- let 和 const 命令
- 解構
- Symbol
- Set 和 Map 數據結構
- 箭頭函數
- Proxy
- Promise
- Class 語法
- module
錯誤處理及調試webpack
- 錯誤處理
- 調試技術
- 常見的錯誤

1.4 算法git

1.5 數據結構github

JSON
XML

1.6 面向對象

1.7 設計模式

單例模式
工廠模式
建造者模式
原型模式
觀察者模式
策略模式
構造函數模式
混合模式

1.8 計算機基礎

網絡協議
http 協議
DNS

2. 框架與庫

敏捷開發框架庫
2.1 web庫

jQuery、zepto、Swiper
Vue、React、Angular
UI組件庫
- Bootstrap
- React: Ant-design、Blueprint 、Material-UI、React-Bootstrap
- Vue: Element、iview、vuetify、vue-beauty、Vux、Vant
- Angular: ng-zorro
- backbone
- WeUI
- layui
跨站平臺
- react-native
- Flutter
- Electron
可視化組件
- Echarts
- D3
- chart
- Flot
- three
- HighCharts
- Sigma
- MyHeatMap
小程序
- WeUI
- iView WeApp
- Wux WeApp
- mpvue
- wepy
- Taro