針對自己工作中所掌握或瞭解的一些東西做了一個目錄總結,方便自己複習；如果你還是一個前端新手，也可以根據以下知識點，看看自己缺少哪方面的知識，前端變化快，學無止境。

基本功考察

1.關於Html

1. html語義化標籤的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化
2. h5中新增的屬性; 如自定義屬性data, 類名className等, 新增表單元素, 拖拽Drag
3. h5中新增的API, 修改的API, 廢棄的API 稍作了解 (離線儲存, audio, video)

2.關於CSS

1. CSS選擇器( 三大特性 )
2. BFC機制
3. 盒模型
4. CSS模組化開發(封裝); SCSS和LESS的使用
5. 螢幕適配 以及 頁面自適應
6. CSS3中新增的選擇器
7. CSS3中新增的屬性, transform trasition animation等...

3.關於佈局

1. 標準文件流(padding + margin + 負margin) + 浮動float + 定位
2. 百分比佈局(流式佈局): px單位 用 %num代替, 佔父級元素的百分比
3. flex彈性佈局: 主軸 輔助軸的幾個屬性
4. grid柵格佈局: 使用框架中的類名來替代: 本質上還是百分比佈局

4.關於JS基礎

1. 變數資料型別及檢測: 基本 + 引用
2. 運算子: 算術 + 條件 + 邏輯 + 位 + 短路, 隱式轉換等
3. 條件, 迴圈, 異常處理 if switch(){case xxx:} try catch finally throw
4. 函式定義, 呼叫方式(apply, call, 直接呼叫), 傳參: 實參給形參賦值
5. 字串, 陣列, 物件常用API,
6. 正規表示式

5.關於JS高階

1. 作用域, 作用域鏈, 閉包
2. 原型, 原型鏈, 繼承
3. 函式上下文, this指向
4. js的執行機制, 事件佇列和迴圈
5. Ajax原理, axios庫
6. 同步, 非同步程式設計
7. jQuery原始碼學習

6.關於瀏覽器

1. 瀏覽器的構成和執行機制,
2. 瀏覽器核心
3. 瀏覽器互動: BOM和DOM相關webApi, 監聽事件
4. 瀏覽器快取機制
5. 瀏覽器的渲染原理
6. 瀏覽器的安全性: 跨域 和 攻擊

7.關於網路協議

1. HTTP協議
2. cookie, session, token

8.關於ES6語法

1. 字串, 陣列, 物件 擴充套件的api
2. 變數擴充套件: let const 解構賦值 塊級作用域
3. 函式擴充套件: 箭頭函式 預設引數, rest引數
4. 展開運算子, 模板字串
5. set 和 map資料結構
6. 迭代器和生成器函式 next 和 yield的理解
7. proxy物件 屬性代理器: 屬性的讀取（get）和設定（set）相關操作
8. promise物件, 非同步程式設計的解決方案
9. async + await: 非同步程式設計的終極方案 promise + generator的語法糖
10. class語法 建構函式的語法糖
11. 模組化程式設計 export + import 的 匯出和匯入

9.VUE基礎

1. 基本指令
2. 例項的 屬性 和 方法
3. 例項的生命週期
4. 元件基礎: 建立,註冊,新增屬性方法,套用等...
5. 元件通訊傳值 父子, 兄弟, 跨級
6. 插槽slot 等...

10.VUE高階

1. vue-router: 搭建SPA
   路由,元件的配置
   路由間的傳值
   路由跳轉
   路由的導航守衛

   記住在router.js 和 元件頁面中的使用方式

2. vuex: 狀態管理: 資料倉儲store
   例項化倉庫的5大屬性的使用
   state, getters, mutations, actions, modules
   輔助函式mapState等..., 倉庫中計算屬性的對映, 方便操作

   記住在 store.js 和 元件中 使用方式

11.VUE深入, 原始碼閱讀

1. 資料響應式原理
2. virtual dom
3. diff 演算法
4. nextTick等等...

工程能力考察:

1.專案能力

1. vue-cli腳手架搭建 和 功能配置 vue.config.js
2. webpack的常用配置
3. 專案構建 打包
4. 熟悉各類框架的文件...
5. UI框架: Bootstrap, MUI, Element-ui等
6. 常用的外掛整理, 整理一個自己外掛庫, 封裝自己的方法庫,元件庫
7. 常用的工具熟練度
8. PC端 和 移動端開發注意事項
9. 經驗總結: 快速確定專案的技術選型
10. 坑點總結: 專案遇到坑坑坑!!!
11. 專案中的效能優化記錄 ( 都是細節點...多記錄 )
12. 需求文件的理解, 可以結合 專案流程圖, UML圖
13. 問題解決能力: (bug定位除錯, 查詢文件, 尋求他人...)
14. 記錄習慣養成

2.模組化, 元件化開發能力

1. 專案分類; 各類檔案整理,分類
2. 各類功能封裝
3. 元件和功能模組的抽離, 解耦, 複用

內功考察:

1.物件導向的程式設計思想

1. 類的抽象
2. 物件的封裝, 繼承
   為了更好的去管理資料, 分類資料 實現高內聚, 低

2.設計模式

設計模式感覺也是 將物件導向思想 再度抽象成現實中 某些特定模式

3.資料結構和演算法

學習常用的排序搜尋演算法, 順序表,連結串列,棧,佇列,樹,堆 結構等等...
考驗你的 抽象思維 和 數學功底了
將現實需求 抽象成 計算機程式碼 的思維能力

附加技能考察:

1. 學習能力

1. 持續學習的態度--部落格, 筆記記錄
2. 技術論壇活躍度高, 問答多
3. GitHub開源專案參與

2. 瞭解一門後端語言

1. node.js, python, php等...
2. 資料庫mysql,redis,mongodb. sql的操作語句, mongo的操作語句, redis操作語句
3. node + express 搭建本地服務等
4. python + django + request + scrapy

3. 系統程式設計

1. Linux命令列操作, 系統檔案管理
2. 多工, 多執行緒, 多程式, 協程, 併發, 並行, 序列, 同步, 非同步等概念的理解

你會經常地遇到 bug 和其它一些問題。這可能會讓人沮喪，但你要儘量保持冷靜，並系統地去思考。記住實踐是解決問題的最佳方法。

我們採集的是石頭，但是必須時刻展望未來的大教堂。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2639803/，如需轉載，請註明出處，否則將追究法律責任。