前端项目负责人最基础的需要会哪些

r囧r小猫 2022-08-30 04:18 207阅读 0赞

# 1. 写在开头 #

之前给团队分享一下前端技术体系，顺便说一下基础能力范畴指哪些东西，分为**技术能力和软能力**。下面列的东西也有许多我自己不擅长的地方，但是还是会列一下，也是目前自己能想到的技术体系结构。

## 技术能力图 ##

![6286d29cd16f14361da429b6400f0380.png][]

## 软能力图 ##

具体可查看文章：[前端项目负责人需要具有的能力][Link 1]

![68984dec340a0c2daabf6202be18f339.png][]

# 2. 为什么强调基础能力？ #

基础能力是技术能力发展的基础。举几个例子可能会比较清楚。

## 基础知识和react的关系 ##

![a8cd2080a927b8ca99e3d970bf904b40.png][]

## 基础知识和算法的关系 ##

![ce871b3faa809bee7114a7aeb1cb17fc.png][]

## 性能优化和基础知识的关系 ##

![e471b2fe3d6e3f2f8f13abf7709e206f.png][]

# 3. 基础技术能力 #

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

![eb20a6b5c4b8e7170ee3f4053b71b220.png][]

## 3.1 基础知识 ##

![6588dfed1929ca77828315cf8728b69f.png][]

### 3.1.1 html ###

*  语义化
 *  html元素
 *  文档元数据

### 3.1.2 DOM ###

*  节点
 *   *  html属性和dom属性的不同
 *  属性
 *  访问
 *  事件

### 3.1.3 javascript ###

*  js数据类型 &包装对象 内置对象
 *   *  字符串方法
     *  数组方法
     *  对象方法
 *  运算符操作
 *  原型
 *  继承
 *  作用域链
 *  执行上下文
 *  闭包
 *  this
 *  立即执行函数表达式
 *  call / apply / bind
 *  new
 *  深浅拷贝
 *  event loop
 *  正则
 *  事件
 *  ajax
 *  文件同步异步加载
 *  ES6+
 *  事件
 *  ajax
 *  文件同步异步加载
 *  ES6+

### 3.1.4 css ###

*  css引入
 *  选择器
 *  选择器优先级
 *  继承
 *  值和单位
 *  文本属性
 *  盒子模型
 *  视觉格式化模型 VFM
 *  BFC & IFC
 *  position
 *  float
 *  flex
 *  布局
 *  层叠上下文
 *  less / scss

### 3.1.5 http ###

*  http请求过程及http状态码
 *  session / cookie / localStorage / sessionStorage
 *  get / post / restful 规范
 *  http协议 / OSI七层模型 / TCP-IP五层模型
 *  DNS 分析
 *  TCP分析 / 三次握手 / 四次挥手
 *  Header

## 3.2 应用层 ##

![006f7569582ebe3a2d209cb741656022.png][]

### 3.2.1 node ###

这里不多赘述了，这个不太熟悉

### 3.2.2 webpack ###

*  入门了解 &核心概念
 *  配置
 *  实战方面
 *  优化
 *  原理

### 3.2.3 微信公众号 ###

*  公众号开发流程 / 部署流程
 *  授权
 *  支付扫码
 *  推送场景

### 3.2.4 微信小程序 ###

*  开发环境搭建
 *  文件组成 / 声明周期 / 全局变量 / 公共设置 / 导航栏处理
 *  组件使用
 *  小程序在android和iphone上的不同
 *  部署发布

### 3.2.5 Typescript ###

*  TypeScript是什么
 *  TypeScript和javascript的区别是什么
 *  TypeScript 功能拆分
 *  如何开始使用TypeScript
 *  TypeScript和webpack的关系
 *  TypeScript和react的关系
 *  TypeScript和Eslint的关系

### 3.2.6 环境部署 ###

*  nginx
 *  docker部署
 *  nginx环境
 *  客户端渲染打包部署
 *  服务端渲染打包部署
 *  docker + nginx + cicd 环境部署

## 3.3 框架 ##

框架具体还是看用的是什么，这里主要说react。

![d0ee1205bb87b5352ef8d68414616302.png][]

### react ###

*  初步了解 &上手开发demo
 *  核心概念
 *  高级指引
 *  API 使用
 *  react hooks
 *  redux
 *  react-router
 *  场景应用
 *  源码学习 & 了解

## 3.4 高级应用 ##

![7d2810ccda6fd03263524a98a84a8c74.png][]

### 3.4.1 数据结构 ###

*  数组
 *  栈
 *  队列
 *  链表
 *  图
 *  树
 *  堆
 *  散列表

### 3.4.2 设计模式 ###

*  设计原则
 *  常见设计模式
 *  设计模式运用

# 4. 为什么强调软能力提升？ #

软能力我认为是一个人能达到多高的顶点的很重要的一个因素。举个简单的例子，学习能力就是软能力，是我们获得知识的方式。

## 4.1 逻辑分析能力 ##

因为软能力很重要，举一个之前说过的例子：逻辑分析能力的重要性。

> 百度百科 逻辑思维能力是指正确、合理思考的能力。即对事物进行观察、比较、分析、综合、抽象、概括、判断、推理的能力，采用科学的逻辑方法，准确而有条理地表达自己思维过程的能力。

