2022-1.前端工程师的困惑与挑战

你好，我是网名“itwangyang”，一直深耕在前端领域。

前端工程师的困惑与挑战

工作期间我发现，前端工程师自身容易形成一些误解，常见的有两个：

• 工作年限 = 级别（能力）

• 框架/工具使用得越多越好

持有第一种误解的前端工程师认为，只要在前端这个领域工作的年限久了，就自然而然成为了高级工程师。具体表现是被动工作、被动学习，沉浸在自己的舒适区，直到工作数年后突然发现日子不好混了，自身学习能力又不够，遭遇所谓的中年危机。

要避免工作年限成为劣势，我的建议是每年定期回顾自己所做的工作，以此来判断你是在舒适圈内做熟悉、重复的事情，还是在不断地挑战提升自己。

第二种误解比较可怕，一般持有这种误解的工程师表现为使用过多种技术，但都只停留在表面，会调用 API 而已，杂而不精。一方面这种工程师所掌握的知识太浅，任何一个初级工程师，给予一定的时间和练习机会都能达到他的水平；另一方面也暴露了他没有深入学习的能力和精神，而这也是成为高级工程师的重要阻力。

时间对于软件工程师来说是一把双刃剑，如果利用好时间进行有效的知识积累，那么时间会是朋友，否则时间终将成为敌人。

举个例子，下面是某人的工作经验简述：

• 使用 zepto.js 和 CSS3 动效开发过一些移动端活动页面；

• 使用 React 和 Ant Design 开发过一个医药商城 Web App 的核心模块及后台管理页面；

• 熟悉 Git 工具和代码管理流程；

• 熟悉 webpack、Gulp.js 等工具的使用；

• 自学了 Node.js、Docker、MongoDB，能编写一些小项目。

如果他是工作 1 年的工程师，那么会让面试官有些小惊喜；如果工作了 3 年，应该也还算不错。但如果已经工作 5 年了，面试官可能要好好考察他一下了。

因为对于工作 5 年的工程师，面试官最看重的是工作能力，而这里面并没有很好地体现出来。虽然简历中表明他使用过主流框架和工具开发过项目，但从描述上看，项目本身并不复杂，且看不出其熟练程度。（这里值得一提的是，“熟练”这种主观性的自我描述建议少用，很容易适得其反，技艺越是精深的工程师对“熟练”、“精通”这种描述越谨慎，因为他们知道的越多，发现未知的也更多，同样也知道“人外有人”的道理。）

另外，前端工程师之间的能力和薪资存在着“贫富分化”的现象，而且随着时间的推进在不断加剧。

这也很好理解，薪资越高的工程师往往学习能力越强，从事着公司的重要岗位和工作，其成长速度也越快；而薪资低的工程师则往往学习能力有限，从事着低价值、重复性高的工作，也更容易困于瓶颈难以突破。

综合来看，前端工程师在职业发展和技能提升上，主要是被下面三个问题所困扰。

1. 前端知识点太多

相对于其他开发岗位而言，前端需要掌握三门语言。

最简单的 HTML 语言有上百个用法各异的标签，每个标签还有属性，还有 DOM 提供的 API；CSS 的知识点也不少，选择器有十几类，属性有上百种，常用的枚举属性 display 都有十几种值；至于 JavaScript 的知识点，看看六七百页的犀牛书就可见一斑了。

2. 前端技术更新速度快

• 前端框架有好几种，主流就有 2~3 种，这还不算每个框架的版本；

• 构建工具不断更新，有些框架还封装了自己的命令行工具；

• 不断出现新技术名词，如 SSR、PWA、Serverless、Flutter 等；

• ......

面对前端技术浪潮，有人开始抱怨“别更新了”、“学不动了”……当然，消极抱怨并不能阻止技术的进步，同时对自己的技能提升也起不到任何帮助，不应效仿。但过于积极学习的人，也并不十分可取。

记得有一次参加线下技术分享会，有工程师发言说自己要在两年内成为前端架构师，然后还说出了自己的计划，就是把各种所知的前端技术名词像报菜名一样说了一遍，随后再补充一句“看懂其源码”。

抱着类似想法的初级/中级工程师其实并不少见，以为拿到了一份技能图谱，或者背一背面试题就能一跃成为高级/资深前端工程师。

这种企图通过量变引起质变的方式并不可取，时间精力是一方面，更重要的是，囫囵吞枣的学习方式缺乏对前端知识系统的认知，只是把知识点堆砌在一起而没有形成自己的认知框架。就像沙子、钢筋、水泥堆在一起顶多只是原材料，只有经过建筑师之手，它们才能成为高楼大厦。

