前端技术学习指南

前端技术学习指南

基础

css3、html5：

1. 掌握滤镜、渐变、过渡、转换、动画等高级样式；
2. 掌握流式布局（flex）和格栅布局(grid)的原理及应用；
3. 掌握html5新特性的用法，比如before/after等伪元素的经典用法；
4. 解并总结可视化设计中的一些经典用法；
5. 掌握css中常用的变量，及函数的使用；

Css预处理：

1. 了解css 预处理器less,sass/scss基本使用；
2. 掌握scss中的变量，函数，混合函数的使用及设计；

js(es6)：

1. js的基本用法，譬如jquery库的调用；
2. es6及相关api的的学习应用；
3. es6相关库的使用，如fetch、axios请求库

动画：

1. css动画应用；
2. jquery动画api的应用；
3. 经典动画库，譬如animate.css,anime.js等等；

Es6编译打包工具：

1. 了解node,学会使用包管理工具npm,yarn等;
2. 熟练使用webpack，grunt打包工具中的一种；
3. 熟悉es6的编译工具babel；

React相关知识：

1. 掌握react基本语法，生命周期等基础内容；
2. 了解数据管理器Redux原理，熟练使用react-redux管理react数据；
3. 了解路由router的原理,熟练使用react-router管理react应用的路由；
4. 了解react相关库，如格式化数字等等的库；
5. 熟悉ant-desigin、ant-desigin-pro等react的经典应用库
6. 熟悉基于react的数据流前端框架dva；
7. 熟悉基于react的应用开发框架umi
8. 了解基于移动端的ant-design-mobile库；
9. 了解基于react的动画库ant-motion;
10. 了解数据可视化库antv;
11. 掌握react开发中常用的脚手架工具，如create-react-app等；

Vue相关知识：

1. 掌握Vue基本语法，生命周期等基础内容；
2. 了解数据管理器Vuex原理，熟练使用Vuex管理vue数据；
3. 了解路由router的原理,熟练使用vue Router管理vue应用的路由；
4. 了解vue相关库，如格式化数字等等的库；
5. 熟悉ant-desigin-vue等vue的经典应用库;
6. 了解基于vue的移动/微信端ui库YDUI touch等；
7. 掌握vue开发中常用的脚手架工具，如vue-cli等；

Angular相关知识：

1. 了解Angular.js相关知识即可；

.可视化库：

1. 熟练掌握echarts的使用；
2. 熟悉d3.js可视化库的使用；
3. 了解vijs等库的应用；

进阶

移动端：

1. 熟悉基于react的移动端开发框架react-native及其生态库;
2. 熟悉google的移动跨平台Ui开发框架flutter及其生态库；

Js进阶：

1. Javascript 的根Object的属性和静态方法及实例方法;
2. 熟悉javascript的作用域及作用域链；
3. 熟悉javascript的闭包原理；
4. 熟悉javascript的执行上下文；
5. 熟悉javascript的原型机原型链；
6. 了解jquery源码，了解其核心封装思想；

React/vue进阶：

1. react高阶函数、hook函数的封装及应用；
2. 了解react的执行原理，包裹diff算法等等；
3. 了解 react,redux,react-redux,react-router-redux,dva等react相关核心库的源码；并了解其执行原理；
4. 了解 vue,vuex,vue-router 等vue相关核心库的源码，并了解其执行原理；

Web端：

1. 了解构建跨平台桌面应用程序的开发库electron及其生态库；
2. 了解前端3D开发库threejs,thingjs;
3. 了解前端多线程技术web worker；
4. 了解前端渐进式网页应用程序技术PWA；

性能优化：

1. 网络层面；
2. Js层面；
3. Css层面；