--- theme: cyanosis --- **这是我参与更文挑战的第8天，活动详情查看**： [**更文挑战**](https://juejin.cn/post/6967194882926444557) # 写在开头最近准备给团队分享一下前端技术体系，明确提升的方向，顺便说一下基础能力范畴指哪些东西，分为**技术能力和软能力**。下面列的东西也有许多我自己不擅长的地方，但是还是会列一下，也是目前自己能想到的技术体系结构。不妥不足的地方还望指正。第二也是提出目前需要打好的基础能力范畴。 ## 技术能力图 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a137abe5aad414d87ad9a37f4681f18~tplv-k3u1fbpfcp-zoom-1.image)

## 软能力图具体可查看文章：[前端项目负责人需要具有的能力](https://juejin.cn/post/6946210273061502990)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b1556b592ee472582a5e10223df0ca3~tplv-k3u1fbpfcp-zoom-1.image)

# 为什么强调基础能力？基础能力是技术能力发展的基础。举几个例子可能会比较清楚。
## 基础知识和react的关系 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e2945d988c347bd99e863ad748f18e3~tplv-k3u1fbpfcp-zoom-1.image)
## 基础知识和算法的关系 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/828a7e573fe3476594616ea1c795df1f~tplv-k3u1fbpfcp-zoom-1.image)
## 性能优化和基础知识的关系 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2abefe8ba6442d080622197405b0b63~tplv-k3u1fbpfcp-zoom-1.image)

# 基础技术能力这里学习这些知识是为了后面更好的发展，打好基础是关键。

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/435bdbddee12480bbbdfe82ad7d06aea~tplv-k3u1fbpfcp-zoom-1.image)

## 基础知识 ![初中级开发体系简介.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e79b6383ba94c2cbaa298abb385987f~tplv-k3u1fbpfcp-zoom-1.image) ### html - 语义化 - html元素 - 文档元数据
### DOM - 节点 - html属性和dom属性的不同 - 属性 - 访问 - 事件
### javascript 这里把我在掘金上写过的一些文章链接贴进来。
- js数据类型 &包装对象内置对象 - 字符串方法 - 数组方法 - 对象方法 - 运算符操作 - [原型](https://juejin.cn/post/6944715278915731486) - [继承](https://juejin.cn/post/6902467368899837966) - [作用域链](https://juejin.cn/post/6961711638978232356) - [执行上下文](https://juejin.cn/post/6963603066507493412) - [闭包](https://juejin.cn/post/6966970905629032456) - [this](https://juejin.cn/post/6969985606709428232) - 立即执行函数表达式 - call / apply / bind - [new](https://juejin.cn/post/6957250427452669983) - [深浅拷贝](https://juejin.cn/post/6957983885464436772) - [event loop](https://juejin.cn/post/6957523010693627917) - [正则](https://juejin.cn/post/6971036721442095111) - 事件 - ajax - 文件同步异步加载 - ES6+
### css 这里把我在掘金上写过的一些文章链接贴进来。
- css引入 - [选择器](https://juejin.cn/post/6942132650060546056) - [选择器优先级](https://juejin.cn/post/6942788958480760862) - 继承 - 值和单位 - 文本属性 - [盒子模型](https://juejin.cn/post/6944714103671914509) - [视觉格式化模型 VFM](https://juejin.cn/post/6945089335452827684) - [BFC ](https://juejin.cn/post/6951043990183477278)& IFC - [position](https://juejin.cn/post/6958694510188560392) - [float](https://juejin.cn/post/6961088231777501191) - [flex](https://juejin.cn/post/6959474262440673288) - 布局 - 层叠上下文 - less / scss
### http - http请求过程及http状态码 - session / cookie / localStorage / sessionStorage - get / post / restful 规范 - http协议 / OSI七层模型 / TCP-IP五层模型 - DNS 分析 - TCP分析 / 三次握手 / 四次握手 - Header
## 应用层 ![初中级开发体系简介 (1).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f037ebe0709d4487949e595bd3cee9ac~tplv-k3u1fbpfcp-zoom-1.image) ### node 这里不多赘述了，这个不太擅长

### webpack - 入门了解 &核心概念 - 配置 - 实战方面 - 优化 - 原理
### 微信公众号 - 公众号开发流程 / 部署流程 - 授权 - 支付扫 - 码推送场景
### 微信小程序 - 开发环境搭建 - 文件组成 / 声明周期 / 全局变量 / 公共设置 / 导航栏处理 - 组件使用 - 小程序在android和iphone上的不同 - 部署发布
### Typescript - TypeScript是什么 - TypeScript和javascript的区别是什么 - TypeScript 功能拆分 - 如何开始使用TypeScript - TypeScript和webpack的关系 - TypeScript和react的关系 - TypeScript和Eslint的关系
### 环境部署 - nginx - docker部署 - nginx环境 - 客户端渲染打包部署 - 服务端渲染打包部署 - docker + nginx + cicd 环境部署
## 框架框架具体还是看用的是什么，这里主要说react。
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88e7857cb8224575a41517c690fd2f31~tplv-k3u1fbpfcp-zoom-1.image) ### react - 初步了解 &上手开发demo - 核心概念 - 高级指引 - API 使用 - react hooks - redux - react-router - 场景应用 - 源码学习 & 了解
## 高级应用 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/817ca080c1ab4053bb7de91e47892011~tplv-k3u1fbpfcp-zoom-1.image) ### 数据结构 - 数组 - 栈 - 队列 - 链表 - 图 - 树 - 堆 - 散列表
### 设计模式 - 设计原则 - 常见设计模式 - 设计模式运用
# 为什么强调软能力提升？软能力我认为是一个人能达到多高的层次的很重要的一个因素。举个简单的例子，学习能力就是软能力，是我们获得知识的方式。
## 逻辑分析能力因为软能力很重要，举一个之前说过的例子：逻辑分析能力的重要性。 > 百度百科逻辑思维能力是指正确、合理思考的能力。即对事物进行观察、比较、分析、综合、抽象、概括、判断、推理的能力，采用科学的逻辑方法，准确而有条理地表达自己思维过程的能力。逻辑能力不仅仅是用来解决开发当中的问题，可以用到很多东西上面。以之前写的文章作为例子结构化思维-[MECE分析方法](https://juejin.cn/post/6941336368396107806)。
在项目当中，分析业务需求，思考代码逻辑，解决问题能力提升都和逻辑分析能力密不可分。并且可以在日常工作中去提升逻辑分析能力。而且逻辑分析能力的建立，是一种方法论的东西。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8973ba172532424298987c159175ffef~tplv-k3u1fbpfcp-zoom-1.image)

