前端问题:大前端知识体系是怎样的?

素材编辑 | 宋大狮

排版运营 | 小唐狮

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 -

 


版权声明:本文为m0_74802419原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。