前端学习方法与构建知识体系

Winter老师的《前端训练营》笔记

前沿

在大前端的成长路上，很多的同学都非常的迷茫，看到一座座越来越高的山。慢慢在工作中也对自己的职业发展也特别迷茫。有些粉丝也私信我问过我一些职业发展的问题，还有“我应该学习什么技术？”，“学习到什么层级才是个头”。

这次我给大家带来一遍文章，给大家讲讲怎么样才是一个优秀的前端工程师，怎么做自己的职业规划，如何学习和构建知识体系。

什么是优秀的前端工程师？

大家眼中的优秀工程师

• 熟练掌握Vue React

• Web标准

• 会用 Webpack Babel

• 十年经验

• 性能优化

• 闭包，函数式编程

• 会写NodeJS

这些其实都是错误的认知！

真正优秀的工程师

明确衡量的标准：

• 领域知识

  • 不同工程师的工种有不一样的领域

  • 领域知识是互相关联的，不能只一方面很强

• 能力和潜力

  • 能力 —— 明确的能力要求，或者角色的要求，能力达标就能进入下一个级别。

  • 潜力 —— 能力的上限，同样的层级的人，同样能写出同样的代码，但是区别在于独立解决问题的能力和出解决方案。

  • 每年都有KPI（30% - 优秀，60% - 普通，10% - 不合格），潜力评估（预计几年内可以晋升）

• 职业规划

  • 工程师 (P5) —— 独立工作

  • 资深工程师 (P6) —— 核心和骨干，小组长的位置，能带领突破难题

  • 专家 (P7) —— 领域专家，在某一种领域成型一种权威，推动发展，在自己的领域内可以用通用的解决办法解决问题

  • 经理 (P8)

• 如何晋升？

  • 持续提升技术能力

  • 在领域中有沉淀

• 成就

  • 用你达到的成就来证明你的能力

  • 根据你曾经做过的东西，曾经承担过的事情

职业规划

You are the owner of your career.

• 很多人觉得职业规划是“老板”，“爸妈”，“老师”的事，其实你才是职业的主人

• 很多同学在执行的时候就走形了，很多人觉得职业晋升是老板的意识，如果老板没有给我们晋升我们就认命了吗？

• 不是的，你的职业你才是主人，职业发现的结果我们要为他负责，所以我们要有行动（要不就谈判，要不就离职等等）

• 职业规划对我们自己影响是最大的，所以我们要有一个 owner 的态度，拿出一个方案来保障自己的结果

• 明确知道自己在这个公司什么时间，要达到什么样一个级别，如果不能就要思考怎么做到

• 所以在职场中，要保持一种危机感和紧迫感，如果我们一旦误就会止步不前了

• 我们该投入的精力，没有去投入，是没有人可以为你负责的，职业发展也是一样的

职业发展

• 成长 - 通过学习，沉淀获得成长

• 成就 - 成长后必定能做出一定的成就，成就可以用来证明自己的技术能力级别

• 晋升 - 获得成就就能证明自己可以晋升到下一个级别

业务型成就

• 业务目标

  • 理解公司业务的核心目标

  • 目标转化为指标（UV，PV，页面加载时间，成交的钱）

• 技术方案

  • 业务指标到技术指标的转化

  • 形成纸面方案、完成小规模试验

• 实施方案

  • 确定实施目标、参与人

  • 管理实施进度

• 结果评估

  • 数据采集、数据报表

  • 向上级汇报

  • 没有结果是不可能获得晋升的，只会落得一个“勤奋耐劳”的称号

案例：

• 业务目标 & 指标：点击率

• 技术方案：给 tab 组件增加手势操作

• 实施 1：在业务中加入对应功能，并上线

• 结果：点击率提升3倍

• 实施 2：编写通用tab组件，向所有导购业务推广，形成制度

工程型成就

• 目标

  • 质量

  • 效率

• 方案与实施

  • 规章制度

  • 库

  • 工具

  • 系统

• 结果

  • 线上监控

案例——XSS攻击的预防：

• 目标 & 指标：XSS攻击白帽子反馈漏洞

• 技术方案：整理安全手册，review历史代码，代码扫码工具

• 实施：对全体前端宣讲，整体 review 代码，更改代码发布流程

• 结果：XSS漏洞大幅减少

技术难题

• 目标

  • 公认的技术难题

  • 能影响业务

• 方案与实施

  • 依靠扎实的编程能力

例子——爬取商品价格：

• 背景：在某浏览器插件项目中，需要爬取各个网站价格比价，但是各个网站会采用图片价格等手段防御

• 方案：引入JS端的数字识别技术，靠AI技术解决

前端与学习方法

对学习知识体系的态度，应该不要去强求，而是去理解知识体系的完整性和框架，多面，多维度，多方面的去累积来补足，补全自己的知识体系。

• 很多同学在质问学习的东西有没有用

• 很多知识其实是没有用的，但是有一些微小的点可能会用上

• 但是没有办法确切去知道它的有效性

• 我们要知道完整的知识体系，然后抽取重要的知识点进行加固

• 重点在于每一个知识点，看到就学一下，学不会不要紧，下次再看到时就加固学习（强扭的瓜不甜）

• 系统化学习 + 随机性学习的结合

前端技能模型

• 领域知识

  • 不同的领域会学到不一样的知识

  • 实践中学习

• 前端知识

  • 建立知识体系

  • 对知识体系掌握度是重点，而不是对知识体系的量级