3. 前端应用场景越来越复杂

当 Node.js 出现的时候，前端工程师已经可以涉足后端了，甚至独立开发整个 B/S 架构的系统；而当混合应用、小程序等技术出现时，则意味着前端工程师可以开发多个终端系统。

不同开发场景下的实现目标、API 及调试工具又各有差异，比如微信小程序和钉钉小程序就提供了各自独立的开发工具，浏览器环境下为 JavaScript 提供了 BOM 和 DOM，而 Node.js 环境下提供的是 fs、net 等模块。

如何破局？

为了帮助前端工程师解决上述问题，我特意设计了这门课程，来帮助你建立合理的知识结构，并培养可复用的工作能力。

1. 建立合理的知识结构

合理的知识结构既指知识框架的可扩展性，同时也指每个知识点的完备性。

知识框架的可扩展性是指，在尽量少的调整自身已有知识结构的情况下，就可以不断将新的技术知识吸纳进来。就像架构师搭建的项目框架一样，能帮助开发工程师方便快速地完成新功能的开发。而差的知识框架就如糟糕的项目，会随着功能增加而变得复杂臃肿，最终不得不将代码推翻重构。

知识点的完备性是指，每个知识点不应停留在只会调用接口函数的程度，而是深入其实现原理，然后能加以运用，从而构建更复杂更具通用性的项目。

2. 培养可复用的工作能力

除了最基本的能看懂文档、调用接口的编程能力之外，还着重帮助你提升以下 3 方面的能力：

• 探究能力，深度探究技术背后的原理，并且能结合实践灵活运用；

• 解构能力，能够分析和分解复杂问题，并一步步解决；

• 归纳能力，建立知识点之间的联系，并找到其共性，从而达到举一反三的目的。

不管你是大厂螺丝钉，还是小厂顶梁柱，这些能力都将帮助你在晋升的道路上快步前行。

课程设计

本课程划分为 4 个模块，共 33 篇，主要深入讲解前端核心知识点的底层原理以及相关实战经验，希望借此帮助你建立起系统的知识框架，提升综合技术能力。

• 模块一，前端核心基础知识：带你深入理解前端工程师的必备技能 HTML、CSS、JavaScript 及网络协议，掌握它们的高级用法，比如 DOM 事件应用、CSS 管理、JavaScript 异步处理方案，以及 API 设计。同时深入浏览器内核的工作机制，让你成为一个懂页面样式，更懂浏览器的前端工程师。

• 模块二，实际应用场景解析：解析热门前端框架，理解其设计原理，让你不再只停留会用框架的程度。深入分析前端工程化中的重要工具 webpack，建立工程化、工具化思维，带你向高级前端工程师迈进。

• 模块三，综合能力提升：前端知识扩展部分，通过理解 Node.js 核心原理与应用场景，扩大你的开发能力边界，不再只局限于浏览器，同时通过算法与数据结构的学习，建立解决复杂问题的能力，助你构筑一条既深又宽的“护城河”。

• 模块四，彩蛋：谈谈工作之内、技术之外的内容，包括职业规划和面试技巧，帮你直取高薪 Offer。

课程虽然会同时讲到原理和运用，但你不用担心因此而增加了理解难度。事实上，我为你努力设计了合理的学习方式，会尽量先从你熟悉的“表象”开始，然后逐渐深入原理，最后探究一些高级应用场景，带你循序渐进地理解和学会实践。

课程寄语

前端这个职业虽然在软件开发中比较“年轻”，但其前景不可限量：服务端有 Node.js，客户端有 Electron，移动端小程序又以 JavaScript 作为主语言，PWA 更有颠覆原生 App 之志。更妙的是它们都是跨系统或者跨端的，这些技术大大丰富了前端技术的应用场景，使得前端工程师的天花板和薪资不断提高，前端工程师再也不只是“写页面”的了！

前端技术的光明前景也吸引了更多人加入到前端工程师的行列，各种前端新技术、新框架的出现，也在考验前端工程师的能力。

面对“前有险阻、后有追兵”之势，如何提升竞争力，建立自己的“护城河”，是每一位优秀的前端工程师都在思考的问题。而在这个课程中，希望我能够帮你打通基础知识底层原理来甩开追兵，提升学习和架构能力来克服险阻。

你也不妨在课程伊始，给自己设立个小目标，等到课程学完以后，再来回顾复盘。也欢迎你在留言区与我、或与同行的朋友分享你的成长和经验心得，一起学习成长，成为优秀的前端工程师！

---

end