当前位置：首页 > article >正文

2024Jinger的前端学习内容总结——前端学习路线（超全）

article 2025/1/4 5:48:18

Show一张梦开始的一张GIF图片
2021年

数据结构

哈希表：Map&Set
数据结构（一） 待完善
数据结构的实现
链表
二叉树（待完善）
图

常见题目
JS数据结构常见题目（一）待吸收
JS数据结构常见题目（二）待吸收
JS数据结构常见题目大全（一）待吸收
JS数据结构常见题目大全（二）待吸收

算法

Javascript数据结构与算法专栏
（一）待补充
动态规划
二分查找
KMP算法
常见算法 待完
回溯算法（待完善）

HTML

html&css&javascript经典面试题目（一）
html&css&javascript经典面试题目（二）

html面试必备基础（一）
html面试必备基础（二）
⭐️ 标签（各类标签）

块级元素（独占一行，可以设置宽度和高度，默认从新行开始）
行内元素（不独占一行，宽度和高度由内容决定：span|a|img）
行内块元素（既可在同一行显示，又可设置宽度和高度input|button）

⭐️ 属性（HTML5 特性）

图形绘制多媒体支持地理位置API（Cesium可视化引擎|视频*GIS）
WebSocket、Web Workers(传位姿|聊天室、多线程提高性能）

CSS

CSS知识梳理 ⭐⭐⭐
CSS常见面试题目（一）待完善
CSS常见面试题目（二）
⭐️ 引入方式

**优先级：**行内样式>内部样式表（style)>外部样式表（link）

⭐️ 选择器

通用选择器
标签选择器：如p标签
id 选择器:#
class 选择器：.
属性选择器:input[type="text"]
派生选择器（后代、子元素、相邻元素）
- 后代选择器:A B div p 位于div块中的p标签元素
相邻兄弟选择器:h1 + p 紧接在h1元素后出现的段落元素
通用兄弟选择器：h1 ~ p会选择所有位于h1元素后的p元素
子元素选择器:ul > li { list-style: none; }
伪选择器：p::first-line（伪元素）、a:hover（伪类）
选择器优先级：

⭐️ 可继承与不可继承属性

