导语
言归正传，在前端技术纷乱复杂，快速发展的今天，作为一名前端开发工程师如何快速融入，对我们显得格外重要，如何一步一步变成大前端，大前端时代下的前端开发必备哪些技能，前端开发者进阶的路径，对于我们来说都是至关重要的，今天小编给各位宝宝们专门整理了进阶大前端的提纲，希望对大家有所帮助，如果喜欢不要忘记点赞！
提纲
- Part1 JavaScript深度剖析
- Part2 前端工程化
- Part3 核心框架原理进阶
- Part4 Node.js全栈开发
Part1 JavaScript深度剖析
ECMAScript新特性
- JavaScript与ECMAScript的区别和新特性
- 块级作用域、模板字符串、const、let
- 对下与数组的结构，rest操作符
- 箭头函数、默认参数
- 对象和数组的扩展用法
- Proxy、Reflect、Map、Set、Symbol概念及用法
- for...of、迭代器模式、生成器函数
- ES Modules模块化
- ES6-ES10……
- AMD、CMD、ES6区别
- Promis、await、async
- class 类
- 编译工具babel
- 新特性的Polyfill:CoreJS标准库
JavaScript异步编程
- JavaScript单线程设计
- 同步模块和异步模块的调用差异
- 回调函数的执行原理
- Promise异步方案的使用
- 处理异步任务的任务队列和事件循环
- javaScript内部的宏任务和微任务
- ES6 Generator迭代器的异步应用
- 使用Async/Await的异步代码
TypeScript高级编程
- 编程语言的数据类型
- JavaScript的自有类型
- Flow静态类型检查方案
- Flow静态工具配置及相关插件使用
- TypeScript基本语法
- TypeScript高级特性(泛型、接口)
- TypeScript内置对象标准库
- TypeScript类型申明
函数式编程范式
- 函数式编程的本质及应用场景
- 如何以函数式编程风格创建应用程序
- 用码构建功能复杂的程序
- 纯函数的定义及为什么要用纯函数
- 消除和副作用的意义
- 柯里化、compose、高阶函数的优点
- 不可变的数据结构
- 常见库(Lodash、Ramda.js)
JavaScript性能优化
- JavaScript中的垃圾收集
- JavaScript内存管理
- V8垃圾回收机制分类
- 引用计数、标记清除、标记整理和增量标记
- Preformance工具使用及注意事项
- 20个代码优化层面细节
Part2 前端工程化
工程化
- 什么是工程化
- 工程化组成
- 工程化在项目中的表现
- 工程haul与工具之间的关系
脚手架工具和工程化
- 脚手架设计思想与目标
- 脚手架工具的本质作用
- 常用的脚手架工具
- Yeoman的使用及自定义Generator
- Yeoman Sub Generator 特性
- 用Yeoman创建自己的脚手架
- Plop生成器的基本使用
- 使用 Plop提高项目创建同类文件的效率
- 脚手架工作原理剖析
- 搭建自己的脚手架
动化构建
- 如何使用自动化构建提高开发效率
- 自动化构建工具有哪些
- npm scripts vs scrpits hooks
- Grunt工具的配置使用及扩展开发
- Gulp工具的配置使用及扩展开发
- 基于Gulp创建自动化构建流程
- 封装独立的自动化构建工具
- FIS3的使用及常用的插件和扩展
自动化测试
- 自动化测试的主要分类: 单元测试、集成测试、E2E测试
- 性能测试与压力测试
- 常见的自动化测试框架与实现原理
- Mocha、Jest、Enzyme、Cypress、Nightmare、Puppeteer
- 前端项目自动化测试的最佳实践（基础设施、公共组件测试
自动化部署（CI / CD）
- 持续集成与持续部署
- 基于 GitHub / GitLab自动化工作流搭建
- 常见的CI实践:Jenkins、GitLab CI、Travis CI、Circle CI
- 开源项目: GitHub Actions
- 基于常用CI系统实现静态部署/Node类项目的自动部署
模块开发与Webpack
- 模块化标准与规范
- ES Modules标准的支持情况
- Webpack打包工具的基本使用
- Webpack的配置详解
- Webpack打包过程和打包结果分析
- Webpack资源模块的加载(Loader)
- Webpack的插件机制
- 开发Webpack插件
- 开发Webpack Loader
- Webpack周边生态(Dev Server、HMR、Rroxy)
- Webpack高级特性(Tree-shakingȄsideEffects)
- Webpack打包过程及打包结果优化
- 深度剖析Webpack实现原理(AST语法树）
- 其他常见工具(Rollup、Parcel)
规范与标准化
- 常见的代码Lint工具(ESLint、Stylelint)
- 创建项目团队的专属Lint规则
- 通用代码格式化工具Prettier
- 将工具集成到Webpack使用
- 配合Git Hook保证代码仓库中代码质量
- 结合脚手架、自动化、模块化、规范化搭建现代化前端工程
