2023前端进阶及相关知识整理

经过几年前端开发的经验以后，必然会发现每天工作的内容其实大部分都是类似的，而这个时候往往就会出现迷惘，感觉自己的工作知识技能基本上都停留在一个层次。其实前端是很广泛的领域，我们要学的会有很多，而许多东西未必会出现在工作中，但是一旦需要那又必须得去掌握去开发，因此利用业余时间去学习，看api文档，做demo示例这些是非常有必要的，最好做些自己的项目
本文对当前的自己做个知识总结。
如还有其他哪些需要学习的知识补充，可在下面留言！！！

基础知识

1. 计算机网络基础知识 链接
2. 数据结构与算法 链接
3. js设计模式 链接
4. js编译原理 链接
5. JavaScript 运行原理解析 链接
6. HTML渲染过程详解 链接
7. html，css在浏览器渲染渲染原理 链接
8. 函数式编程入门 链接
9. 前端优化 链接

前端知识

1. HTML 教程 链接
2. CSS 教程 链接
3. less 链接 / sass 链接 两者选其一
4. ajax 链接
5. fetch 新一代的网络请求方式 ，可以替代ajax 链接
6. js (es5) 链接
7. js (es6 以及后续的版本) 链接
8. ts 现在非常火的一个js超集(许多项目会看到) 链接
9. Dom/Bom 以及 对浏览器运行前端项目理解

前端框架技术和相关库

1. vue2 相关全家桶
2. vue3 相关全家桶 链接
3. nuxtjs 一个vue的srr框架 链接
4. uniapp(小程序,h5,app一套式开发) 链接
5. 微信小程序和公众号h5 原生开发 链接
6. 地图-可以完成api基本开发 （随便一个国内地图如高德）
7. echarts-可以完成api基本开发（echarts社区图集） 链接
8. GIS 和 geoJson 进行自定义地图开发
9. 深入一点的3d 相关开发如 D3 、 threejs、 thingjs
10. 各种工具如 ：腾讯IM 、webpack、git、npm、各种图标库(阿里巴巴图标库)、eslint、vscode
11. ui框架(element/vant/uview)
12. 微前端 （single-spa、乾坤微前端）
13. pc桌面开发项目electron (基于js开发pc桌面应用)
14. 各种web相关使用的插件 （vue插件库）(富文本编辑器wangEditor)
15. 各种工具（在线工具）
16. 走react路线的要学习taro、react系相关库，reactNative
17. 最新的serverless

nodejs开发后端相关的库和框架

1. nodeJS 基础知识 链接 （nodejs中文社区）
2. express (链接)、koa/koa2
3. 持久层框架（mongoose) 、（TypeORM）
4. 数据库 （MongoDB介于关系数据库和非关系数据库）(MySQL (经典的关系数据库)) （Redis (基于内存亦可持久化的数据库)）
5. mysql数据库使用工具 navicat
6. 经典框架 egg(阿里的) 、midway(新一代后端框架)、nestjs(推荐的新一代后端Nodejs框架)
7. linux操作系统基本使用(会安装软件如(mysql)，会操作文件，会写启动代码)
8. nginx的使用(会写配置内容)
9. 各种云，如阿里云，会租服务器，会配置服务器和域名、cdn等
10. postman，Fiddler

代码管理和博客相关

1. CSDN、博客园、简书、掘金、知乎等
2. github是项目代码托管和寻找别人优秀项目的最佳选择

项目工程

1. axure （产品原型开发）
2. 蓝湖 (ui相关的)
3. 禅道(测试相关的)
4. gitLab （可以本地安装私有git）
5. jenkins（项目构建打包部署）
6. docker （项目部署、镜像）

综合

上面整理的各种内容在现在五花八门的库、框架面前算是比较少了，但是也基本上囊括了当前前端常用的以及需要掌握的各种内容。
现在的前端要求越来越广泛，真的是什么都能做，什么都要我们做。综合下来也就app、h5公众号、小程序，pc、桌面、后端nodejs等几个方面
1.基础知识是需要了解的，虽然日常不常用，但是就怕面试官冷不丁的来几个这样的问题
2.前端知识想必开发个一两年该熟悉的都会熟悉，多去回顾回顾就能够完成掌握，其中ts可以配合后面的框架使用
3.至于其他各种内容则看需要学习掌握，合理规划

