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

1. 写在开头

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

技术能力图

软能力图

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

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

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

基础知识和react的关系

基础知识和算法的关系

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

3. 基础技术能力

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

3.1 基础知识

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 应用层

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。

react

• 初步了解 &上手开发demo

• 核心概念

• 高级指引

• API 使用

• react hooks

• redux

• react-router

• 场景应用

• 源码学习 & 了解

3.4 高级应用

3.4.1 数据结构

• 数组

• 栈

• 队列

• 链表

• 图

• 树

• 堆

• 散列表

3.4.2 设计模式

• 设计原则

• 常见设计模式

• 设计模式运用

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

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

4.1 逻辑分析能力

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 基础的软能力

• 逻辑分析能力 -> 规划能力

• 沟通能力

• 协作能力

• 业务能力

• 框架能力

• 心态能力

6. 延伸的软能力

• 判断能力：基于技术能力，业务能力和规划能力

• 架构能力：也是基于技术能力和业务能力

• 心态能力：这个很重要，在于如何处理面临问题，如何自己释放压力，调整情绪

7. 写在最后【毒鸡汤】

• 持续学习：学习的重要性【毕业不到一年的前端开发同学的焦虑】

• 工作中提升

• 明确自己的方向

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

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

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