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

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 书籍

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

你可能感兴趣的:(前端,前端,vue.js,程序人生)