[TOC] [http://dmitrysoshnikov.com](http://dmitrysoshnikov.com/) [珠峰前端架构师VIP精品课程](http://www.html5train.com/kecheng/detail_1445662) [珠峰前端架构师课程](http://www.zhufengpeixun.cn/main/course/index.html)的内容进行分章节讲解： # JavaScript 高级 * 1.call、apply、bind、new 等手写实现 * 2. 原型链和闭包深入 * 3. 执行上下文和作用域链 * 4. 深拷贝和浅拷贝 * 5. 防抖和节流 * 6. 词法分析和语法分析 * 7. 常量、解析、模板字符串、展开运算符、解构操作符、箭头函数、数组新方法、生成器和迭代器 * 8. Symbol 元编程、Set 和 Map 应用以及 WeakMap、Object.defineProperty 以及下一代 Proxy&Reflect、ESModule 实现、浏览器和 Node.js 中的 EventLoop * 9. V8 内存管理、垃圾收集、引用记数、标记清除、标记整理和增量标记 * 10. 高阶函数、发布订阅和观察者模式、Promise 核心应用、generator 和实现 co 库、async+await 原理、实现完整的 PromiseA + 类库，包含 reace、all、finally、try 等方法 # 模块化 * JavaScript模块化发展的演进历史 CommonJS、AMD、CMD、ES6模块的演进历史 * 目前最主流的模块化实现方案: CommonJS 到 ES Module * 手写 CommonJS 的简单实现 * 手写实现 Promise A+ 类库 * Nodes核心原理，手写Stream的源码 * Node事件原理和发布订阅设计模式 * 文件系统遍历算法(同步、异步、深度、广度、先序、中序、后序) * 文件系统遍历算法(同步、异步、深度、广度、先序、中序、后序) * 用TCP实现HTTP和Websocket协议 * 手写一款HTTP服务命令行工具，包括压缩、缓存、断点续传、文件上传等功能 * Cookie 和Session 原理 # 前端工程化 * gulp的基本用法以及实现原理 * 常用插件(压缩、合并、编译、预览服务、自动注入) * node.js中自定义流的高级用法 * 实现自定义插件(auto-prefixer) * webpack4实战 * [2.webpack4优化(resolve、模块热替换、压缩、代码分割、可视化工具)](javascript:;) * [3.Webpack4源码分析](javascript:;) * [4.编写自定义Loader](javascript:;) * [5.编写自定义Plugin](javascript:;) * [6.Webpack的事件机制tapable和AST抽象语法树](javascript:;) * [7.如何编写Babel插件](javascript:;) * [8.手写一款自己的Webpack](javascript:;) # Vue 全家桶 * [1.Vue 基础 什么是 Vue?、Vue 的使用、Vue 常见的指令、Vue 的事件绑定和属性绑定、Vue 中的计算属性、computed 和 watch 的应用、表单中的数据绑定、手写 Vue 中的响应式原理、MVVM 手写实现](javascript:;) * [2.Vue 应用 Vue 中的修饰符、自定义过滤器和指令、Vue 实例上的方法、Vue 中的生命周期、Axios 应用 async 和 await、vue-cli3.0 实战、render 方法详解和使用 jsx 语法](javascript:;) * [3\. 封装自己的 ElementUI 组件 什么是组件和组件的应用、组件的属性和校验、组件之间的通信、EventBus 应用、组件 slot 用法、封闭自己的树型组件、日历组件、异步加载的省市级联组件、基于 element-ui/iview 二次封装表格组件和树型组件、组件的单元测试和集成测试](javascript:;) * [4\. 路由篇 VueRouter 的基础应用、编程式导航、路由嵌套、路由守卫、路由元信息、实现动态权限菜单、按钮及权限认证、登录权限、手写实现 VueRouter 源码](javascript:;) * [5.vuex vuex 应用 (state、getter、mutation、action)、手写实现中的 state、getter、commit、dispatch、actions/mutations、模块化](javascript:;) * [6.PWA manifest.json 配置、service worker 生命周期、fetch 请求拦截、cache api 以及缓存策略、Notification API、cache api 以及缓存策略、Notification API、workbox 应用、 Vue 实战 PWA](javascript:;) * [7.Vue SSR 服务器端渲染 SSR 原理和设计理念、集成 koa 实现服务器端渲染、webpack 构建 Vue SSR 项目、集成路由及代码分割、集成 VueSSR 和 Vuex 实现数据同步](javascript:;) * [8\. 项目优化 路由懒加载、页面预渲染、SSR 原理和 Nuxt 实战、Vue 骨架屏、Vue-devtools 开发插件、Vue 动画原理](javascript:;) * [9.Vue 全家桶项目 Vue-cli3.0 项目搭建、服务器构建 (koa2+mongodb)、cube-ui 组件化实战、路由配置和动画、如何 Mock 后台数据、数据获取和 axios 应用拦截器、基于 JWT 的注册登录权限管理、公共组件封装、上拉刷新、下拉加载、图片懒加载、课程购买、微信和支付宝支付、使用 vuex 实现购物车、项目布署和上线](javascript:;) # React ## 核心篇 * React 核心 * 模块化和组件化 * React 的属性、校验和参数传递 * React 的状态和双向数据绑定 * React 中的单向数据流 * 受控组件和非受控组件 * React 表单双向数据绑定 * 新旧 Context 上下文环境 * DOM 获取之 Ref * 新旧生命周期函数 * children 属性的使用 ## 进阶篇 * create-react-app 原理分析 * JSX 原理和虚拟 DOM 原理 * setState 异步原理实现和事务实现 * 使用 Immutablejs 和 PureComponent 优化性能 * React 动画 react动画的实现原理 使用React-Transition-group库开发todo动画应用 * ErrorBoundary、Suspense 和 Fragment * React Hooks+Redux 实战 * React 性能分析 * React 中的高阶组件和 render props * React 新一代的 Fiber 架构 * 从零实现一款包含完整 dom-diff 算法的 React ## 路由篇 * 路由配置 * 路由懒加载 * 路由重定向 * 路由之权限管理 * 受保护的路由 * 手写一个完整的 React-router4 路由库 ## redux 篇 * redux 核心概念 action、reducer、store * 手写实现 redux、react-redux、connected-react-router 完整功能库 * 手写 redux-logger、redux-promise、redux-thunk、redux-saga、redux-actions、reselect、redux-persist 完整类库 ## React 服务器端渲染 SSR * [1\. 客户端渲染 VS 服务器端渲染](javascript:;) * [2.React 中的服务器端原理](javascript:;) * [3\. 同构的原理和意义](javascript:;) * [4.SSR 中使用路由跳转和 redux](javascript:;) * [5.SEO 优化和预渲染](javascript:;) * [6.Koa2+next.js 服务器端渲染实战](javascript:;) ## 中间件 * [1.手写applyMiddle和compose(中间件原理)](javascript:;) * [2.手写redux-logger,redux-thunk,redux-promise](javascript:;) * [3.手写自定义本地缓存中间件](javascript:;) * [4.redux-saga](javascript:;) * [5.redux-immutable](javascript:;) ## react路由 * [1.HashRouter,BrowserRouter的区别](javascript:;) * [2.Link,NavLink的使用(extact绝对匹配,state带参数跳转)](javascript:;) * [3.Route组件三种渲染方式(component,render,children)](javascript:;) * [4.路由参数以及子路由的使用(params)](javascript:;) * [5.withRouter,PrivateRouter的用法](javascript:;) * [6.Prompt组件阻止跳转](javascript:;) * [7.重定向(Redirect组件)](javascript:;) * [8.手写HashRouter Route等组件](javascript:;) ## mobx 篇 * [1. observable、computed、autorun、when、reaction 实战](javascript:;) * [2. 手写一个 mobx 类库](javascript:;) ## 源码级Vue+React深度解析与实现 * [1.手写Vue双向绑定实现](javascript:;) * [2.Vue虚拟DOM和React虚拟DOM的区别](javascript:;) * [3.如何实现一个 Virtual DOM 算法](javascript:;) * [4.通过源码彻底搞明白setState的更新机制](javascript:;) * [5.手写包含虚拟DOM、事件监听、基本组件生命周期等功能的React库](javascript:;) ## Ant-Design 篇 * [1.Button、Modal、Loading、Notification、Message、List、Carousel 等 UI 组件](javascript:;) * [2. 布局、表单和复杂表格组件](javascript:;) * [3. 手写 Antdesign 表单组件](javascript:;) ## Ant-DesignPro 篇 * [1.nunjucks、yaml、mockjs、roadhog](javascript:;) * [2.umi 配置静态和动态路由、权限和动画、UMI 实现原理](javascript:;) * [3.dva 创建应用、集成 AntDesign、定义路由和 UI 组件、链接仓库、使用 effects 和 reducers、手写实现 dva](javascript:;) * [4. 使用 AntDesignPro 开发企业级后台系统](javascript:;) ## typescript * 开发环境、基本语法、面向对象编程、泛型、类型系统 * 前端工程化 TS 应用、声明文件、TypeScript+React 集成开发 # node 高级 * node 核心模块 * EventLoop 和事件队列 * process 全局对象 * commonjs 原理解析 * 深入字符编码 * Buffer 对象 * fs 文件模块 * 压缩与解压缩 * 加密与签名算法 * Stream 流的原理和应用 * 多线程与集群 * tcp、udp 和 http 服务器 * 多语言、防盗链、正向和反向代码服务器 ## http深入和tcp详解 * [1.七层网络协议分析](javascript:;) * [2.TCP连接和Nagle算法](javascript:;) * [3.使用`wireshark`学习七层网络协议](javascript:;) * [4.DNS服务器详解](javascript:;) * [5.Node静态服务器实现与缓存机制的实现](javascript:;) * [6.HTTP常用报文的实际应用](javascript:;) * [7.Node Stream的应用与文件分片上传策略](javascript:;) * [8.RestfulAPI设计和使用](javascript:;) * [9.CDN和OSS的使用](javascript:;) * [10.HTTPS安全通信过程分析](javascript:;) ## Express * 手写express框架 * 中间件的实现原理、bodyParser、cookie-parser、static、模板原理 ## Koa * 手写Koa框架 * 中间件的实现原理、bodyParser、cookie-parser、static、模板原理 路由配置、参数处理、使用中间件、模板、静态文件中间件、重定向、cookie 和 session、JWT 权限认证 ## 企业级开发框架 Egg.js * 项目架构、配置路由、静态文件服务、模板引擎、远程接口服务、计划任务 * 集成 MYSQL、restful 接口、sequelize 持久化工具、国际化、扩展工具方法、中间件、运行环境、单元测试、服务器部署和运维 * 自定义插件和框架 * egg.js+antdesign开发前后端分离应用 ## Linux * [1.Linux介绍](javascript:;) * [2.Linux文件和目录](javascript:;) * [3.Linux用户和组权限](javascript:;) * [4.Linux命令](javascript:;) * [5.Shell脚本](javascript:;) ## Mongodb * Mongodb安装和使用 * Mongodb的系统架构 * Mongodb高级查询 * Mongodb索引 * Mongodb安全与权限 * mongoose模块之Schema * mongoose模块之Model * mongoose 实战 使用Model对文档进行增删改查 ## MySQL * [1.MYSQL 安装与使用](javascript:;) * [2.MYSQL 系统架构](javascript:;) * [3\. 数据处理之增删改查](javascript:;) * [4\. 数据类型和约束分页](javascript:;) * [5\. 索引和慢查询性能分析](javascript:;) * [6\. 数据库安全之防止 SQL 注入](javascript:;) * [7\. 数据库设计 ER 图设计](javascript:;) * [8\. 数据库事务、锁和日志隔离级别](javascript:;) * [9\. 数据库设计之三大范式](javascript:;) * [10\. 基于角色的权限访问控制（Role-Based Access Control）](javascript:;) ## 珠峰爬虫(cheerio+request+mysql) * [1.发出HTTP请求获取指定URL中的内容](javascript:;) * [2.使用cheerio的语法操作网页元素，提取需要的元素](javascript:;) * [3.将数据保存到mysql数据库中](javascript:;) * [4.建立web服务器显示这些数据](javascript:;) * [5.使用计划任务自动执行更新任务](javascript:;) * [6.布署项目到阿里云中并配置反向代理](javascript:;) ## Redis * [1.Redis 安装和使用](javascript:;) * [2.5 种数据结构及使用场景](javascript:;) * [3.API 的理解和使用](javascript:;) * [4.Redis 客户端](javascript:;) * [5\. 发布订阅](javascript:;) * [6\. 事务](javascript:;) * [7\. 备份和恢复](javascript:;) ## GraphQL ## Nginx * nginx的安装和使用 * 模块和基本配置 * 正向反向代理等应用场景 * CDN * 浏览器缓存 * 跨域 * 防盗链 ## Docker * [1.Docker介绍和安装](javascript:;) * [2.Dockerfile](javascript:;) * [3.存储和镜像仓库](javascript:;) * [4.Dock实战](javascript:;) ## 单元测试 * [1.测试用例和需求分析](javascript:;) * [2.单元测试框架mocha/ava](javascript:;) * [3.爬虫利器 Puppeteer 实战](javascript:;) * [4.Jest+Enzyme实现React单元测试](javascript:;) ## 集群和负载均衡 * [1.cluster的工作原理和负载均衡算法](javascript:;) * [2.pm2工具](javascript:;) ## 前端性能监控与性能优化、行为监控与安全防范 * [1.针对重绘重排的优化策略](javascript:;) * [2.如何发现性能短板与各个短板的优化](javascript:;) * [3.前端埋点上报](javascript:;) * [4.前端错误上报](javascript:;) * [5.前端性能上报](javascript:;) * [6.前端行为监控上报](javascript:;) * [7.前端恢复上线与A/B测试](javascript:;) * [8.网络缓存技术分析](javascript:;) * [9.浏览器渲染过程分析(DOM树、RenderObject、绘图上下文)](javascript:;) ## 服务器布署 * TCP/IP 协议族网络模型、IP 协议以及简单路由、TCP 连接的本质、TCP 三次握手和加次挥手、路由和网关、滑动容器和 Nagle 算法、HTTPS、网络命令、网络调优、wireshark 抓包实战 * 域名、备案、服务器、环境配置、安全设置、远程部署、发布与更新 * 集群的负载均衡、PM2 实战 ## 项目部署 * npm script工作流 * shell 脚本布署 ## 安全 * [1.XSS的原理与代码实战](javascript:;) * [2.CSRF的原理与代码实战](javascript:;) ## 功能测试与性能测试 * [1.测试用例和需求分析](javascript:;) * [2.常用功能测试框架基础使用(mocha/ava)](javascript:;) * [3.常用性能测试框架基础使用(Benchmark)](javascript:;) ## 持续集成和布署 * jenkins job * shell 集成 * 集成 nginx 和 git * 持续集成和布署 * travis gitlab ci ## 全链路优化 * DNS优化 * 请求速度优化 * 渲染优化之 JS css image html * 缓存优化 * 服务器优化 * 数据库优化 # 五 、综合项目实战 ## Egg.js+AntDesignPro+MySQL全家桶开发 * 脚手架生成项目 * 配置后台代理 * 后台首页实现布局模版 * 封装顶部导航 * 左侧权限菜单导航] * 全部删除 * 搜索 * 为角色分配权限 * 为角色分配用户 * 分类和文章 * 广告轮播图 ## React Mongodb聊天室 * [1.什么是实时通信](javascript:;) * [2.什么是Websocket](javascript:;) * [3.websocket和http的对比](javascript:;) * [4.使用socket.io实现聊天室](javascript:;) * [5.匿名聊天](javascript:;) * [6.有用户名的聊天和用户列表](javascript:;) * [7.用户私聊](javascript:;) * [8.划分不同的聊天房间](javascript:;) * [9.消息持久化](javascript:;) * [10.支持QQ表情](javascript:;) ## 个性化新闻爬虫 * [1.用superagent+cheerio爬取网页内容](javascript:;) * [2.数据持久化到数据库](javascript:;) * [3.用户个性化订阅标签](javascript:;) * [4.数据更新分发推送邮件](javascript:;) * [5.用es实现全文检索](javascript:;) ## React实战-珠峰课堂 * [1.webpack环境搭建](javascript:;) * [2.底部页签导航](javascript:;) * [3.动画](javascript:;) * [4.redux改变课程分类](javascript:;) * [5.实现头部轮播图](javascript:;) * [6.课程列表列表](javascript:;) * [7.下拉刷新](javascript:;) * [8.上拉加载](javascript:;) * [9.记录滚动条位置](javascript:;) * [10.课程详情页面](javascript:;) * [11.用户注册](javascript:;) * [12.用户登录](javascript:;) * [13.受保护的我的课程页面](javascript:;) * [14.Redux开发插件](javascript:;) ## Canvas开发愤怒的小鸟 * 画布和画图 * background实现 * 实现大地 * 绘制管道 * 绘制小鸟 * 碰撞检测 * 场景管理之场景0,1 * 场景管理之2,3 ## 使用 three.js 开发微信小游戏跳一跳 * [1.基础信息属性配置](javascript:;) * [2.几何体创建以及相机镜头位置改变](javascript:;) * [3.更新相机坐标实现视觉动画](javascript:;) * [4.绑定事件实现jumper跳跃功能](javascript:;) * [5.回顾思路梳理逻辑](javascript:;) * [6.最终完成实现成功和失败的处理和重置操作](javascript:;) * [7.场景管理之场景0,1](javascript:;) * [8.场景管理之2,3](javascript:;) ## 前端设计模式 ## 创建型设计模式 * [1.工厂模式](javascript:;) * [2.建造者模式](javascript:;) * [3.原型模式](javascript:;) * [4.单例模式](javascript:;) ## 结构型设计模式 * [1.外观模式](javascript:;) * [2.适配器模式](javascript:;) * [3.代理模式](javascript:;) * [4.装饰者模式](javascript:;) * [5.组合模式](javascript:;) ## 行为型设计模式 * [1.观察者模式](javascript:;) * [2.状态模式](javascript:;) * [3.策略模式](javascript:;) * [4.命令模式](javascript:;) * [5.访问者模式](javascript:;) * [6.中介者模式](javascript:;) * [5.迭代器模式](javascript:;) # 算法&数据结构(选讲) ## 算法基础 * 输入、输出和数据级 * 计算能力的变革 * CPU、寄存器和内存 * 二分查找 * 插入排序 * 冒泡排序 ## 算法的衡量和优化 * 时间复杂度和空间复杂度 * 复杂度的本质 * 递归函数复杂度分析 * 递归表达式分析法 * 递归数学归纳法分析 * 主定理 ## 排序算法 * 排序算法介绍 * 基于比较的排序算法 * 合并排序/优化和分治策略排序 * 快速排序 * 快速排序复杂度和优化 * 计数排序 * 基数排序 * 桶排序 * 外部排序 ## 数据结构 * 数组 * 双向链表 * 反转单向链表 * 堆 * 栈 * 队列 ## 进阶算法 * 动态规划的概念 * LCS 问题的子结构 * 填表法 * 构造结果 ## BAT 面试真题 * 反转二叉树 * 解析 query 字符串 * 取 N 个数字为 M * 火车排序问题和队列 * 网格走法动态规划 * 两个栈实现一个队列 * 二叉树搜索算法 * 青蛙跳台阶问题-动态规划算法 * React虚拟DOM Diff算法实现 ## 前端数据处理 * [1.前端处理数据的场景](javascript:;) * [2.数据的流处理(map/reduce/filter/zip/flatten/permuations…)](javascript:;) * [3.排序和分组](javascript:;) * [4.函数式编程库Ramda](javascript:;) * [5.倒排表和笛卡尔积](javascript:;) ## 递归 * [1.分段函数](javascript:;) * [2.斐波那契数列、数组的flatten、全排列](javascript:;) * [5.深拷贝/深比较](javascript:;) * [4.DOM遍历/DOM的查询（CSS选择器）的实现](javascript:;) * [1. 递归的基本概念](javascript:;) * [2. 递归图形的绘制](javascript:;) * [3. 递归和穷举问题](javascript:;) * [4. 组合问题](javascript:;) * [5. 递归空间优化](javascript:;) * [6. 回溯算法](javascript:;) * [7. 重复子问题优化](javascript:;) * [8. 尾递归](javascript:;) * [9. 搜索问题 (8 皇后)](javascript:;) * [10. 深度优先搜索和广度优先搜索](javascript:;) ## 字符串算法 * KMP算法 * 正则表达式高级应用 * 构建模板引擎原理 * 路由解析引擎原理 ## 闭包和函数式编程 * 函数节流 * Y-组合子 * Hindley-Milner 类型系统 ## 算法的分析方法 * 内存/CPU/线程/进程/缓存 * map/reduce/笛卡尔积的时间复杂度 ## 前端常用数据结构 * 栈和队列 * 链表 * 树 * 哈希表 * Facebook Immutable * 操作系统调度问题 * 循环链表和轮播图 * 字典树和输入提示问题 ## 回溯算法—游戏编程 * 八皇后问题 * 解决数独问题 * 寻路和A\* ## 动态规划 * 钢条切割问题 * 最长子串/子序列 * 最优二项搜索树 * 青蛙跳台阶问题-动态规划算法 ## 前端场景 * DOM diff 算法和树的编辑距离 * 超大瀑布流和虚拟化 * 插值、运动函数和贝塞尔曲线 * 数据可视化基础算法介绍 ## 机器学习算法 * 模型、测试和训练 * 分类问题 * 神经网络