素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

今天要和大家分享的是关于前端知识体系的问题，主要是个人在前端领域学习和工作这么长时间以来，因为很少细致的去归纳前端的知识体系，而只会大致的了解前端技术栈的相关知识点，用最短的时间去掌握并应用于工作，导致个人现在感觉十分迷茫，整个学习计划非常不清晰。甚者，时间一长的话，还总是会遗忘，必须要快速重新学习某一个知识点来应对工作，久而久之，就会导致之前的学过得东西十分混乱，没有一个有条理的体系，总的来讲就是十分的低效。于是今天就想着用最少的文字，来记录一下这个问题，希望能够帮助到有同感的朋友。

需求：针对前端小白，需要考虑学习成本，以求最快速的入门职场所需要的前端技术点。针对前端已工作的朋友，需要考虑技术点的重要性和全面性，以求最快速的复习巩固重要技术点，及补充学习之前初学时所落下的知识点。

问题：梳理前端知识体系。

TWO 知识体系

写在最前面：前端知识体系仅为主流和重点，并不全面，仅供快速学习参考，后期会做全面补充

一：基础三大件HTML+CSS+JS

1、HTML：

认识各种标签

H5新特性

2、CSS：

选择器

盒模型

浮动

定位

CSS3新特性

3、JS：

流程控制语句

函数

数组

字符串

DOM

事件

BOM

JSON

面向对象

动画

正则表达式

Ajax

ES6新特性

备注：JQuery根据公司需要学习，如不需要可暂时不用学习，此处暂不议，后续会做补充。

二：框架Vue2

1、内置指令

v-bind

v-on

v-if

v-show

v-for

v-model

v-html

v-text

2、配置项

computed计算属性

watch监听器

filters过滤器

directives自定义指令

3、生命周期

created

mounted

beforeDestroy

4、组件

组件通信方式：

父传子、子传父

祖传孙、孙传祖

兄弟间

5、路由管理

vue-router

路由跳转方式

路由传参方式

6、状态管理

Vuex

五种状态

工作流程

7、请求管理

Axios

二次封装

8、Vue2响应式原理

备注：三大框架中Angular和React根据公司需要学习，如不需要可暂时不用学习，此处暂不议，后续会做补充。

三：Uni

1、事件

事件绑定

事件传参

事件对象参数

事件数据处理

2、页面跳转

跳转方式

传参方式

接收参数

3、页面渲染

标签

显示隐藏

遍历

4、请求接口

备注：Uni语法类同Vue，学习时重点关注两者区别。原生微信小程序开发、原生APP开发根据公司需要学习，如不需要可暂时不用学习，此处暂不议，后续会做补充。

四：其它

版本管理工具：

Git的使用

写在此处分割线：线上为工作必学，线下为选学

五：Vue3+Ts

1、Ts

原始类型

复杂类型

联合交叉类型

未知类型

不存在类型

接口类型

类型别名

枚举

泛型

类

工具类型

类型断言

2、Vue3

setup

ref

reactive

组件通信方式

computed计算属性

watch监听器

hook

toRefs

接口类型抽取

Teleport

Vue3响应式原理

六：移动端

安卓：

Java【推荐学习】

Kotlin

苹果：

Object-C

Swift【推荐学习】

跨端：

Uni

Flutter【性能高】【推荐学习】

七：桌面端

原生：

此处暂不议，后续会做补充。

跨端：

Tauri【基于Rust、性能高、体积小】【推荐学习】

Electron【基于Node.js、性能低、体积大】

Flutter【刚起步】

八、小程序

原生：

此处暂不议，后续会做补充。

跨端：

Uni

Taro【性能高】【推荐学习】

八：服务端Node.js

备注：Node.js根据公司需要学习，如不需要可暂时不用学习，此处暂不议，后续会做补充。

九：其它

可视化：

2D:

Svg

Canvas

D3.js

Echarts

3D：

WebGL

Three.js

- END -