web前端高级JavaScript - 前端web高级开发知识体系课程大纲

堆栈内存和闭包作用域

• 9种数据类型区别及相互转换
• 词法解析和变量提升
• 堆（Heap）栈（stack）内存及垃圾回收机制
• JS底层运行机制：EC/AO/VO/GO
• 作用域（Scope）和作用域链（Scope-chain）
• 闭包及其两大作用：保存/保护
• 高阶编程：惰性函数/柯理化函数/compse组合函数
• BAT/TMD经典面试题深入剖析
• JQuery源码解读【基本骨架】
• Lodash源码解读【函数防抖和节流】

面向对象程序设计

• 全方位剖析面向对象程序设计
• 构造函数和new底层实现机制
• 原型和原型链
• 函数3种角色及Function/Object的相互依赖机制
• BAT/TMD经典面试题深入剖析
• This的5大场景及实战应用
• call/apply/bind/instanceof/Object.create等源码剖析
• JS中4大继承方案的深入解析
• jQuery源码解读【数据类型检测的封装及底层核心】
• Lodash源码解读【数组/对象的深拷贝和深比较】

DOM事件即设计模式

• 详细解读事件及事件对象
• DOM2级事件的核心运行机制
• 事件传播机制和事件代理
• jQuery源码解读【事件库】
• 观察者和发布订阅设计模式
• 单例和工厂设计模式
• 代理和装饰设计模式
• 从零实现开源及插件组件封装
• BAT/TMD经典面试题深入剖析
• 京东放大镜、B站楼层导航、百度可拖拽登录框等

ES6+核心知识和源码解析

• let/const/var的区别
• 箭头函数和普通函数的区别
• class类和类的装饰器
• Set/Map/WeakSet/WeakMap
• Promise 和Promise A+ 规范源码
• async/await及内部实现原理
• Generator生成器和Interator迭代器
• 模块化发展历程：AMD、CMD、CommonJS、ES6Module
• Object.defineproperty和Proxy深度对比
• 函数式编程和命令式编程

AJAX/HTTP前后端数据通信

• HTTP1.0和HTTP2.0的区别
• HTTP和HTTPS的区别
• TCP的三次握手和四次挥手
• DNS和DNS预解析
• 强缓存（Expires/Cache-Control）和协商缓存（Last-Modified/ETag）
• HTTP报文和HTTP网络状态码
• XMLHttpRequest及内部核心操作
• 数据传输格式FormData/x-www-form-urlencoded/raw/binary
• Axios库及Axios的二次配置
• 基于Promise从零封装Axios
• Fetch及Fetch库的封装
• N种跨域解决方案及底层原理
• 前端性能优化方案汇总

Webpack工程化开发与部署

• webpack核心基础知识
• 单（多）项目入口打包
• webpack devServer和proxy代理
• loaders及plugins处理
• CSS样式抽离、压缩、兼容性处理
• less/sass等预编译语言的处理
• 基于babel转换ES6/ES7语法及Polyfill兼容处理
• resolve/sourceMap
• webpack性能优化（TreeShaking、CDN加载热更新、图片压缩等）
• vue-cli3.0脚手架的应用/配置和性能优化
• vite / snowpack基础语法和实战应用

Vue2.0的基础知识与核心原理

• mvvm双向数据绑定实现原理
• dom-diff及实现原理
• v-model及实现原理
• template模板语法和render
• JSX语法受控组件（data）
• 非受控组件（ref）属性及属性的校验规则
• 常用的指令和Vue.directive自定义指令
• watch与computed的深度对比和实现机制
• 事件处理和修饰符
• 表单元素和条件及循环渲染
• vue transition动画和路由切换动效生命周期（钩子）函数即实战应用
• Component组件和开发及slot插槽
• 实战案例：淘宝商城购物车信息管理

Vue生态及进阶（vuex、vue-router）

• 复合组件通信的6大方案
• $on / $emit自定义事件
• vuex基础：state/getter/mutation/action
• vuex模块化管理和mapXxx遍历
• mixin混入和vue.use插件开发
• vuex的核心源码解读
• SPA（单页面应用）和MPA（多页面应用）对比
• HASH路由和BROWSER路由对比
• 编程式导航和动态路由
• 路由导航守卫及权限校验
• keep-alive组件静态/动态缓存
• vue-router核心源码解读
• 实战案例：TASK OA任务管理系统

Vue综合实战和性能优化

• element-ui/cube-ui/vant实战应用和二次封装
• 从零开始封装专业级UI组件
• Vue-DevTools调试工具与单元测试
• 长列表和无限列表性能优化方案
• 基于babel-plugin-component实现组件按需导入
• 图片/路由/数据等资源的懒加载
• loading / 骨架屏等优化技巧的实战应用
• webpack编译打包层面的优化处理
• CSRF / xss 等方面的网络安全优化处理

VUE3.0基础知识与核心原理

• 全方位深度对比vue2与vue3的区别
• vue3新特性全方位剖析
• 基于vite/webpack实现vue3工程化部署
• 掌握setup和10种响应式系统API
• 掌握新生命周期函数和模板refs的使用
• vue3中的响应式系统和dom-diff
• 基于vue3实现“知乎日报app”开发

React基础知识与核心原理

• create-react-app脚手架的应用于优化
• jxs的基础知识和实战应用
• 虚拟DOM到真是DOM的渲染原理
• react中的dom-diff实现原理
• 属性和状态的管理（深入剖析setState的同步异步）
• 受控和非受控组件
• react合成事件和双向绑定数据
• 函数式组件及React Hooks
• 类组件及其声明周期函数（Component VS PureComponent）
• 复合组件和组件嵌套
• 基于属性实现父子组件信息通信
• 基于上下文（React.createContext）实现组件信息通信

React生态及进阶redux/react-router-dom

• redux的操作流程和实战应用
• react-redux的实战应用和中间件处理
• 高阶组件（代理组件）及其实现原理
• redux/react-redux/中间件源码解读
• Dva和Umijs及其实战应用
• react-router-dom的基础常规操作
• withRouter高阶函数
• 编程式导航和动态路由
• 实战案例

React综合实战和性能优化

• 从零开始封装专业级UI组件
• Ant DesignUI库的应用和二次封装
• axios/fetch二次配置heAPI接口模块化管理
• 第三方登录和支付功能
• code splitting代码“懒加载”
• shouldComponentJpdate与PureComponent
• 列表类组件优化处理技巧
• 基于Immutable.js进行性能优化
• react-addons-perf性能监测
• 大型实战项目：小米优品电商

专题

• 微信小程序
• 全面贯穿node.js/express全栈开发
• GIT团队协作开发
• TypeScript及Flutter