【前端】知识点及后续进阶学习的阶段性整理记录

0 前言

本文包括：知识点、视频、开源项目、个人学习方法、书籍。
已经拿到了offer，但还没正式入职，最近事情不是很多，可以抓紧时间多自学自学先。
于是整理了下知识图谱，梳理了一些还未掌握或掌握不足的知识点，在这儿做个记录。
目前的文章版本只是做了个重点摘录，后续会迭代增删修改，改善本文质量。

主要参考了以下内容：
The Complete Works of Tao Technology 2021
2022年度全网最全Web前端学习路线（尚硅谷）
大圣前端学习路线图 Geektime Vue3（大圣）
前端学习路线
前端知识图谱+B站资源整合 V1.0版本（技术胖）

---

1 知识点

1 Serverless

2 云端一体

3 精进一门技术

4 云原生

5 内核

6 网络进阶

7 理论

8 跨端（uni-app，h5hybrid，ReactNative，Electron）

9 前端智能化

10 组件开发与封装（模仿Antd)

11 数据可视化的实现（原理与实现）

12 构建工具（Gulp，Webpack5）

13 低代码（原理与实现）

14 canvas

15 三剑客强化（h5+css3+js高级，Promise等）

16 Node进阶

17 MongoDB

18 ES6整理

19 模块化规范

20 Git进阶

21 源码（Axios

22 TS进阶

23 React项目实践

24 Vue3项目实践

25 Vue其他（Mustache源码、虚拟DOM和diff算法源码、数据响应式原理源码、AST源码、指令和生命周期源码等）

---

2 视频

网上资料很多，按需去取即可。

2022年度全网最全Web前端学习路线（尚硅谷）
前端知识图谱+B站资源整合 V1.0版本（技术胖）

---

3 开源项目

尚硅谷提供了一些：
2022年度全网最全Web前端学习路线（尚硅谷）

淘系2021中也有一些，做了点整理：

初级项目

animate

演示地址：https://animate.style/

GitHub地址：https://github.com/animate-css/animate.css

CSS Inspiration

演示地址：https://chokcoco.github.io/CSS-Inspiration/#/

GitHub地址：https://github.com/chokcoco/CSS-Inspiration

vanillawebprojects

github: https://github.com/bradtraversy/vanillawebprojects

Ant Design

https://github.com/vueComponent/ant-design-vue/ (Vue版本)

Echarts

github: https://github.com/apache/echarts

JavaScript

传送门：https://es6.ruanyifeng.com/

ES6的学习 ECMAScript提案：https://github.com/tc39/proposals

中级项目

particles.js

演示地址：https://codepen.io/VincentGarreau/pen/pnlso

GitHub地址：https://github.com/VincentGarreau/particles.js

swiper.js

文档地址：https://www.swiper.com.cn/api/index.html

GitHub地址：https://github.com/nolimits4web/swiper

构建（Build）工具

Webpack：https://github.com/webpack/webpack

Gulp: https://github.com/gulpjs/gulp

TypeScript

github：https://github.com/microsoft/TypeScript

github中也有不少翻译的guide book: https://github.com/jkchao/typescript-book-chinese

vite

是一个新型前端构建工具，能够显著提升前端开发体验，和webpack等老牌打包工具不同，vite另辟蹊径，开发 环境下使用原生esm，让本地开发更快速。代码相较webpack更轻量，且实现逻辑巧妙，比较适合阅读学习。 github: https://github.com/vitejs/vite

高级项目

vue-admin-template

文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

h5-dooring

h5-dooring是一款可视化编辑器，底层是用react写的，使用此工具可以让我们快速生成h5页面。同时通过这 个平台也能了解到低代码的相关知识。

文档地址：http://h5.dooring.cn/doc

GitHub地址：https://github.com/MrXujiang/h5-Dooring

canvas-special

GitHub地址：https://github.com/bxm0927/canvas-special

Midway

Midway 是一个适用于构建 Serverless 服务，传统应用、微服务，小程序后端的 Node.js 框架

github: https://github.com/midwayjs/midway

---

4 个人学习方法

第一，列清单。梳理需要学习的内容的清单，订学习计划。
第二，简单了解。阅读博客或官网的介绍性文章。
第三，全面了解。下载并阅读尚硅谷的课件，或者阅读路线图给出的优质博客，进一步学习。
第四，解决困难。遇到问题，自己看不懂的地方，查看视频或查阅其他资料或看书。
第五，自主练习。写点小demo，或者运行和阅读开源项目，或者写个小项目。

---

5 书籍

【杂篇】书单（技术、文学、历史、经济、方法论等等）