## 工作当中可以并且需要提高的能力我们在工作中其实是可以培养很多的能力的。只是我们自己没有在意这些，总是认为这些不重要。
每个人都想晋升，都想成为leader，或者大牛。假设毕业三年，五年想要达到中级，高级，或者项目负责人，或者部门负责人。**这里会有一个问题？能力到了没？** 当然可以说等到了位置在去磨练，也不是不行，那为什么不在现在的阶段就去打好以后成为负责人的基础呢。我们再把上面的图拿下来看一下：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/05fd35bfdee740f1b1886e7f90b94356~tplv-k3u1fbpfcp-zoom-1.image)
我最近有两个毕业一两年的同学主动找我沟通了一下。问题主要是方向问题。
我给与的答案是：不要认为现在的工作没啥意思，感觉学不到东西，其实是你们没有意识到而已。 **举个简单例子**：
对于日常工作，是不是可以对于业务流程去画流程图分析，锻炼自己的逻辑梳理能力，慢慢锻炼出来，后面会有逻辑分析能力，再往后结构化分析问题，这不仅是对日常任务，对于问题解决，还是掌握新的技术，都可以用这个方法处理。
而且过程当中，**沟通能力，协作能力，业务能力，技术能力，规划能力**都可以锻炼。
从工作中持续提高自己各方面的不足。等到了时间自动会达到对应的等级。如果现在不注意，总有一天是需要还债的。
**要认识一个道理，能力到了，我们才会到了对应的等级**。
# 基础的软能力 - 逻辑分析能力 -> 规划能力 - 沟通能力 - 协作能力 - 业务能力 - 框架能力 - 心态能力判断能力：基于技术能力，业务能力和规划能力
架构能力：也是基于技术能力和业务能力
心态能力：这个很重要，在于如何处理面临问题，如何自己释放压力，调整情绪

# 写在最后【毒鸡汤】 - 持续学习：[学习的重要性](https://juejin.cn/post/6968002742321152014#heading-13) - 工作中提升 - 明确自己的方向这个过程当中很多需要自己主观上的改变，过程会有一点辛苦，在这里毛遂自荐一下自己的对于工作和学习上的困难的理解。
**今天遇到的困难越多，不代表明天没有困难，而是明天遇到的困难，就会是后天或者更加往后遇到的困难**
这句话可能稍显前方的路有点艰难，我总是把现在遇到的困难当成锻炼自己的机会，勇于尝试，就算现在失败了，以后在遇到的时候，我就多了失败的资本，肯定会比现在更好的处理遇到的困难。

![StockSnap_M5791YB6J9.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff13f48be26e4623a9f1fd858d75ec8d~tplv-k3u1fbpfcp-zoom-1.image)