第一章：前端基础
ES5
保护/监视对象成员利用defineProperty实现数据劫持利用proxy实现数据劫持this、call、apply、bind数组新增API保护/监视对象成员 利用defineProperty实现数据劫持 利用proxy实现数据劫持 this、call、apply、bind 数组新增API 算法基础知识 算法在前端知识体系中的地位 算法核心概念 复杂度概念 ES6
let&const&块级作用域模板字符串遍历数组箭头函数参数增强Set对象和Map对象解构赋值和展开运算符面向对象构造函数和Class类类和实例对象原型和原型链类的继承let&const&块级作用域 模板字符串 遍历数组 箭头函数 参数增强 Set对象和Map对象 解构赋值和展开运算符 面向对象 构造函数和Class类 类和实例对象 原型和原型链 类的继承 冒泡排序 快速排序 二分查找 递归算法 常见前端算法面试题 Promise
同步及异步概念回调地狱观察者模式处理异步Promise原理探秘promise.resolve方法实现promise.reject方法实现 promise.then方法实现promise.catch方法实现Eventloop、宏任务与微任务同步及异步概念 回调地狱 观察者模式处理异步 Promise原理探秘 promise.resolve方法实现 promise.reject方法实现 promise.then方法实现 promise.catch方法实现 Eventloop、宏任务与微任务数据格式 数组 链表 集合Set 树 动态规划 基于ES6的员工列表案例
回文数 翻转链表 相交链表 返回倒数第k个节点 环形链表 复制带随机指针的链表 交换链表中的节点 删除链表中倒数第n个节点 旋转链表 K个一组翻转链表 有效的括号 基于ES6的百度音乐全选案例
链表 栈 堆栈 图 二叉树 排序 动态规划 按摩师 最长递增子序列 背包问题（需找题） 编辑距离 深度优先搜索 广度优先搜索 二分 哈希 ES7
数组新增API 异步函数基于promise的异步写法改写 基于Generator函数的异步写法改写基于async和await异步写法改写trycatch错误捕获数组新增API 异步函数 基于promise的异步写法改写 基于Generator函数的异步写法改写 基于async和await异步写法改写 trycatch错误捕获 ChromeDevTools工具介绍 Performance面板分析工具 关键指标、网络、白屏时间、NavigationTiming、TTFB、内存情况 TypeScript
类型注解和静态类型检测 类型别名和接口基于class的面向对象编程泛型装饰器声明文件tsconfig.json文件配置类型注解和静态类型检测 类型别名和接口 基于class的面向对象编程 泛型 装饰器 声明文件 tsconfig.json文件配置 PerformanceAPI 监控指标实现 资源加载、页面加载 数据上报 可视化报表查询 前端监控项目实战 前后端交互
Ajax的封装使用利用Node搭建服务器提供数据FormData对象实现文件上传upload对象监听上传进度批量上传图片案例同源策略CORS解决跨域预检请求利用koa-server-http-proxy实现服务端代理前后端分离基于jwt鉴权 混入模式Fetch用法Request对象Response对象Header对象axios的使用简版axios实现拦截器的运用与实现原理适配器的实现原理AJAX异步无刷新请求与上传 Ajax的封装使用 利用Node搭建服务器提供数据 FormData对象实现文件上传 upload对象监听上传进度 批量上传图片案例 AJAX跨域解决方案 同源策略 CORS解决跨域 预检请求 利用koa-server-http-proxy实现服务端代理 前后端分离 基于jwt鉴权 混入模式 Axios库的使用与原理解析 Fetch用法 Request对象 Response对象 Header对象 axios的使用 简版axios实现 拦截器的运用与实现原理 适配器的实现原理 函数式编程含义 函数的定义 纯函数的定义 高阶函数的定义 高阶函数的抽象 高阶函数的缓存特性 函数柯里化 组合（composition）和管道（pipe） JavaScript函数式编程库 即时通信
轮询（长轮询）SSE（serversendevent）服务器推送数据websocket协议nodejs中使用socket.io模块实现服务端推送网页版聊天系统轮询（长轮询） SSE（serversendevent）服务器推送数据 websocket协议 nodejs中使用socket.io模块实现服务端推送 网页版聊天系统开放封闭原则 单一职责原则 里氏替换原则 依赖倒置原则 接口隔离原则 迪米特法则 合成复用原则 阶段实战-《云盘》 —项目功能
侧边栏菜单渲染路径导航渲染文件夹视图渲染树状菜单点击事件路径导航点击事件文件夹点击事件新增文件夹文件夹命名处理提示信息弹窗 Vue3的新特性：tree-shaking的概念右键菜单 Vue3的新特性：fragments删除当前文件夹 Vue3的新特性：teleport文件夹移动 Vue3的新特性：customrenderer 删除当前文件夹 Vue3的新特性：compositionapi侧边栏菜单渲染 路径导航渲染 文件夹视图渲染 树状菜单点击事件 路径导航点击事件 文件夹点击事件 新增文件夹 文件夹命名处理 提示信息弹窗 Vue3的新特性：tree-shaking的概念 右键菜单 Vue3的新特性：fragments 删除当前文件夹 Vue3的新特性：teleport 文件夹移动 Vue3的新特性：customrenderer 删除当前文件夹 Vue3的新特性：compositionapi 抽象工厂模式(AbstractFactory) 建造者模式(Builder) 工厂方法模式(FactoryMethod) 原型模式(Prototype) 单例模式(Singleton) 阶段实战-《云盘》 —项目技术栈
数据排序/数据筛选/数据渲染/模板字符串/事件代理/右键菜单等数据排序/数据筛选/数据渲染/模板字符串/事件代理/右键菜单等适配器模式(Adapter) 桥接模式(Bridge) 组合模式(Composite) 装饰模式(Decorator) 外观模式(Facade) 享元模式(Flyweight) 代理模式(Proxy) 前端算法和数据结构
算法基础知识算法在前端知识体系中的地位算法核心概念复杂度概念冒泡排序快速排序二分查找递归算法常见前端算法面试题数据格式 数组链表集合Set树动态规划算法基础知识 算法在前端知识体系中的地位 算法核心概念 复杂度概念 冒泡排序 快速排序 二分查找 递归算法 常见前端算法面试题 数据格式 数组 链表 集合Set 树 动态规划 职责链模式(ChainofResponsibility) 命令模式(Command) 解释器模式(Interpreter) 迭代器模式(Iterator) 中介者模式(Mediator) 备忘录模式(Memento) 观察者模式(Observer) 状态模式(State) 策略模式(Strategy) 模板方法模式(TemplateMethod) 访问者模式(Visitor) 前端性能优化—前端项目唯快不破
ChromeDevTools工具介绍Performance面板分析工具关键指标、网络、白屏时间、NavigationTiming、TTFB、内存情况PerformanceAPI监控指标实现资源加载、页面加载数据上报可视化报表查询前端监控项目实战ChromeDevTools工具介绍 Performance面板分析工具 关键指标、网络、白屏时间、NavigationTiming、TTFB、内存情况 PerformanceAPI 监控指标实现 资源加载、页面加载 数据上报 可视化报表查询 前端监控项目实战第二章：重学前端框架VUE
第三章 ：Node
Git版本控制
Git 概念及作用 Git 安装配置 Git 工作流程 工作区、暂存区和版本库 Git 中的分支管理 Git 中的版本控制 Git 中的冲突解决 基于 Git 的协同开发 NodeJS
Web服务器搭建 Node安装与基础语法 HTTP 请求响应基本流程 使用 Node.js 的 HTTP 模块创建一个 WebServer IncomingMessage 对象（获取请求信息） ServerResponse 对象（响应数据） URL 的组成与解析 静态资源与动态资源的区别与处理 HTTP 协议 - 常见头信息的格式与作用 使用 MIME 返回不同类型的数据 后端渲染的概念 数据与视图的分离 模板引擎的使用（Nunjucks模板引擎） 基于 Koa 框架的 WebServer 构建与原理解析 Node 工具的使用：npm、yarn Node版本管理工具：nvm Koa 设计思想 Koa 安装与使用 中间件：compose 与 Promise 洋葱模型 使用 koa-static-cache 静态资源代理中间件处理静态资源 使用 koa-router 路由中间件处理动态资源 Get 与 Post 的差异 使用 Content-type 提交不同格式数据 使用 koa-body 中间件处理请求正文数据基于 MySQL 数据库的后端数据持久化 数据持久化场景介绍 简单数据持久化 复杂数据持久化的需求 使用 MySQL 创建数据库、表和字段 SQL 的介绍与使用 使用 mysql2 来创建数据库链接 使用 mysql2 执行 SQL 文件上传与用户鉴权 使用 Post 请求上传文件数据 表单的 enctype 属性 FormData 格式 Content-type: multipart/form-data 的作用 使用 koa-body 处理不同类型的数据 使用 koa-body 处理 Formdata 数据 用户信息鉴别 Cookie 的作用 Response-Header: set-cookie Request-Header: Cookie 使用 Koa 的 ctx.cookie.set/get 进行 Cookie 操作 AJAX 异步无刷新请求与上传 XMLHttpRequest对象的使用 open 方法 异步与同步 send 方法 onload 事件 响应数据处理 Ajax 的封装使用 利用 Node 搭建服务器提供数据 FormData 对象实现文件上传 upload 对象监听上传进度 批量上传图片案例 AJAX 跨域解决方案 同源策略 CORS 解决跨域 预检请求 利用 koa-server-http-proxy 实现服务端代理 前后端分离 基于 jwt 鉴权 Axios 库的使用与原理解析 Fetch 用法 Request 对象 Response 对象 Header 对象 axios 的使用 简版 axios 实现 拦截器的运用与实现原理 适配器的实现原理 即时通信 轮询（长轮询） SSE（server send event）服务器推送数据 websocket协议 nodejs中使用socket.io模块实现服务端推送 网页版聊天系统
第四章：工程化与架构
Webpack
JavaScript 模块化历史CommonJS 模块系统AMD/UMD 模块系统ESM 模块系统Webpack 的安装与使用webpack.config.js 配置文件entry：入口配置output：输出配置模块内容解析：loaderraw-loader：纯文本内容解析file-loader/url-loader：文件/路径解析css-loader：css 解析style-loader: style 标签处理Plugins：HtmlWebpackPluginPlugins：clean-webpack-pluginPlugins：mini-css-extract-pluginsource-mapWebpackDevServerProxyHot Module Replacement构建骨架屏应用构建多页面应用构建公共组件库构建PWA离线应用性能优化缩小文件的搜索范围优化使用HappyPack使用DllPlugin使用HardSourceWebpackPlugin开发与生产环境配置抽离公共代码压缩代码手写 mini-webpack自定义loader实现自定义plugin实现webpack打包原理webpack打包手写实现Babel核心APIAST抽象语法树12道webpack常见面试题Rollup
手写 plugin搞懂 rollup 源码主流程Vite
手写 mini-vite测试
单元测试组件测试e2e测试git hook
lint
eslint项目实战
手写 cli - koa 的脚手架
第五章：多端应用
移动端基础
分辨率，像素，像素密度，物理像素 viewport视口设置 基于rem和vw的单位适配 viewport-fit 移动端页面调试 touch事件 touchEvent 移动端事件点透处理 移动端阻止默认事件带来的问题 移动端滑屏交互系列问题处理 orientation横竖屏判断 devicemotion加速度和重力加速度获取 动作与方向访问权限系列问题处理 摇一摇功能封装 防抖、节流函数实现 多指操作与tap时间 deviceorientation 类《淘宝造物节》VR场景实现 better-scroll基础使用方法 案例：自定义滚动条 案例：手机淘宝幻灯片实现 案例：仿ios经典选择器空间 案例：上拉加载和下拉刷新功能实现 案例：自定义索引列表
第六章：数据可视化
Canvas
canvas 概述 基于 canvas 绘制图形 图形样式设置 文本设置 图像操作 像素级操作 transform 变换 基于 canvas 动画实现 图形合成 Echarts
Echarts入门 常用组件：标题、工具栏、标记点、标记线等 常用图表：折线图、饼图、雷达图、k线图、地图等 高级应用：多坐标轴、数据集、视觉映射、区域缩放等 "=扩展知识：自定义图形组件、响应式布局 可视化扩展训练营
拖放操作和FileReader 音频、视频操作 音频可视化 自定义音视频播放器 地理信息获取 百度地图 API 详解 项目 - 《大屏数据可视化》 项目功能
Echarts 主题样式设置 基于百度地图的城市空气质量散点图 Echarts 地图图表制作地区收入散点图 自定义图表样式 收入统计折线图展示 预算与开销统计雷达图展示 收入与年龄关系的散点图制作 消费比饼图制作 大屏框架的搭建 项目 - 《大屏数据可视化》 项目技术栈
Echarts 百度地图 API 本阶段相关实战
基于 Canvas 开发自己的图表组件：柱状图、饼状图 基于地理信息和百度地图的《旅行日记》 基于音频可视化的《坚果手机展示页》
第七章：职场软技能
None