逻辑能力不仅仅是用来解决开发当中的问题，可以用到很多东西上面。以之前写的文章作为例子结构化思维-MECE分析方法。在项目当中，分析业务需求，思考代码逻辑，解决问题能力提升都和逻辑分析能力密不可分。并且可以在日常工作中去提升逻辑分析能力。而且逻辑分析能力的建立，是一种方法论的东西。

![f1e270ace1a91bda1bd344bfa9018cae.png][]

## 4.2 工作当中可以并且需要提高的能力 ##

我们在工作中其实是可以培养很多的能力的。只是我们自己没有在意这些，总是认为这些不重要。

每个人都想晋升，都想成为leader，或者大牛。假设毕业三年，五年想要达到中级，高级，或者项目负责人，或者部门负责人。

**这里会有一个问题？能力到了没？**

当然可以说等到了位置在去磨练，也不是不行，那为什么不在现在的阶段就去打好以后成为负责人的基础呢。我们再把上面的图拿下来看一下：

![710e8f6990d7b60324c77d1b4a30604f.png][]

我最近有两个毕业一两年的同学主动找我沟通了一下。问题主要是方向问题。

我给与的答案是：不要认为现在的工作没啥意思，感觉学不到东西，其实是你们没有意识到而已。

举个简单例子：对于日常工作，是不是可以对于业务流程去画流程图分析，锻炼自己的逻辑梳理能力，慢慢锻炼出来，后面会有逻辑分析能力，再往后结构化分析问题，这不仅是对日常任务，对于问题解决，还是掌握新的技术，都可以用这个方法处理。

而且过程当中，**沟通能力，协作能力，业务能力，技术能力，规划能力**都可以锻炼。

从工作中持续提高自己各方面的不足。等到了时间自动会达到对应的等级。如果现在不注意，总有一天是需要还债的。

**要认识一个道理，能力到了，我们才会到了对应的等级**。

# 5. 基础的软能力 #

*  逻辑分析能力 -> 规划能力
 *  沟通能力
 *  协作能力
 *  业务能力
 *  框架能力
 *  心态能力

# 6. 延伸的软能力 #

*  判断能力：基于技术能力，业务能力和规划能力
 *  架构能力：也是基于技术能力和业务能力
 *  心态能力：这个很重要，在于如何处理面临问题，如何自己释放压力，调整情绪

# 7. 写在最后【毒鸡汤】 #

*  持续学习：学习的重要性【[毕业不到一年的前端开发同学的焦虑][Link 2]】
 *  工作中提升
 *  明确自己的方向

这个过程当中很多需要自己主观上的改变，过程会有一点辛苦，在这里毛遂自荐一下自己的对于工作和学习上的困难的理解。

**今天遇到的困难越多，不代表明天没有困难，而是明天遇到的困难，就会是后天或者更加往后遇到的困难**

这句话可能稍显前方的路有点艰难，我总是把现在遇到的困难当成锻炼自己的机会，勇于尝试，就算现在失败了， 以后在遇到的时候，我就多了失败的资本，肯定会比现在更好的处理遇到的困难。

[6286d29cd16f14361da429b6400f0380.png]: /images/20220829/c235dfb382044813bc691a554f90b786.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=Mzg4NTQyOTc5NQ%3D%3D&chksm=cfa842a1f8dfcbb7544f30deedb98e34bfbe12200e43a5c501863f53fed188930a2393379216&idx=1&mid=2247483885&scene=21&sn=fb65507c33a8685e968db2d127d8c8e3#wechat_redirect
[68984dec340a0c2daabf6202be18f339.png]: /images/20220829/fc757cde952a47b08226c353575327e8.png
[a8cd2080a927b8ca99e3d970bf904b40.png]: /images/20220829/1020b6c966024a52824d34c259a92229.png
[ce871b3faa809bee7114a7aeb1cb17fc.png]: /images/20220829/b696221cbfb94f2e9a9167ab9e2b925a.png
[e471b2fe3d6e3f2f8f13abf7709e206f.png]: /images/20220829/52dbbd118f354a9eb4499a699b146ae5.png
[eb20a6b5c4b8e7170ee3f4053b71b220.png]: /images/20220829/fb34969628a54ce59a4b1acfdd216758.png
[6588dfed1929ca77828315cf8728b69f.png]: /images/20220829/4690d7c665ca4cf6bc06fa6ffe1a0336.png
[006f7569582ebe3a2d209cb741656022.png]: /images/20220829/f84bcaf42c554d818be6bd0dc919494d.png
[d0ee1205bb87b5352ef8d68414616302.png]: /images/20220829/63c1868baea9465cbebc1767a5d7244f.png
[7d2810ccda6fd03263524a98a84a8c74.png]: /images/20220829/92cd19c2c40c47819f06e6404a9f0ba2.png
[f1e270ace1a91bda1bd344bfa9018cae.png]: /images/20220829/4c7d4c5a6166420789be613767ee491e.png
[710e8f6990d7b60324c77d1b4a30604f.png]: /images/20220829/d70a29f89d8b49738a00ac54ef3ee325.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=Mzg4NTQyOTc5NQ%3D%3D&chksm=cfa8421ef8dfcb08dd29da78c8a243ff072a72c4df2d33d04dcf56ff9829956764d98f13adce&idx=1&mid=2247483730&scene=21&sn=e29dc20813bb86794106a7fe22e9b31a#wechat_redirect