前言
最近自己身邊有好幾個小夥伴由于各種原因（個人，疫情等都有）離職了，但是今年好像都是行情不太好的一年。許多的小公司都倒閉了，大公司也裁員，是以離職的小夥伴好幾個都在家待職 1-3 個月。由于自己身邊的小夥伴目前處于這樣一種狀況，在職（活在舒适區）的我也有了一點危機感。于是自己整理裡一份前端清單來鞏固自己的前端知識，以便差缺補漏。
基礎篇
前端入門必知-結構、表現、行為。
HTML - 結構
超文本标記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于建立網頁的标準标記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被衆多網站用于設計網頁、網頁應用程式以及移動應用程式的使用者界面。網頁浏覽器可以讀取HTML檔案，并将其渲染成可視化網頁。HTML描述了一個網站的結構語義随着線索的呈現，使之成為一種标記語言而非程式設計語言。(摘自維基百科)
HTML
常見面試題（比較多列舉部分）：
- DOCTYPE 的作用是什麼？
- 你是如何了解語義化的？
- meta viewport 的作用？
- 你用過哪些 HTML 5 标簽？
- 行内元素、塊級元素以及空元素都有哪些（列舉）？
- ...
CSS - 表現
層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式清單、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字型、間距和顔色等）的計算機語言，由W3C定義和維護。(摘自維基百科)
CSS
相關的面試題（比較多列舉部分）：
- 盒子模型
- CSS權重如何計算？
- 栅欄布局
- 讓一個元素上下左右居中
- 清除浮動的方式
- 什麼是BFC，如何解決？
- CSS3動畫系列
- ...
JavaScript - 行為
JavaScript（通常縮寫為JS）是一種進階的、解釋型的程式設計語言。JavaScript是一門基于原型、函數先行的語言，是一門多範式的語言，它支援面向對象程式設計，指令式程式設計，以及函數式程式設計。(摘自維基百科)
JavaScript
相關的面試題（比較多列舉部分）：
- 資料類型？
- 值傳遞和引用傳遞？
- 實作繼承的幾種方式？（幾種繼承方式的差別）
- 類型轉換
- this 問題
- 閉包
- 深淺拷貝
- 原型
- ...
基礎進階篇
ES6
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的标準。
ES6
相關的知識點：
- var、let、const
- 新增的數組、對象方法
- promise
- Class
- Proxy
- async await
- Generator
- ...
TypeScript
JavaScript的嚴格超集。（簡稱：TS）
TypeScript
相關的知識點：
- 和 JavaScript 的差別
- TS 特性和優點、缺點
- 資料類型
- 接口
- T類
- 裝飾器
- TSD
- Declare
- 泛型
- ...
Sass/Less/Stylus
CSS 預處理器：用一種專門的程式設計語言，為CSS增加了一些程式設計的特性，将CSS作為目标生成檔案，然後開發者就隻要使用這種語言進行編碼工作。通俗的說，CSS預處理器用一種專門的程式設計語言，進行Web頁面樣式設計，然後再編譯成正常的CSS檔案，以供項目使用。CSS預處理器為CSS增加一些程式設計的特性，無需考慮浏覽器的相容性問題，例如你可以在CSS中使用變量、簡單的邏輯程式、函數等等在程式設計語言中的一些基本特性，可以讓你的CSS更加簡潔、适應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
架構篇
前端三駕馬車
React.js
一個用于建構使用者界面的 JavaScript 庫。
React.js
相關的知識點：
- 生命周期
- 通信（父子元件，兄弟元件，跨多層）
- HOC 和 mixins
- Hooks
- 事件機制
- diff 原理
- redux
- ...
Vue.js
漸進式 JavaScript 架構
Vue.js
相關的知識點：
- 生命周期
- 通信（父子元件，兄弟元件，跨多層）
- extend
- mixin 和 mixins
- computed 和 watch
- keep-alive
- v-show 與 v-if
- 響應式原理
- NextTick
- Vuex
- diff
- Vue 3
- ...
Angular
一款優秀的前端JS架構，已經被用于Google的多款産品當中。AngularJS有着諸多特性，最為核心的是：MVC（Model–view–controller）、子產品化、自動化雙向資料綁定、語義化标簽、依賴注入等等。
（由于個人學習使用 Angular 的時候還是 1 和 2 版本，如今版本差異太大，此處暫時不做總結舉例）
工具篇
打包工具
- Webpack
- gulp
- grunt
- rollup
- Parcel
- ...
測試工具
- Mocha
- Jest
- Chai
- ...
網絡協定、資料結構、算法等
網絡協定
- UDP
- TCP
- HTTP
- HTTP/2
資料結構
- 堆
- 棧
- 隊列
- 連結清單
- 樹
- 集合（并、合、差）
- ...
算法
- 位運算
- 排序
- 連結清單
- 樹
- ...
擴充
Nodejs、ReactNative、Flutter、小程式、Git、Svn...
【技術創作101訓練營】