知识整理与认识

走Vue路线的，首先就是免不了学习(vue + vue-router + vuex/pinia + vite/vue-cli)全家桶系列，不过vue3和vue2之间产生了一些不同开发方式。首先是vuex和pinia这两个储存库、vite和vue-cli两个脚手架，两种选其一各有各的搭配方式，但基本上都要认识能够随意自己去改变去纠正配置，毕竟不知道什么时候会遇到vue2项目呢。vue3的组合式api写法和vue2的选项式写法必须要认识清楚，本质上是一样的。写法不同而已，都要掌握。各种相关库也因此而有不同的调整要使用对应版本即可。

学完vue全家桶就已经可以满足PC端和H5页面的各种内容开发，但是spa这种开发模式常用于后台亦或者一些功能性的项目，对seo等是不和谐的，这个时候要学习vueSSR框架nuxtjs，这个框架很有必要学一学，保不准下一个公司就要开发

关于地图和echarts。这两个日常的api会使用就能够满足日常开发需求，但是有时间深入学习一下也是可以的。包括3d方面的几个库，都是非常有挑战性的，有些公司是需要这种人才的

关于动画特效和canvas相关的内容，这种需要多做各种特效，并且熟悉相关的api使用方式，这样才能够完成许多特殊的效果。有时间可以研究研究

关于视频和直播，现在这个是比较流行的内容，视频直播无非就是要掌握api，能够利用api熟练的操作各种视频内容，同时要深入了解底层，视频流、文件流以及Js相关的文件操作视频操作api等

小程序和h5公众号的原生开发是必须掌握的，作为一个前端，现在基本上要满足小程序,h5公众号和 vue PC端的内容开发。

微前端适用于一些比较大内容或者后台项目比较多的公司，统合所有的项目使用，和微服务类似而已，日常看需要用

最新的serverless，其实看起来高大上，用起来也就这样，前端全栈化，无非就是少了各种配置部署，它全帮你搞定了，自己只需要使用提供的api即可。而数据库方面的设计，其实和moongodb很相似，我怀疑就是用的这个，全程看做json就行，实在不懂学一学moongodb。操作数据方面直接使用提供的api即可，就当多学一个持久层框架呗

关于基于js的后端学习，nodejs的学习最重要的是官网的api，要知道这个东西里面有什么，它安装了之后可以调用哪些东西，如：procee.xxx,fs.xxx得知道这个属于什么内容
express框架和koa/koa2框架是基于nodejs的api上进行一层封装的框架，但是封的比较浅显，没那么多规矩，因此需要各种中间件来辅助才能开发后端。
eggjs可以看作是基于koa之上封装的一种框架，多了一些约定，多了一些功能内容
midway和nestjs就可以看作是一个比较成熟的Nodejs框架，更加适应于后端开发。

知识规划

vue路线前端方面要掌握的内容

1. vue2、vue3全家桶 vue + vue-router + vuex/pinia + vite/vue-cli ，同时要熟练两者直接的区别,熟练两者之间切换
2. vue相关方面的各种库 element,vant,axios,eslint等常用的东西
3. vueSSR项目NuxtJS要掌握
4. 掌握uniapp框架以及相关生态库的认识和使用
5. 掌握原生小程序和公众号开发(以微信为主)
6. 熟悉echarts和地图等api常规使用

最基本的能力要求是能够进行vuePC端开发，vue微信公众号h5开发，uniapp小程序，h5，app开发(简单点的app)、原生微信小程序开发
如果在精通react系那就更完美了

额外学习：桌面应用开发Electron
吐槽一下：现在的vue之类的框架开发app好多坑要踩，复杂多样的app还是少用

学习后端nodejs的路线

1. 掌握Nodejs的基础知识看nodejs相关api文档，同时要会区分nodejs和前端js的区别，运行环境不同，拥有模块不同等
2. express 、koa、koa2三个基础框架选择认识了解其一，这三个是非常基础的框架，推荐express，学习入门后端nodejs的基础
3. midway 和 nestjs 这两个高级框架选其一，推荐nestjs,这个类似spring,用起来舒服

Nodejs的基础知识 ------》 express及相关中间件+mongoose+MongoDB ------》nestjs+typeorm+mysql