• 能力 —— 刻意练习

  • 编程能力

  • 架构能力

  • 工程能力

前端技术不是武林秘籍，

真正的能力是练出来的。

学习法

1. 整理法

我们要追求的是一个完备性，而不是追求完整或者完美性。而我们重点是选择对的逻辑关系

• 顺序关系

  • 记录一个体系的流程顺序关系

• 组合关系

• 纬度关系

  • 每一个维度单独看都是完整的东西

  • 多个维度去看是一个立体完整的东西

• 分类关系

  • 按分类列出知识

整理方式：

1. 先找线索，通过搜索，看手册，看文章搜集。先找到方向！

2. 找到多份资料

3. 进行对比，加强完整性

2. 追溯法

• 源头 —— 从源头开始建立知识基础，提升可信度

  • 最早出现的论文、杂志

  • 最初的实现案例

• 标准和文档 —— 找权威性，但是不能盲目的看，要做好对比，保证准确性

  • W3.org

  • Developer.mozilla.org

  • msdn.microsoft.com

  • Developer.apple.com

• 大师 —— 可以去看他们对技术的定义，公信力更高

  • Tim Berners-Lee

  • Brendan Eich

  • Bjarne Stoustrup

通过这些方法建立知识基础，可以建立我们知识的准确性，可信度，公信力。同时在面试的时候可以提出你在那个权威的地方看到这个知识，也可以体现出你的专研和深挖能力。

通过时间的的延伸，知识会不停的演变和被不同的人重新定义，所以我们要知道并对这个知识点有全面认知，从而在不同的领域或者场景下更加能抽丝破茧的方式去理解复杂，繁杂的知识。

面试官怎么想？

面试内容三要素

• 深度范围

• 覆盖面

• 区分度

面试过程

• 打断

  • 打断意味着不感兴趣

  • 打断是一种提示

  • 如果面试官不要你，直接就让你说，然后叫你走就好了

• 争论

  • 争论与压力面试 —— 保持自己优雅仪表和态度

  • 争论的技巧 —— 用追溯法找到可信度高来表达

• 难题

  • 展现分析过程 —— 一边想一边说

  • 缩小规模 —— 化繁为简，把问题拆解

问题类型

• 项目型

  • 针对项目询问

  • 项目中实现了什么？

  • 遇到了什么难题，又是怎么解决的？

  • 主要考量我们在项目中体现出来的能力和思维

• 知识型

  • 体现自己的知识体系

  • 会就会，不会就不会

• 开放性问题

  • 通常是没有标准答案的问题

  • 设计方案的能力

  • 思维活跃程度

  • 管理型问题

• 案例性问题

  • 设计、编程类

  • 给予场景并且给出解决方案

  • 用来考验我们平时的工作状态

  • 看的是过程不是结果（结果答的是正确的，过程不一定是对的，想看的就是你平时的工作状态，遇到问题时的状态）

• 有趣的问题

  • 一般到达这个问题，基本面试已经过了

  • 关键不是你答什么，重点是体现自己思维的活跃度

  • 不一定要给到完美答案

知识体系

建立自己的知识体系，确保自己体系的完整性。在学习的过程中可以补充这个体系，达到很高的完美性。而且是可以在自己的心里有这么一个完整的知识体系，而不只是在我们电脑放着就好。

Q & A

• 职业规划，我不知道往哪里去？

  • 每个人目标不一样

  • 有人可能喜欢深挖一个技术，有些人就想做一个伟大的项目

  • 所以你要去哪里取决于你的人生目标是什么

  • 但是没有什么选择是错的，重点是你想做什么，就找到能做你想做的地方

• 大厂会不会对 5-6 年工作经验有顾虑

  • 大厂对工作年龄不稳定

  • 但是如果你的工龄与你的能力不成对比，那肯定是有问题的

• 在公司学不到东西，怎么办？

  • 学不到东西是你自己的问题

  • 要有 owner 意识，学不到东西就去找东西学

  • 我们不能把学不到东西推卸给公司或者环境

• 我年龄大了，还有可能进入大厂？

  • 如果你觉得你的年龄无法进入 P6，那就继续提升到更高的级别

  • 总有一个级别是不在乎年龄的

  • 不论是年龄还是自己的学历，都不是我们应该关注的点

  • 更应该关注的是，我们有什么亮点可以让别人忽略我们的缺点

  • 所以要持续提升自己技术的认知，这些核心竞争力

  • 不要一直盯着自己不能改变的东西

我是三钻，一个在技术银河中等你们一起来终身漂泊学习。 点赞是力量，关注是认可，评论是关爱！下期再见 👋！

公众号《技术银河》回复"前端知识体系"，可以获得这个系列文章的知识脑图！

推荐专栏

小伙伴们可以查看或者订阅相关的专栏，从而集中阅读相关知识的文章哦。

• 📖 《数据结构与算法》 --- 到了如今，如果想成为一个高级开发工程师或者进入大厂，不论岗位是前端、后端还是AI，算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师，前提面试就需要考算法。

• 📖 《FCC前端集训营》 --- 根据FreeCodeCamp的学习课程，一起深入浅出学习前端。稳固前端知识，一起在FreeCodeCamp获得证书

• 📖 《前端星球》 --- 以实战为线索，深入浅出前端多维度的知识点。内含有多方面的前端知识文章，带领不懂前端的童鞋一起学习前端，在前端开发路上童鞋一起燃起心中那团火🔥