可继承（文本相关）
不可继承（盒子模型相关margin、padding、border、width、height等|布局相关display、position、z-index和overflow等）
强制继承inherit
px、em(字体相对于父元素）、rem(字体相对于html根元素）、vw、vh视窗的百分比，1vw相当于视窗的1%

⭐️ display布局

block/inline/inline-block（ 内联元素 / 块状元素）
flex/grid
none

⭐️⭐️定位、浮动与层叠

定位、浮动与层叠规则

⭐️ CSS|LESS|SCSS:

CSS|LESS|SCSS

⭐️ 文档流

标准流
浮动流（浮动与清除浮动）
定位流

⭐️⭐️⭐️ BFS&IFS
BFS&IFS渲染

⭐️⭐️⭐️ 盒子模型
在这里插入图片描述
⭐️⭐️⭐️ 响应式布局

常见响应式布局方式

媒体查询媒体查询+Flex布局实现响应式
Flex布局 Flex布局
Grid布局 Grid布局

Javascript

Javascript系统学习系列
Javascript系统学习（一）
Javascript系统学习（二）
Javascript系统学习（三）
Javascript系统学习（四）
Object&Array&String
JS基础知识（一）
JS基础知识（二）
JS基础面试题目

Javascript面试手撕系列
Javascript面试手撕系列（大全）

具体核心知识点：
（一）

JS防抖(最后依次触发指定事件内执行一次）与节流（定期执行）
柯里化函数（将一个多参调用转为一系列嵌套调用） 剩余参数&arguments对象&柯里化函数
JS类数组对象转数组：Array.from()|Array.prototype.slice|扩展运算符
JS将对象转树形结构
setInterval|setTimeout
双向数据绑定（Object.defineProperty|Proxy)
路由功能实现
（二）
setInterval|setTimeout
手动实现Vue模板引擎
下划线与驼峰转换
JSON.stringtify和JSON.parser函数的手动实现
Ajax/Axios发请求
JSONP

（三）

乱序输出
数组元素求和
扁平化数组|扁平化数组flat函数的实现
数组去重
实现JS中的push、filter、map、Object.create方法 Object.assign()
判断是否存在对象的循环引用
格式化日期
实现repeat方法
字符串翻转
格式化数字
图片懒加载
非负大整数相加等
(四)
Promise 手写一个Promise
promise.then()
promise.all()
promise.race()
instanceof
new关键字
typeof
call call|apply|bind
apply
bind
深浅拷贝

ES6核心内容
Proxy&Reflect
JS高级-this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流
进阶面试题 待完善
Map&Set
Javascript高级大纲
ES6面试题目

Javascript核心内容
事件循环（一）
事件循环（二）
原型链
闭包
编译原理
异步编程
异步编程（二）

Javascript代码分析题目
（一）待完善
前端代码分析面试题

异步：Promise系列、async&await、setTimeout等（核心为事件循环和Promise基本语法）
对象&作用域&this指代
闭包
原型链

Vue2

Vue3

React

基础

React 知识框架图：

+---------------------+
|     React 基础      |
+---------------------+
        |
        |--- JSX语法
        |--- 函数组件与类组件
        |--- 渲染机制（虚拟DOM、渲染流程）
        |--- 事件处理（onClick, onChange）
        |--- 条件渲染与列表渲染
        |--- 受控组件与非受控组件
        |--- 基本的组件通信（props, state）
        |
+---------------------+
|     React Hooks     |
+---------------------+
        |
        |--- useState
        |--- useEffect
        |--- useContext
        |--- useRef
        |--- useReducer
        |--- useCallback
        |--- useMemo
        |
+---------------------+
|     React 路由      |
+---------------------+
        |
        |--- React Router (v6)
        |--- 路由配置（Route, Switch, Link）
        |--- 嵌套路由与动态路由
        |--- 重定向与路由守卫（`待完善`）
        |
+---------------------+
|    组件间通信       |
+---------------------+
        |
        |--- 父子组件通信（props）
        |--- 子父组件通信（通过回调函数传递数据）
        |--- Context API（跨层级共享状态）
        |--- 自定义Hooks（共享逻辑）
        |
+---------------------+
|     状态管理       |
+---------------------+
        |
        |--- useState / useReducer（局部状态）
        |--- Redux（全局状态管理）
        |--- Redux Toolkit
        |--- MobX （`待完善`）
        |
+---------------------+
|   性能优化与调试    |
+---------------------+
        |
        |--- React.memo
        |--- useMemo
        |--- useCallback
        |--- shouldComponentUpdate
        |--- React Profiler
        |--- 懒加载与代码分割（React.lazy & Suspense）
        |
+---------------------+
|     高级功能       |
+---------------------+
        |
        |--- 动态导入（React.lazy）
        |--- Suspense与错误边界
        |--- React Portals
        |--- HOC（高阶组件）
        |--- Render Props
        |--- 自定义Hooks
        |--- Context API优化
        |
+---------------------+
|     测试与部署     |
+---------------------+
        |
        |--- 单元测试（Jest, React Testing Library）
        |--- 快照测试（Snapshot Testing）
        |--- 端到端测试（Cypress）
        |--- Webpack与Babel配置
        |--- CI/CD与自动化部署
        |
+---------------------+
|   配置与工具链     |
+---------------------+
        |
        |--- Webpack
        |--- Babel
        |--- ESLint / Prettier
        |--- Create React App (CRA)
        |--- Next.js / Gatsby
        |

React基础：React基础
React Hooks：
useState hook
useState、useReducer&useRef
高级Hooks
React状态管理：（MobX待完善）
React状态管理（一）
Redux（一）
Redux（二）
Redux&Redux-thunk
React路由： React Router __React Router 1 _
React组件通信待补充：React组件通信
性能优化和测试待补充 ：相关Hooks
React生命周期待完善：生命周期