計(jì)算機(jī)知識(shí)龐大冗雜，尤其前端領(lǐng)域，知識(shí)概念，框架原理不斷推崇出新。在學(xué)習(xí)的過程中我們要不斷進(jìn)行總結(jié)梳理，形成某一個(gè)知識(shí)領(lǐng)域的知識(shí)圖譜。這個(gè)知識(shí)圖譜還可以幫助我們后期進(jìn)行回顧復(fù)習(xí)。
下面是前端前輩進(jìn)行的總結(jié)：
- JavaScript Guidebook：JavaScript 知識(shí)圖譜 – ECMAScript | DOM | BOM | HTML5 | 計(jì)算機(jī)網(wǎng)絡(luò) | 設(shè)計(jì)模式
- React Guidebook：：React 知識(shí)圖譜 – 基本概念 | 進(jìn)階用法 | 框架生態(tài) | 前沿技術(shù) | 源碼核心
- Webpack Guidebook：：Webpack 知識(shí)圖譜 – 模塊化 | 基礎(chǔ)概念 | 工作原理 | 實(shí)戰(zhàn)應(yīng)用
- DevOps Guidebook：：DevOps 知識(shí)圖譜 – Linux | Nginx | 數(shù)據(jù)庫(kù) | 部署 | DevOps
- Vue Guidebook：Vue 知識(shí)圖譜 – 基本概念 | 響應(yīng)式原理 | 編譯原理 | 框架生態(tài)
- CSS Guidebook：CSS 知識(shí)圖譜 – 特性 | 屬性 | 布局 | 響應(yīng)式 | 動(dòng)畫
- Node Guidebook：Node.js 知識(shí)圖譜 – 模塊 | 異步編程 | 進(jìn)程 | I/O | 服務(wù)端應(yīng)用
- TypeScript Guidebook：TypeScript 知識(shí)圖譜 – 靜態(tài)類型檢查 | 語法基礎(chǔ) | 配置使用 | 編譯原理
- Cross Platform Guidebook：跨平臺(tái)開發(fā)知識(shí)圖譜 – HybridApp、ReactNative、小程序、Flutter、Electron
- Data Structure and Algorithms Guidebook：數(shù)據(jù)結(jié)構(gòu)與算法知識(shí)圖譜 – 數(shù)據(jù)結(jié)構(gòu) | 算法 | 編程實(shí)現(xiàn)
- Visualizaition Guidebook：前端圖像學(xué)知識(shí)圖譜 – Canvas | SVG | WebGL
- Database Guidebook：MySQL、MongoDB
要想自己的前端知識(shí)學(xué)的扎實(shí)，我們就一定要形成這樣一個(gè)個(gè)知識(shí)圖譜，里面從基礎(chǔ)概念到應(yīng)用到原理，讓自己的知識(shí)脈絡(luò)形成一張網(wǎng)，然后我們不斷地在這張網(wǎng)上進(jìn)行修補(bǔ)或擴(kuò)充。很多人覺得前端的知識(shí)點(diǎn)零碎雜就是因?yàn)闆]有形成這樣的知識(shí)網(wǎng)，這樣也容易導(dǎo)致開發(fā)中遇到問題的時(shí)候，不知道該往哪個(gè)方向去想。
平時(shí)寫博客記錄的是零碎的知識(shí)點(diǎn)，我們還要做一個(gè)這樣的知識(shí)圖譜站，系統(tǒng)去梳理某個(gè)知識(shí)領(lǐng)域的所有知識(shí)點(diǎn)。這個(gè)可以有效的去幫我們?cè)诿嬖嚽办柟讨R(shí)點(diǎn)，從容應(yīng)對(duì)！
最近我的前端編程知識(shí)站“spacexcode”上線了，區(qū)別于“前端開發(fā)筆記”站點(diǎn)，它不再是專注開發(fā)中的各個(gè)知識(shí)細(xì)節(jié)，而是從整個(gè)前端開發(fā)知識(shí)體系出發(fā)，以網(wǎng)帶面，做到各個(gè)知識(shí)點(diǎn)的鏈接和覆蓋。還有一點(diǎn)就是，你可以從這個(gè)網(wǎng)站上看到很多代碼的動(dòng)態(tài)演示效果，這也是我目前在探索的領(lǐng)域，希望以生動(dòng)直接的方式來講解知識(shí)點(diǎn)。
如果你也想搭建這樣一個(gè)站點(diǎn)，可以參考：
